عرض شفرة مصدر صفحة الويب HTML ، CSS ، JavaScript في Google Chrome

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

عرض شفرة مصدر صفحة الويب HTML ، CSS ، JavaScript في Google Chrome

سوف نغطي المواضيع التالية في هذه المقالة:
  1. مكونات مختلفة لصفحة ويب
  2. عرض شفرة المصدر HTML ، مضمنة و CSS الداخلية
  3. عرض أوراق الأنماط الخارجية على صفحة الويب
  4. اختصار Chrome لعرض مصدر الصفحة
  5. باستخدام أدوات المطور
  6. الحصول على CSS للمحمول
  7.  عرض الطباعة الجميلة من CSS مصغر وجافا سكريبت
  8. تحرير صفحة الويب على الإنترنت
دعنا نناقش كل موضوع بالتفصيل في الأقسام التالية.

1. مكونات صفحة الويب

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

2. عرض أنماط HTML و Inline و CSS الداخلية

لعرض محتوى HTML والأنماط المضمّنة والداخلية لصفحة ويب ، افتح صفحة الويب في متصفح Chrome . انقر بزر الماوس الأيمن فوق أي مكان على الصفحة وحدد خيار "View Page Source" كما هو موضح في الصورة أدناه:
عرض شفرة مصدر صفحة الويب HTML ، CSS ، JavaScript في Google Chrome


سيتم عرض خيار "View Frame Source" عند النقر بزر الماوس الأيمن داخل إطار iframe.

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


3. عرض أوراق الأنماط الخارجية

الطريقة الأكثر شيوعًا والموصى بها لاستخدام CSS هي ربط أوراق الأنماط الخارجية بمحتوى HTML. لمعرفة أوراق الأنماط الخارجية المستخدمة في صفحة ويب ، ابحث عن علامات "link" في الكود المصدر. انقر على الروابط التي تنتهي بـ ".css" لرؤية جميع عناصر النمط المحددة في ورقة الأنماط.
ارتباطات صفحات الأنماط في مصدر الصفحة
ارتباطات صفحات الأنماط في مصدر الصفحة


يمكن أن يستخدم موقع الويب أوراق أنماط خارجية بتنسيق مختلف. في معظم الأحيان تنتهي ملفات CSS برقم الإصدار أو نص إضافي مثل ".css؟ Ver1.3". في بعض الأحيان ، يمكن أيضًا استخدام الإصدار المصغر لملف CSS الذي ينتهي بـ ".min.css" لتحميل الصفحة بسرعة.
على الرغم من أن الروابط تظهر كنسبية في الكود المصدري ، فإن النقر عليها سيفتح ورقة أنماط المصدر بعنوان URL المطلق (عنوان URL كاملاً مع اسم المجال).
4. اختصار Chrome لعرض شفرة مصدر الصفحة
يمكنك عرض شفرة مصدر أي صفحة مباشرةً من شريط عنوان متصفح Chrome بإضافة البادئة "view-source:" إلى أي عنوان URL للصفحة. وبهذه الطريقة ، يمكنك أيضًا عرض الكود المصدري للصفحات المحمية بالنقر بزر الماوس الأيمن أيضًا.

سيتم إعادة توجيه عنوان URL الذي تم إدخاله تلقائيًا لجلب المحتوى ، إذا كانت الصفحة تحتوي على 301 إعادة توجيه مناسبة على سبيل المثال ، يمكن إعادة توجيه إدخال "view-source: yoursite.com" تلقائيًا إلى "view-source: https: //www.yoursite.com".

5. عرض شفرة المصدر مع أدوات المطور

