كيفية عرض كود HTML في كروم

سجل واكسب 1000 دولار في اليوم ⋙

روابط الجهاز

هل أنت متشوق لمعرفة ما الذي يتكون منه صفحة الويب؟ هل تريد معرفة كيفية تغيير حجم الخط أو لونه على موقع الويب الخاص بك؟ من خلال عرض كود HTML لصفحة ويب ، يمكنك القيام بكل هذه الأشياء والمزيد.

كيفية عرض كود HTML في كروم

في هذا البرنامج التعليمي ، سنوضح لك كيفية عرض رمز HTML لصفحة ويب في Chrome.

عرض كود HTML في كروم

عند الكتابة بلغة HTML ، فإن الكود المصدري هو سلسلة من العلامات والسمات المستخدمة لتحديد هيكل ومحتوى صفحة الويب.

تتم قراءة التعليمات البرمجية المصدر بواسطة متصفحات الويب وترجمتها إلى صفحة الويب الرسومية التي تراها على الشاشة. بالإضافة إلى تحديد الشكل والمظهر لصفحة الويب ، يمكن أيضًا استخدام التعليمات البرمجية المصدر لإضافة التفاعل ، مثل النوافذ المنبثقة والنماذج والقوائم المنسدلة.

في حين أن مستخدم الإنترنت العادي قد لا يحتاج أبدًا إلى عرض شفرة مصدر HTML لصفحة الويب ، إلا أن هناك عدة أسباب قد يرغب البعض في القيام بذلك.

بالنسبة للمطورين ، يمكن أن يكون عرض التعليمات البرمجية المصدر طريقة مفيدة لفهم كيفية بناء الصفحة وتحديد عناصر التصميم والبرمجة المستخدمة. بالنسبة للمصممين ، قد يكون من المفيد معرفة كيفية استخدام المصممين الآخرين لـ HTML لإنشاء تخطيطات فعالة.

في بعض الحالات ، قد يرغب المستخدمون أيضًا في عرض التعليمات البرمجية المصدر لاستكشاف الأخطاء وإصلاحها أو معرفة المزيد حول كيفية عمل موقع ويب معين أو تطبيق ويب معين. مهما كان السبب ، فإن عرض شفرة مصدر HTML هي عملية بسيطة نسبيًا في Chrome.

كيفية عرض كود HTML لصفحة ويب في Chrome على جهاز كمبيوتر يعمل بنظام Windows

يعد نظام التشغيل Windows أحد أكثر أنظمة Chrome توافقًا. تم إنشاء Chrome على رأس مشروع Chromium مفتوح المصدر ، والذي تعد Microsoft مساهمًا رئيسيًا فيه. يمتد هذا التوافق إلى عالم HTML ، حيث يتيح المتصفح الشهير للمستخدمين عرض كود HTML لأي موقع ويب.

يمكنك عرض كود HTML بطريقتين.

استخدام عرض مصدر الصفحة

هذه الطريقة مباشرة:

  1. افتح Chrome وانتقل إلى الصفحة حيث تريد عرض كود مصدر HTML.
    كيفية عرض كود HTML في كروم
  2. انقر بزر الماوس الأيمن على الصفحة وحدد عرض مصدر الصفحة ، أو اضغط على Ctrl + U على لوحة المفاتيح لفتح شفرة المصدر في علامة تبويب جديدة.
    كيفية عرض كود HTML في كروم

سيظهر رمز المصدر في علامة التبويب الجديدة ، ويمكنك التمرير خلالها لعرض ترميز HTML لتلك الصفحة.

باستخدام أدوات المطور

