كيفية عرض شفرة المصدر لصفحة ويب في كل متصفح

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

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

حتى أن بعضها يوفر وظائف وبنية متقدمة ، مما يجعل من السهل الاطلاع على HTML وبرمجية البرمجة الأخرى على الصفحة.

لماذا تريد أن ترى رمز المصدر؟

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

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

فيما يلي تعليمات حول كيفية عرض شفرة المصدر في المتصفح الذي تختاره.

جوجل كروم

يعمل على: نظام التشغيل Chrome و Linux و MacOS و Windows

يقدم إصدار سطح المكتب من Chrome ثلاث طرق مختلفة لعرض شفرة المصدر للصفحة ، وهي الأولى والأكثر أبسط باستخدام اختصار لوحة المفاتيح التالي: CTRL + U ( سطر + OPTION + U على نظام MacOS).

عند الضغط عليه ، يفتح هذا الاختصار علامة تبويب متصفح جديدة تعرض HTML ورمزًا آخر للصفحة النشطة. هذا المصدر مشفّر بالألوان ويتم تنظيمه بطريقة تجعل من الأسهل التقسيم والعثور على ما تبحث عنه. يمكنك أيضًا الوصول إلى هناك عن طريق إدخال النص التالي في شريط عناوين Chrome ، المضاف إلى الجانب الأيسر من عنوان URL لصفحة الويب ، والضغط على مفتاح Enter : مصدر العرض: (على سبيل المثال ، مصدر المشاهدة: https: // www .).

والطريقة الثالثة هي عبر أدوات مطوّري البرامج في Chrome ، والتي تسمح لك بتعمق أكبر في شفرة الصفحة بالإضافة إلى تعديلها بشكل سريع لأغراض الاختبار والتطوير. يمكن فتح وإغلاق واجهة أدوات مطوري البرامج باستخدام اختصار لوحة المفاتيح: CTRL + SHIFT + I ( سطر + OPTION + I على نظام MacOS). يمكنك أيضًا إطلاقها عن طريق اتخاذ المسار التالي.

  1. انقر على زر القائمة الرئيسية في Chrome ، الموجود في الركن العلوي الأيسر وممثل بثلاثة نقاط محاذية رأسياً.
  2. عندما تظهر القائمة المنسدلة ، حرك مؤشر الماوس فوق خيار المزيد من الأدوات .
  3. عندما تظهر القائمة الفرعية ، انقر فوق أدوات المطور .

ذكري المظهر
يعد عرض مصدر صفحة الويب في Chrome لنظام Android أمرًا بسيطًا مثل إلحاق النص التالي في مقدمة عنوانه (أو عنوان URL) وإرساله: مصدر المشاهدة:. مثال على ذلك سيكون مصدر العرض: https: // www. . سيتم عرض HTML والكود الآخر من الصفحة المعنية فورًا في النافذة النشطة.

دائرة الرقابة الداخلية
على الرغم من عدم وجود طرق محلية لعرض شفرة المصدر باستخدام Chrome على جهاز iPad أو iPhone أو iPod touch ، إلا أن الطريقة الأسهل والأكثر فاعلية هي استخدام حل تابع لجهة خارجية مثل تطبيق View Source.

متاحًا مقابل 0.99 دولارًا في App Store ، يطالبك عرض المصدر بإدخال عنوان URL الخاص بالصفحة (أو نسخه / لصقه من شريط العناوين في Chrome ، والذي يعد أحيانًا أبسط مسار يمكنك تنفيذه) وهذا كل شيء. بالإضافة إلى عرض HTML وشفرة المصدر الأخرى ، يحتوي التطبيق أيضًا على علامات تبويب تعرض أصول فردية للصفحة ، ونموذج كائن المستند (DOM) ، بالإضافة إلى حجم الصفحة وملفات تعريف الارتباط والتفاصيل الأخرى المثيرة للاهتمام.

مايكروسوفت ايدج

يعمل على: ويندوز

يتيح لك متصفح Edge عرض وتحليل شفرة المصدر للصفحة الحالية من خلال واجهة أدوات مطوري البرامج الخاصة بها وتحليلها وحتى استخدامها. للوصول إلى مجموعة الأدوات المفيدة هذه ، يمكنك استخدام أحد اختصارات لوحة المفاتيح التالية: F12 أو CTRL + U. إذا كنت تفضل الماوس بدلاً من ذلك ، فانقر على زر قائمة Edge (ثلاث نقاط موجودة في الزاوية العلوية اليمنى) واختر خيار أدوات F12 Developer من القائمة.

بعد تشغيل أدوات التطوير لأول مرة ، يضيف Edge خيارين إضافيين لقائمة السياق الخاصة بالمتصفح (يمكن الوصول إليها بالنقر بزر الماوس الأيمن في أي مكان داخل صفحة الويب): فحص العنصر وعرض المصدر ، هذا الأخير الذي يفتح جزء Debugger من dev واجهة الأدوات مملوءة بكود المصدر.

موزيلا فايرفوكس

يعمل على: Linux، macOS، Windows

لعرض شفرة مصدر الصفحة في إصدار سطح المكتب من Firefox ، يمكنك الضغط على CTRL + U ( COMMAND + U على macOS) على لوحة المفاتيح الخاصة بك ، والتي ستفتح علامة تبويب جديدة تحتوي على HTML وكود آخر لصفحة الويب النشطة.

يؤدي كتابة النص التالي إلى شريط عناوين Firefox ، مباشرة إلى يسار عنوان URL الخاص بالصفحة ، إلى ظهور نفس المصدر في علامة التبويب الحالية بدلاً من ذلك: view-source: (على سبيل المثال ، مصدر المشاهدة: https: // www.) .

هناك طريقة أخرى للوصول إلى شفرة مصدر الصفحة وهي من خلال أدوات مطوري Firefox ، ويمكن الوصول إليها عن طريق اتخاذ الخطوات التالية.

  1. انقر على زر القائمة الرئيسية ، الموجود في الزاوية العلوية اليمنى من نافذة المتصفح وتمثله بثلاثة خطوط أفقية.
  2. عندما تظهر قائمة النافذة المنبثقة ، انقر على رمز "مفتاح الربط" للمطوِّر .
  3. يجب أن تكون قائمة سياقات Web Developer مرئية الآن. حدد خيار مصدر الصفحة .

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

ذكري المظهر
عرض شفرة المصدر في إصدار Android من Firefox يمكن تحقيقه عن طريق إدخال عنوان URL لصفحة الويب مع النص التالي: view-source:. على سبيل المثال ، لعرض مصدر HTML لإرسال النص التالي في شريط عناوين المتصفح: view-source: https: // www. .

دائرة الرقابة الداخلية
تتمثل الطريقة التي نوصي بها لعرض شفرة مصدر صفحات الويب على جهاز iPad أو iPhone أو iPod touch من خلال تطبيق View Source المتوفر في App Store مقابل 0.99 دولارًا. بينما لا تتكامل مباشرة مع فايرفوكس ، يمكنك بسهولة نسخ ولصق عنوان URL من المتصفح إلى التطبيق من أجل الكشف عن HTML ورمز آخر مرتبط بالصفحة المعنية.

أبل سفاري

يعمل على نظام iOS و MacOS

دائرة الرقابة الداخلية
على الرغم من أن Safari لنظام التشغيل iOS لا يتضمن القدرة على عرض مصدر الصفحة بشكل افتراضي ، إلا أن المتصفح لا يتكامل بشكل سلس مع تطبيق View Source - متوفر في App Store مقابل 0.99 دولار.

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

يجب الآن عرض تمثيل منظم ومرمز للشفرة المصدر للصفحة النشطة ، بالإضافة إلى علامات تبويب أخرى تسمح لك بعرض أصول الصفحة والبرامج النصية والمزيد.

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

  1. انقر على Safari في قائمة المتصفح ، الموجودة أعلى الشاشة.
  2. عندما تظهر القائمة المنسدلة ، حدد خيار التفضيلات .
  3. يجب أن تكون تفضيلات Safari مرئية الآن. انقر على الرمز متقدم ، الموجود على أقصى الجانب الأيسر من الصف العلوي.
  4. باتجاه الجزء السفلي من القسم متقدم ، يوجد خيار يسمى قائمة إظهار التطوير في شريط القوائم ، مصحوبًا بمربع اختيار فارغ. انقر فوق هذا المربع مرة واحدة لوضع علامة اختيار فيه ، وأغلق نافذة التفضيلات عن طريق النقر على علامة "×" الحمراء الموجودة في أعلى الزاوية اليسرى.
  5. انقر فوق القائمة تطوير ، الموجودة في الجزء العلوي من الشاشة.
  6. عندما تظهر القائمة المنسدلة ، حدد إظهار مصدر الصفحة . يمكنك أيضًا استخدام اختصار لوحة المفاتيح التالي بدلاً من ذلك: COMMAND + OPTION + U.

دار الأوبرا

يعمل على: Linux، macOS، Windows

لعرض شفرة المصدر من صفحة الويب النشطة في متصفح Opera ، استخدم اختصار لوحة المفاتيح التالي: CTRL + U ( سطر + OPTION + U على نظام MacOS). إذا كنت تفضل تحميل المصدر في علامة التبويب الحالية بدلاً من ذلك ، فاكتب النص التالي على يمين عنوان URL الخاص بالصفحة داخل شريط العناوين واضغط على Enter : view-source: (على سبيل المثال ، مصدر المشاهدة: https: // www. ).

يسمح لك إصدار سطح المكتب من Opera أيضًا بعرض مصدر HTML و CSS وعناصر أخرى باستخدام أدوات المطور المتكاملة الخاصة به. لتشغيل هذه الواجهة ، والتي ستظهر بشكل افتراضي على الجانب الأيسر من نافذة المتصفح الرئيسية ، اضغط على اختصار لوحة المفاتيح التالي: CTRL + SHIFT + I ( COMMAND + OPTION + I على macOS).

يمكن أيضًا الوصول إلى مجموعة أدوات التطوير الخاصة بأوبرا عن طريق اتخاذ الخطوات التالية.

  1. انقر على شعار Opera ، الموجود في الزاوية العلوية اليسرى من نافذة المتصفح.
  2. عندما تظهر القائمة المنسدلة ، حرك مؤشر الماوس فوق خيار المزيد من الأدوات .
  3. انقر فوق إظهار قائمة المطور .
  4. انقر على شعار الأوبرا مرة أخرى.
  5. عندما تظهر القائمة المنسدلة ، حرك المؤشر فوق المطور .
  6. عندما تظهر القائمة الفرعية ، انقر فوق أدوات المطور .

فيفالدي

هناك طرق متعددة لعرض مصدر الصفحة داخل متصفح Vivaldi. أبسط هو عبر اختصار لوحة المفاتيح CTRL + U ، الذي يقدم رمز من الصفحة النشطة في علامة تبويب جديدة.

يمكنك أيضًا إضافة النص التالي إلى مقدمة عنوان URL للصفحة ، والذي يعرض شفرة المصدر في علامة التبويب الحالية: view-source:. مثال على ذلك سيكون مصدر العرض: http: // www. .

طريقة أخرى هي من خلال أدوات المطور المتكاملة للمتصفح ، والتي يمكن الوصول إليها عن طريق الضغط على تركيبة CTRL + SHIFT + I أو من خلال خيار أدوات المطور في قائمة أدوات المستعرض - الموجودة بالنقر فوق شعار 'V' في الزاوية العلوية اليسرى. يتيح استخدام أدوات التطوير لتحليل أكثر تعمقًا لمصدر الصفحة.