ستوفر الطريقة الموضحة أعلاه شفرة مصدر HTML / CSS دون الارتباط بعنصر فردي موجود على صفحة الويب. إنها مهمة صعبة لمعرفة الأنماط المستخدمة لأي عنصر معين باستخدام طريقة عرض شفرة CSS المصدر.
على غرار المستعرضات الأخرى ، يقدم Google Chrome وحدة تحكم مطور من أجل الوصول إلى رمز CSS المرتبط بأي عنصر معين في صفحة ويب. انقر بزر الماوس الأيمن على أي عنصر في صفحة ويب واختر خيار "Inspect element " أو " Inspect" لفتح وحدة تحكم مطور البرامج أسفل صفحة الويب كما هو موضح في الصورة أدناه. يمكنك أيضًا فتح وحدة تحكم مطوّر البرامج من مسار القائمة "Settings > More tools > Developer tools".
عرض شفرة مصدر صفحة الويب HTML ، CSS ، JavaScript في Google Chrome
أدوات المطور في جوجل كروم لعرض مصدر الصفحة
  1. انقر بزر الماوس الأيمن على عنصر واختر خيار "Inspect" .
  2. عرض أنماط HTML والمضمنة ضمن علامة التبويب "Elements" .
  3. عرض الأنماط الخارجية تحت قسم "Styles" .
  4. انقر على أيقونة "mobile" لعرض الموقع على أجهزة المحمول والتحقق من مصدر HTML / CSS المطابق لمحتوى الجوال.

تنقسم وحدة التحكم إلى قسمين مع وجود علامات تبويب متنوعة متوفرة في كل قسم. يعرض الجزء الأيسر محتوى HTML للصفحة ضمنعلامة التبويب "Elements" والجزء الأيمن يعرض CSS ضمن علامة التبويب "Styles" . سيؤدي النقر فوق أي ارتباطات CSS إلى فتح ورقة الأنماط في الجزء الأيمن ضمن علامة التبويب "Sources" .
لعرض رمز CSS لأي عنصر معين ، اختر "Arrow Box" في الزاوية اليسرى العليا (ابحث عن العدسة في أسفل نظام Windows) لوحدة التحكم وانقر فوق أي عنصر سيتم تسليط الضوء عليه في مؤشر الماوس. سيؤدي هذا تلقائيًا إلى إظهار رمز CSS المرتبط بالعنصر الذي تم اختياره.

6. مشاهدة موبايل CSS

نظرًا لأن أنماط عنصر على سطح المكتب والأجهزة المحمولة قد تختلف ، توفر وحدة تحكم مطور البرامج خيارًا لتبديل الشاشة مع معظم الأجهزة الشائعة مثل iPhone و iPad و Samsung Galaxy و Google Nexus. بمجرد اختيار الجهاز المطلوب من القائمة المنسدلة ، يتم عرض رموز CSS المقابلة المتوفرة في تلك الصفحة لهذا الجهاز.
عرض شفرة مصدر صفحة الويب HTML ، CSS ، JavaScript في Google Chrome
عرض CSS للجوال في Chrome
  1. انقر على زر تبديل شريط أدوات الجهاز.
  2. اختر الجهاز من القائمة المنسدلة أو انقر فوق خيار " Edit" لإضافة جهازك الخاص غير متوفر في القائمة الافتراضية. يمكنك التحقق من بعد الجهاز للجهاز المحدد.
  3. قم بزيادة أو تقليل النسبة المئوية لضبط عرض المستعرض.
  4. انقر فوق الزر " Rotate" للتبديل بين عرضي والمظهر الطبيعي.ي
  5. تحقق من معاينة اختيارك. انقر بزر الماوس الأيمن فوق العنصر الذي ترغب في عرض مصدر المحمول وانقر فوق خيار " Inspect".
  6. تغيير العنصر لعرض المصدر. يؤدي التمرير فوق رمز HTML إلى تمييز العنصر المقابل في جزء مستعرض المعاينة.
  7. ابحث عن كود CSS المصدر للعنصر المحدد. يجب أن يبدأ CSS المحمول بقاعدة " @media ". إذا لم يكن هناك قاعدة " @media " ، فسيتم تطبيق CSS العام على الأجهزة المحمولة أيضًا.