لفحص شفرة المصدر لصفحة الويب باستخدام أدوات المطور في Google Chrome ، اتبع الخطوات أدناه.

  1. افتح Google Chrome وانتقل إلى صفحة الويب التي تريد فحصها.
    كيفية عرض كود HTML في كروم
  2. اضغط على Ctrl + Shift + I على لوحة المفاتيح. سيتم فتح جزء أدوات المطور في قفص الاتهام بجانب صفحة الويب التي تشاهدها.
    كيفية عرض كود HTML في كروم
  3. انقر فوق علامة التبويب "العناصر" في الجزء العلوي من الجزء. سيعرض هذا كود مصدر HTML لصفحة الويب.
    كيفية عرض كود HTML في كروم
  4. يمكنك الآن مراجعة شفرة المصدر للصفحة. لطي عنصر ما ، انقر فوق المثلث الموجود بجوار اسم العلامة الخاصة به. لعرض مزيد من المعلومات حول أحد المكونات ، انقر بزر الماوس الأيمن فوقه وحدد "فحص".
    كيفية عرض كود HTML في كروم

ضع في اعتبارك أن هذه الطريقة هي الأفضل لصفحات HTML ؛ من الممكن عرض التعليمات البرمجية المصدر لأنواع أخرى من صفحات الويب ، ولكن قد يكون التنسيق أكثر صعوبة في القراءة.

كيفية عرض كود HTML لصفحة ويب في Chrome على جهاز Mac

إذا كنت مطور ويب ، فمن المهم أن تكون قادرًا على عرض كود HTML لصفحة الويب. يتيح لك هذا الاطلاع على كيفية تنظيم الصفحة واستكشاف المشكلات التي قد تظهر وإصلاحها. لحسن الحظ ، من السهل القيام بذلك في Chrome على جهاز Mac. ما عليك سوى اتباع هذه الخطوات:

  1. افتح Chrome وانتقل إلى صفحة الويب حيث تريد عرض كود HTML.
    كيفية عرض كود HTML في كروم
  2. انقر بزر الماوس الأيمن على الصفحة وحدد "فحص".
    كيفية عرض كود HTML في كروم
  3. سيتم فتح جزء جديد في الجزء السفلي من الشاشة يعرض كود HTML.
    كيفية عرض كود HTML في كروم
  4. يمكنك أيضًا النقر فوق عناصر محددة في كود HTML لمعرفة كيفية تصميمها على الصفحة. على سبيل المثال ، يمكنك معرفة أنماط CSS التي يتم تطبيقها على عنصر عن طريق تحديده ثم النقر فوق علامة التبويب "الأنماط" في الجزء الذي يفتح.
    كيفية عرض كود HTML في كروم
  5. لإغلاق الجزء ، انقر فوق "X" في الزاوية العلوية اليمنى.
    كيفية عرض كود HTML في كروم

بدلاً من ذلك ، يمكنك استخدام Chrome Developer Tools لعرض شفرة المصدر.

  1. افتح Google Chrome وانتقل إلى صفحة الويب التي تريد فحصها.
    كيفية عرض كود HTML في كروم
  2. انقر فوق رمز القائمة (ثلاث نقاط) في الزاوية العلوية اليمنى من المتصفح وحدد المزيد من الأدوات وأدوات المطور من القائمة المنسدلة.
    كيفية عرض كود HTML في كروم
  3. سيتم فتح لوحة Developer Tools في الجزء السفلي من الشاشة. حدد "العناصر" في الجزء العلوي من الجزء.
    كيفية عرض كود HTML في كروم
  4. سترى الآن رمز HTML للصفحة الحالية معروضًا في لوحة Elements. يمكنك استخدام الخيارات المختلفة في اللوحة لفحص الكود وتصحيحه حسب الحاجة.
    كيفية عرض كود HTML في كروم

بنقرات قليلة ، يمكنك بسهولة عرض رمز HTML لأي صفحة ويب في Chrome على جهاز Mac. يمكن أن يكون هذا مفيدًا عندما تحاول استكشاف مشكلات تطوير الويب وإصلاحها أو ترغب في إلقاء نظرة فاحصة على كيفية إنشاء موقع ويب معين.

