رئيسي كروم كيفية عرض مصدر HTML في جوجل كروم

كيفية عرض مصدر HTML في جوجل كروم



ماذا تعرف

  • انقر بزر الماوس الأيمن على صفحة الويب واختر اظهر مصدر الصفحة .
  • الاختصار: اضغط كنترول + في (جهاز كمبيوتر يعمل بنظام Windows) أو يأمر + خيار + في (ماك).
  • لاستخدام أدوات مطور Chrome، حدد قائمة طعام (ثلاث نقاط) > أدوات أكثر > ادوات المطورين .

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

عرض كود المصدر في كروم

إذًا كيف يمكنك عرض الكود المصدري لموقع الويب؟ فيما يلي الإرشادات خطوة بخطوة للقيام بذلك باستخدام متصفح Google Chrome.

  1. افتح ال متصفح الويب جوجل كروم (إذا لم يكن لديك تم تثبيت جوجل كروم ، هذا تحميل مجاني).

  2. انتقل إلى صفحة الويب التي ترغب في فحصها .

  3. انقر على اليمين الصفحة وإلقاء نظرة على القائمة التي تظهر. من تلك القائمة، انقر فوق اظهر مصدر الصفحة .

    عرض مصدر الصفحة في القائمة السياقية لمتصفح الويب Chrome
  4. سيظهر الآن كود المصدر لتلك الصفحة كعلامة تبويب جديدة في المتصفح.

  5. وبدلاً من ذلك، يمكنك أيضًا استخدام اختصارات لوحة المفاتيح الخاصة بـ كنترول + في على جهاز كمبيوتر لفتح نافذة تعرض كود المصدر الخاص بالموقع. على جهاز Mac، هذا الاختصار هو يأمر + خيار + في .

هيلاري أليسون / لايف واير

كيفية استخدام شاشتين مع الكمبيوتر المحمول

استخدم أدوات مطوري Chrome

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

لاستخدام أدوات مطوري Chrome:

  1. يفتح جوجل كروم .

  2. انتقل إلى صفحة الويب التي ترغب في فحصها .

  3. حدد قائمة ثلاثية النقاط في الزاوية العلوية اليمنى من نافذة المتصفح.

  4. من القائمة، مرر مؤشر الماوس فوق أدوات أكثر ومن ثم اختر ادوات المطورين في القائمة التي تظهر.

    عنصر قائمة أدوات المطور في Google Chrome
  5. سيتم فتح نافذة تعرض كود مصدر HTML على يسار الجزء وCSS ذي الصلة على اليمين.

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

    لا يمكن لـ windows 10 الوصول إلى مشاركة الشبكة
كيفية فحص عنصر على جهاز ماك

هل عرض كود المصدر قانوني؟

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

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

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

أكثر من مجرد HTML

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

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

التعليمات
  • كيف أقوم بتحرير تعليمات HTML البرمجية في Chrome؟

    افتح أدوات المطور في Chrome بالضغط على كنترول (أو يأمر على ماك) + التحول + أنا . ومن هناك اضغط كنترول ( يأمر على ماك) + يا وحدد الملف المصدر المحفوظ الذي تريد تحريره لفتحه.

  • كيف يمكنني عرض كود مصدر الصفحة في Chrome إذا تم تعطيل عرض المصدر؟

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

  • كيف يمكنني عرض الكود المصدري لموقع ما في Chrome باستخدام جهاز Android الخاص بي؟

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

    كيفية حظر الملكية الفكرية على الفتنة

مقالات مثيرة للاهتمام

اختيار المحرر

أفضل 11 لاعبًا في لعبة FIFA 16 Ultimate Team
أفضل 11 لاعبًا في لعبة FIFA 16 Ultimate Team
لعبة FIFA 16 Ultimate Team تسبب الإدمان بشكل رهيب. جزء واحد من مجموعة FIFA إلى مجموعة ملصقات أخرى ، فإن رعاية فريقك تدريجيًا من خلال المسروقات المكتسبة من خلال الفوز بالمباريات هي صيغة أكثر سخافة بشكل يبعث على السخرية. بالتأكيد ، ستبدأ بـ لا شيء تقريبًا ، ولكن
كل ما تحتاج لمعرفته حول ورشة عمل Steam
كل ما تحتاج لمعرفته حول ورشة عمل Steam
يعد Steam Workshop مستودعًا للتعديلات والعناصر الأخرى داخل اللعبة التي يمكنك تنزيلها وتثبيتها لألعاب Steam بنقرة زر واحدة.
كيفية عمل صورة GIF متحركة لخلفية Windows
كيفية عمل صورة GIF متحركة لخلفية Windows
إذا كنت تقرأ هذا ، فربما تكون قد رأيت بالفعل التأثير الذي يمكن أن تحدثه خلفية الشاشة المتحركة وقررت أنك تريد واحدة لشاشتك. هناك بعض الأناقة في ورق الحائط الثابت الذي تم اختياره جيدًا وعالي الدقة ،
كيفية منع جهاز MacBook من النوم عندما يكون الغطاء مغلقًا
كيفية منع جهاز MacBook من النوم عندما يكون الغطاء مغلقًا
امنع جهاز MacBook الخاص بك من النوم عندما يكون الغطاء مغلقًا إذا قمت بضبط إعدادات الطاقة، وقم بتوصيل جهاز MacBook وتوصيله بشاشة خارجية.
DTS مقابل Dolby Digital: ما الفرق؟
DTS مقابل Dolby Digital: ما الفرق؟
إن القول بأن Dolby Digital هو نفسه DTS سيكون بمثابة قول إن Star Wars و Star Trek هما نفس الشيء. سيثير هذا البيان غضب عشاق كلا العرضين ، وينطبق الشيء نفسه على عشاق الموسيقى الذين يدافعون عن أي منهما
كيفية عمل أمر echo بدون سطر جديد في Windows
كيفية عمل أمر echo بدون سطر جديد في Windows
يصف كيفية التخلص من حرف السطر الجديد في أمر echo في موجه أوامر Windows
يحصل تطبيق Remote Desktop Store على تحديث ضخم
يحصل تطبيق Remote Desktop Store على تحديث ضخم
بالإضافة إلى تطبيق Remote Desktop الكلاسيكي (mstsc.exe) ، يشتمل Windows 10 على تطبيق حديث يسمى ببساطة 'Microsoft Remote App'. إنه تطبيق UWP يتلقى تحديثات من متجر Microsoft .. أصدرت Microsoft إصدارًا جديدًا من التطبيق إلى Insiders مع الكثير من الميزات والتحسينات الجديدة ، بما في ذلك دعم الوضع الفاتح والظلام ،