7. عرض طباعة جميلة من CSS مصغرة وملفات JavaScript

في الوقت الحالي ، من الشائع استخدام إصدارات مصغرة من ملفات CSS و JavaScript على مواقع الويب. سيؤدي هذا إلى إزالة التعليقات غير الضرورية والمسافات وفواصل الأسطر ويجعل الملف بتنسيق .min.css أو .min.js. أيضا آلية التخزين المؤقت المستخدمة على الموقع تفعل إزالة مساحة مماثلة. على الرغم من أن كل هذه الأمور تتم لتحسين سرعة الصفحة ، إلا أن ذلك يجعل CSS والبرامج النصية غير قابلة للقراءة لأولئك الذين يبحثون عن مصدر الصفحة. يعمل Chrome على حل هذه المشكلة من خلال تقديم زر Pretty Print ". يؤدي النقر فوق الزر " Pretty Print " إلى استعادة الملفات المصغّرة إلى إصدار قابل للقراءة بحيث يمكنك الانتقال إليه بسهولة.
فيما يلي مثال عن كيفية ظهور البرنامج النصي المصغر على وحدة تحكم مطور البرامج. عرض ورقة أنماط مرتبطة أو البرنامج النصي تحتعلامة التبويب " Sources". انقر على أقواس سوار مزدوجة {}.
عرض شفرة مصدر صفحة الويب HTML ، CSS ، JavaScript في Google Chrome
تمكين خيار تنسيق الطباعة الجميلة في Chrome
سترى طريقة عرض الطباعة الجميلة للبرنامج النصي كما يلي:
عرض شفرة مصدر صفحة الويب HTML ، CSS ، JavaScript في Google Chrome
عرض طريقة عرض Pretty Print " من CSS والبرامج النصية
تمنع بعض صفحات الويب النقر بزر الماوس الأيمن لتجنب نسخ المحتوى ، وفي هذه الحالة يمكنك الوصول إلى مصدر الصفحة باستخدام خيار قائمة وحدة تحكم مطوّر البرامج في Chrome.

8. تعديل لايف ومعاينة التغييرات على الانترنت

أكبر ميزة لوحدة تحكم مطور Chrome هي تشغيلها على الصفحة المباشرة ومعاينة التغييرات مباشرة على المتصفح. يمكنك تغيير أو إضافة نمط CSS مباشرة في وحدة تحكم مطور البرامج لمعرفة التأثير على الصفحة المباشرة. على سبيل المثال ، يمكنك تغيير "font-size" للعنصر "body" ورؤية تغيير حجم الخط محاذيًا بشكل مناسب. يعد هذا خيارًا مفيدًا للغاية ويوفر الكثير من الوقت دون التأثير على تجربة المستخدم الحقيقية وإلا فقد تحتاج إلى التغيير في موقع مباشر على أساس التكرار لإيجاد النمط المناسب.
كما يعد منتقي الألوان أحد أفضل مطوري الويب. يمكنك تغيير ألوان العناصر عبر الإنترنت والمعاينة على الفور. يمكنك نسخ أكواد الألوان RGB أو HEX واستخدامها في التصميم الخاص بك كالمحترفين.
عرض شفرة مصدر صفحة الويب HTML ، CSS ، JavaScript في Google Chrome
تعديل الألوان الحية على صفحات الويب
انقر بزر الماوس الأيمن فوق عنصر HTML وقم بالتعديل مباشرة باستخدام خيار "تعديل كـ HTML" لإضافة أو حذف المحتوى عبر الإنترنت.
عرض شفرة مصدر صفحة الويب HTML ، CSS ، JavaScript في Google Chrome
تحرير HTML شفرة المصدر في كروم
تعرف على المزيد حول كيفية عرض بنية استجابة HTTP على   Chrome developer console .

الكلمات الأخيرة

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

ليست هناك تعليقات:

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *

Abstract photo created by freepik - www.freepik.com