كيفية عرض كود HTML لصفحة الويب في Chrome على تطبيق iPhone

إذا كنت تستخدم جهاز iPhone ، فيمكنك عرض كود HTML لأي صفحة في Chrome بطريقتين:

التغيير والتبديل في عنوان URL

يمكنك بسهولة عرض كود HTML لأي صفحة عن طريق إجراء تعديل بسيط على عنوان URL:

  1. افتح Chrome وانتقل إلى صفحة الويب التي تريد عرض رمز HTML الخاص بها.
    كيفية عرض كود HTML في كروم
  2. انقر مرة واحدة في شريط العناوين لبدء وضع التحرير.
    كيفية عرض كود HTML في كروم
  3. حرك المؤشر إلى مقدمة عنوان URL.
    كيفية عرض كود HTML في كروم
  4. اكتب "مصدر العرض" ثم اضغط على زر "انتقال". سيتم عرض رمز HTML لصفحة الويب في Chrome.
    كيفية عرض كود HTML في كروم

باستخدام أدوات المطور

تتوفر أيضًا أدوات مطوري Chrome على نظام التشغيل iOS ، ولكن يلزم مجموعة مختلفة من الخطوات لتشغيلها مقارنة بأجهزة الكمبيوتر.

  1. اضغط على النقاط الثلاث في الزاوية العلوية اليمنى من الشاشة وحدد "الإعدادات".
  2. مرر لأسفل وانقر على "خيارات متقدمة" ، ثم قم بتمكين مفتاح التبديل بجوار "أدوات المطور".
  3. انقر مع الاستمرار فوق منطقة فارغة من الصفحة ، ثم حدد "فحص العنصر". سيؤدي هذا إلى فتح لوحة جانبية بها كود HTML لتلك الصفحة.

كيفية عرض كود HTML لصفحة ويب في Chrome على تطبيق Android

عند استخدام تطبيق Chrome على هاتف Android ، قد ترغب في عرض رمز HTML لصفحة ويب. يمكن أن يكون هذا مفيدًا إذا كنت تحاول استكشاف مشكلة في الصفحة وإصلاحها أو تريد معرفة كيفية تنظيم الصفحة. لعرض رمز HTML لصفحة ويب في Chrome على هاتف Android ، اتبع الخطوات التالية:

  1. افتح Chrome على جهاز Android.
    كيفية عرض كود HTML في كروم
  2. اكتب “view-source:” متبوعًا بعنوان URL للصفحة التي تريدها حيث تريد عرض شفرة المصدر. على سبيل المثال ، إذا أردت عرض شفرة المصدر لموقع www.google.com ، فاكتب "view-source: www.google.com" في شريط عناوين Chrome.
    كيفية عرض كود HTML في كروم

سيؤدي هذا إلى فتح رمز HTML لتلك الصفحة في واجهة أدوات المطور المضمنة في Chrome. من هناك ، يمكنك عرض وتحرير الكود حسب الرغبة. ضع في اعتبارك أن هذه الطريقة لن تعمل إلا إذا كان موقع الويب الذي تحاول عرضه يسمح بالوصول إلى كود المصدر الخاص به. إذا لم يحدث ذلك ، فلن تتمكن من رؤية أي شيء بخلاف رسالة الخطأ.

كيفية عرض كود HTML لصفحة ويب في Chrome على جهاز iPad

يُسهل Chrome على تطبيق iPad عرض كود HTML لأي صفحة ويب. ما عليك سوى اتباع هذه الخطوات:

  1. افتح Chrome واكتب "view-source:" متبوعًا بعنوان URL للصفحة التي تريد عرضها. على سبيل المثال ، إذا كنت ترغب في عرض شفرة المصدر لموقع www.alphr.com ، فأنت بحاجة إلى كتابة "view-source: www.alphr.com" في شريط عنوان Chrome.
    كيفية عرض كود HTML في كروم
  2. اضغط على زر "Go".
    كيفية عرض كود HTML في كروم

