رئيسي كروم كيفية عرض مصدر 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 — ثم اكتب أنظر المصدر ، ثم اضغط يدخل أو حدد يذهب .

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

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

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

أفضل قوالب تعقب العادة على الفكرة في عام 2023
أفضل قوالب تعقب العادة على الفكرة في عام 2023
قد يكون من الصعب الحفاظ على عاداتك. يرغب معظم الناس في تتبع عاداتهم ، لكن هذا لا يعني أنهم يتبعونها بالفعل. يعد تطوير الإجراءات الروتينية ومتابعتها أمرًا شاقًا إذا لم يكن لديك الأدوات المناسبة.
كيفية حذف مقطع فيديو في ماركو بولو
كيفية حذف مقطع فيديو في ماركو بولو
https://www.youtube.com/watch؟v=CayUvVxqIvk ماركو بولو هو أساسًا يلتقي Skype بالدردشة. بمعنى آخر ، أنت ترسل رسائل إلى أصدقائك في شكل فيديو ، ويردون بالمثل. ولكن كما هو الحال مع أي محادثة ، أحيانًا ترسل ملف
كيفية الطباعة بدون تعليقات في Microsoft Word
كيفية الطباعة بدون تعليقات في Microsoft Word
من المؤكد أن القدرة على ترك تعليقات في مستند Microsoft Word مفيدة. ومع ذلك ، قد يكون وجود التعليقات مزعجًا عندما يحين وقت طباعة المستند. لحسن الحظ ، هناك طريقة للتخلص منها من قبل
كيفية نقل Dock الخاص بك إلى شاشة أخرى على Mac
كيفية نقل Dock الخاص بك إلى شاشة أخرى على Mac
يعد Dock أحد الميزات الأساسية لنظام التشغيل Mac OS X من Apple. إنه يجعل استخدام جهاز Mac أسهل كثيرًا وأبسط. شهدت أحدث إصدارات نظام التشغيل تغييرات في Dock's
كيفية إعادة ضبط المصنع لجهاز Samsung Galaxy J7 Pro
كيفية إعادة ضبط المصنع لجهاز Samsung Galaxy J7 Pro
تعد إعادة ضبط المصنع مفيدة جدًا إذا لم تعد تستخدم هاتفك الذكي القديم وترغب في التخلي عنه أو بيعه. تؤدي إعادة الضبط إلى مسح جهازك من جميع المعلومات والصور والبيانات. كاسم
كيفية إصلاح برنامج تشغيل Nvidia غير متوافق مع هذا الإصدار من Windows
كيفية إصلاح برنامج تشغيل Nvidia غير متوافق مع هذا الإصدار من Windows
تُعرف بطاقات رسومات Nvidia بأنها معدات ألعاب رائدة على مستوى الصناعة. بدون بطاقة رسومات ، تصبح الألعاب مستحيلة. هذا هو السبب في أن برنامج تشغيل الرسومات NVIDIA غير متوافق مع هذا الإصدار من رسائل Windows يمكن أن يسبب الإحباط وحتى
كيفية تغيير وجه الساعة على Garmin
كيفية تغيير وجه الساعة على Garmin
تمتلك Garmin بعضًا من أفضل ساعات اللياقة البدنية المتاحة اليوم ، ومعظمها يحتوي على عدد كبير من الميزات الفريدة. لا تمنحك شاشة ساعة Garmin الوقت فحسب - فهي تتعقب خطواتك وتراقب معدل ضربات قلبك ،