عرض مصدر صفحة الويب CSS و HTML في Safari

Safari هو المتصفح الافتراضي في Mac الذي يستخدمه 3.7٪ فقط من مستخدمي الإنترنت. تدعي شركة Apple أنه بإمكان المستخدمين تصفح ساعتين وعرض مقاطع فيديو لمدة 4 ساعات مع Safari مقارنةً بـ Chrome أو Firefox. هناك أيضًا الكثير من الميزات الجديدة المقدمة مثل تثبيت علامة تبويب وكتم الصوت من علامة التبويب. لكن بصفتك مطورًا أو مالك موقع ويب ، فقد تحتاج إلى البحث عن الكود المصدري بشكل متكرر ، وفي هذه المقالة سنستكشف كيفية عرض مصدر صفحات الويب CSS و HTML في Safari.

تمكين قائمة المطور

افتراضيًا ، يتم تعطيل خيارات المطور في Safari ، مما يعني أنك لن ترى قائمة " Develop " ، و " Inspect Element " عند النقر بزر الماوس الأيمن وخيارات وحدة تحكم المطور بأكملها. قم بتشغيل Safari وانتقل إلى القائمة " Safari > Preferences… > Advanced Tab " وقم بتمكين الخيار " Show Menu" في قائمة " Develop ". سيؤدي ذلك إلى تمكين قائمة " Develop" وجميع الميزات الأخرى المطلوبة لعرض مصدر صفحة الويب.
عرض مصدر صفحة الويب CSS و HTML في Safari
تمكين تطوير القائمة في سفاري

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

بمجرد تمكين قائمة " Develop" ، افتح صفحة الويب التي تريد عرض المصدر. على غرار المستعرضات الأخرى ، انقر بزر الماوس الأيمن واختر الخيار "Show Page Source" أو خيار "Inspect Element ". سيؤدي هذا إلى فتح وحدة التحكم في Web Inspector في أسفل الصفحة.
عرض مصدر صفحة الويب CSS و HTML في Safari
عرض سفاري Web Inspector في نافذة منفصلة
يمكن أيضًا فتح "inspector " باستخدام الاختصارات " Option + Command + I " عند تمكين قائمة " Develop ".

استخدام Web Inspector Console في Safari

سيبدو Web Inspector  في أسفل الصفحة كما يلي أدناه وهو يحتوي على أقسام متعددة:
عرض مصدر صفحة الويب CSS و HTML في Safari
سفاري Web Inspector
  1. اربط وحدة التحكم في عارض الويب على الجانب الأيمن أو أسفلها أو افتحها في نافذة منفصلة لاستخدامها حسب راحتك.
  1. انقر على زر إعادة التحميل لتحميل الصفحة وزر التنزيل لتنزيل أرشيف الويب الخاص بالصفحة على جهاز Mac المحلي. باستخدام خيار التنزيل هذا ، يمكنك الحصول على النسخة المحلية من أي صفحة ويب لتحليلها لاحقًا.
  1. تحتوي لوحات علامات التبويب على العديد من اللوحات مثل العناصر والشبكة والموارد والجدول الزمني ومصحح الأخطاء والتخزين ووحدة التحكم. انقر على اللوحة المطلوبة لعرض المعلومات ذات الصلة.
  1. استنادًا إلى علامة التبويب المحددة ، يمكن عرض التفاصيل أسفل هذه اللوحة اليسرى. على سبيل المثال ، ستُظهر علامة تبويب resources جميع الموارد مثل الخطوط والصور وأوراق الأنماط والبرامج النصية المستخدمة في الصفحة.
  1. تعرض هذه اللوحة اليمنى المعلومات التفصيلية المقابلة للقسم الموجود على اللوحة اليمنى. على سبيل المثال ، يؤدي تحديد علامة التبويب "Resources" ثم "Stylesheets " إلى سرد جميع أوراق الأنماط الخارجية المستخدمة في الصفحة. انقر فوق أي ورقة أنماط لعرض المصدر في اللوحة اليمنى.

فحص العناصر

سيؤدي النقر بزر الماوس الأيمن فوق أي عنصر في الصفحة إلى إظهار خيار Inspect Element " والنقر فوقه سيفتح مفتش الويب web inspectorضمنعلامة التبويب " Elements" حرك الماوس وسيتم تمييز العنصر المقابل في الصفحة. بمجرد تحديد العنصر ، يمكن عرض CSS المطابق للعنصر ضمن علامة التبويب "Styles" على اللوحة اليمنى.
عرض مصدر صفحة الويب CSS و HTML في Safari
عرض CSS للعنصر في Safari
تحتوي علامة التبويب " Styles" على ثلاث قيم منسدلة - "Styles-Computed, Styles-Rules and Styles-Visual" . يساعد خيار Styles-Rules " في إظهار فئة CSS فردية كما يمكن رؤيته في Chrome و Firefox . يمكنك تمكين وتعطيل وتعديل خصائص CSS الفردية للعنصر مباشرة ومعرفة تأثير صفحة الويب.

عرض الوضع المستجيب

يسهل Safari عرض صفحات الويب على أنواع مختلفة من شاشات العرض تُستخدم عمومًا لاختبار استجابة صفحة الويب. انقر فوق خيار "Enter Responsive Design Mode " المتوفر تحت علامة التبويب " Develop" أو استخدم اختصارات لوحة المفاتيح "Option + Command + R ". يمكنك عرض الشاشة على أجهزة مختلفة مثل iPhone و iPad و Macs الأخرى.
عرض مصدر صفحة الويب CSS و HTML في Safari
وضع سفاري المستجيب
يوفر Safari أيضًا اختيار وكيل المستخدم لعرض الصفحة على جميع المتصفحات الأحدث مثل Chrome و IE11 و Edge و Firefox على أنظمة iOS و Mac و Windows. يمكن الخروج من وضع الاستجابة إما عن طريق اختصارات لوحة المفاتيح " Option + Command + R " أو من القائمة " Develop > Exit Responsive Design Mode ".

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

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

الاسم

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

رسالة *

Abstract photo created by freepik - www.freepik.com