يجب أن يؤدي هذا إلى تحميل شفرة مصدر الصفحة في علامة تبويب جديدة داخل Chrome. من هناك ، يمكنك حفظ الرمز أو مشاركته حسب الحاجة.

كود المصدر هو الغراء الذي يحمل الصفحات معًا

HTML هو أساس أي موقع. يوفر الهيكل والمحتوى الذي يراه الزوار عند تحميل صفحة في متصفحهم.

بينما يمكن تحديد المظهر النهائي للصفحة بواسطة CSS أو لغات التصميم الأخرى ، تحدد شفرة HTML البنية الأساسية للصفحة ومحتواها. من المحتمل أن تؤدي بعض التغييرات إلى كسر الصفحة. لهذا السبب ، من المهم أن يكون لديك فهم جيد لـ HTML عند عرض أو إجراء تغييرات على التعليمات البرمجية المصدر.

ضع في اعتبارك أيضًا أنه أثناء عرض كود HTML يمكن أن يكون مفيدًا في بعض الحالات ، لن تنعكس التغييرات التي تم إجراؤها على الكود على صفحة الويب الحية. ستكون التغييرات التي نشرها مسؤول الموقع فقط مرئية للزوار.

هل حاولت عرض كود HTML لأي صفحة ويب باستخدام أي من الطرق التي تمت مناقشتها في هذا البرنامج التعليمي؟ كيف سار الأمر؟

دعنا نعلم فى قسم التعليقات.

Sign up and earn $1000 a day ⋙

Leave a Comment

كيفية استخدام Whiteboard في Google Meet

كيفية استخدام Whiteboard في Google Meet

من الصعب تخيل اجتماع مناسب للشركة بدون ألواح الكتابة. والاجتماعات عبر الإنترنت ليست استثناء. تساعد هذه اللوحات على إجراء جلسات العصف الذهني بسهولة من خلال العمل كأداة تصور قوية. هنا دليل شامل حول كيفية استخدام Whiteboard في Google Meet.

رمز الخطأ: 0x80070035 - لم يتم العثور على مسار الشبكة {محلول}

رمز الخطأ: 0x80070035 - لم يتم العثور على مسار الشبكة {محلول}

رمز الخطأ: 0x80070035 ولم يتم العثور على مسار الشبكة يحدثان لأسباب عديدة. يحتوي هذا الدليل على العديد من الطرق لإصلاح خطأ 0x80070035 في نظام التشغيل Windows 10.

IDP.Generic - كيفية إصلاح IDP.Generic Virus Warning

IDP.Generic - كيفية إصلاح IDP.Generic Virus Warning

يتلقى معظم مستخدمي Windows إشعارًا باكتشاف فيروس idp.generic. في هذا المقال ، ستجد معلومات وإجابات شاملة حول هذا الخطأ وكيفية التعامل معه.

خدمات مجال Active Directory غير متوفرة حاليًا {محلول}

خدمات مجال Active Directory غير متوفرة حاليًا {محلول}

خدمات مجال الدليل النشط غير متوفرة حاليًا والتي تحدث غالبًا في Windows 10 و 8.1 وحتى 7. وبالتالي ، يمكننا إصلاح هذا الخطأ بسهولة.

كيفية إصلاح خطأ شاشة اللون الأسود أو غير المتكافئ على Nox App Player

كيفية إصلاح خطأ شاشة اللون الأسود أو غير المتكافئ على Nox App Player

يعد Nox App Player أحد أكثر محاكيات نظام تشغيل Android استخدامًا على الكمبيوتر, ويواجه مستخدموه غالبًا مشكلات شاشة سوداء أو لون غير متكافئ.

الاستعداد لنظام Windows ، لا تقم بإيقاف تشغيل جهاز الكمبيوتر الخاص بك

الاستعداد لنظام Windows ، لا تقم بإيقاف تشغيل جهاز الكمبيوتر الخاص بك

إذا توقف جهاز الكمبيوتر الخاص بك عن "إعداد Windows ، فلا تقم بإيقاف تشغيل الكمبيوتر". سنوضح لك كيفية إصلاحه على أجهزة الكمبيوتر التي تعمل بنظام Windows 10 باستخدام حلول متقدمة.

تعطيل Avast Antivirus كليًا أو مؤقتًا {دليل}

تعطيل Avast Antivirus كليًا أو مؤقتًا {دليل}

يكتشف العديد من المستخدمين كيفية تعطيل Avast Antivirus لأسباب متعددة. تعرف على الطريقة الصحيحة لتعطيل Avast مع خطوات واضحة وسهلة الاستخدام.

لم تكتمل العملية بنجاح لأن الملف يحتوي على فيروس

لم تكتمل العملية بنجاح لأن الملف يحتوي على فيروس

تعرف على كيفية حل مشكلة "لم تكتمل العملية بنجاح لأن الملف يحتوي على فيروس". اتبع الخطوات الفعالة الآن!

إطلاق هاتف ذكي بسعة بطارية ضخمة 9000 مللي أمبير

إطلاق هاتف ذكي بسعة بطارية ضخمة 9000 مللي أمبير

أطلقت الشركة المصنعة الصينية MACOOX للتو هاتفًا ذكيًا منخفض التكلفة بسعة بطارية تصل إلى 9000 مللي أمبير في الساعة. يُعتبر هذا الهاتف مثاليًا للمستخدمين الذين يحتاجون إلى بطارية طويلة الأمد.

Rainmeter - تنزيل البرامج وشاشات Skin for PC

Rainmeter - تنزيل البرامج وشاشات Skin for PC

برنامج Rainmeter هو أداة تجميل كمبيوتر Windows. تعرف على كيفية استخدام Rainmeter وتنزيل أجمل Rainmeter Skin!

هل بوابة BaldurS Gate 3 عبارة عن منصة متقاطعة؟ ليس بعد

هل بوابة BaldurS Gate 3 عبارة عن منصة متقاطعة؟ ليس بعد

بعد الكثير من الضجيج والترقب، تم إطلاق فيلم "بوابة بلدور 3". ولكن، قبل التعمق في اللعبة، سيرغب العديد من اللاعبين في معرفة ما إذا كان الأمر كذلك أم لا

كيفية إصلاح خطأ عدم اكتشاف DS4Windows لوحدة التحكم

كيفية إصلاح خطأ عدم اكتشاف DS4Windows لوحدة التحكم

هل تواجه مشاكل في توصيل وحدة التحكم الخاصة بك؟ أنت جاهز للعب، ولكن دون استخدام وحدة التحكم الخاصة بك، ستنتهي اللعبة. أنت لست اللاعب الوحيد

كيفية إعادة ضبط المهارات في ديابلو 4

كيفية إعادة ضبط المهارات في ديابلو 4

هل كنت تبحث عن طريقة لتعديل بنية اللاعب الخاص بك دون إعادة إنشاء شخصية جديدة في "Diablo 4"؟ حسنًا، أنت محظوظ. اللعبة تسمح لك

كيفية ضبط السطوع على جهاز كمبيوتر يعمل بنظام Windows 10

كيفية ضبط السطوع على جهاز كمبيوتر يعمل بنظام Windows 10

يعد إعداد سطوع الشاشة ميزة مهمة، بغض النظر عن الجهاز الذي تستخدمه. ولكن من المهم بشكل خاص الحصول على مستوى السطوع

كيفية الحصول على ياما في بلوكس فروت

كيفية الحصول على ياما في بلوكس فروت

Yama هي واحدة من Katanas الملعونة في اللعبة وتحمل الحالة الأسطورية. سيقدم لك استخدام مثل هذا السلاح القوي في عالم "Blox Fruits" المفتوح

Sign up and Earn ⋙