وضع الفحص: تحليل خصائص العناصر بسرعة

Dale St. Marthe

استخدِم وضع الفحص للتركيز على عناصر معيّنة على صفحة الويب وتحليلها.

نظرة عامة

يتيح لك تفعيل وضع الفحص في أدوات مطوّري البرامج (أداة اختيار العناصر) تمرير مؤشر الماوس فوق العناصر في صفحتك والاطّلاع على معلومات عن التصميم وتسهيل الاستخدام. يؤدي النقر على عنصر عندما يكون وضع الفحص مفعّلاً إلى تمييز عنصر نموذج DOM المقابل في شجرة نموذج DOM في لوحة العناصر، وعرض الأنماط ذات الصلة في علامة التبويب الأنماط.

تفعيل وضع "فحص"

لتفعيل وضع الفحص:

1. افتح DevTools.
2. انقر على الزر وضع الفحص في شريط الإجراءات.

يكون أداة اختيار العناصر نشطة عندما يكون رمز وضع الفحص باللون الأزرق.

يمكنك أيضًا استخدام اختصار في Chrome لفتح لوحة العناصر في وضع الفحص. اضغط على أيٍّ مما يلي:

• نظام التشغيل macOS: Cmd+Option+C
• نظام التشغيل Windows وLinux وChromeOS: Ctrl+Shift+C

استخدام وضع "فحص" لعرض معلومات عن التصميم وسهولة الاستخدام

عندما يكون وضع الفحص مفعّلاً، مرِّر مؤشر الماوس فوق العناصر في صفحتك، ما سيؤدي إلى تمييز العنصر وعرض نصائح توضيحية مركّبة. ستوسّع لوحة العناصر تلقائيًا شجرة DOM لتمييز العنصر الذي تمرّر مؤشر الماوس فوقه.

استنادًا إلى العنصر، سيعرض تلميح وضع الفحص سمات التصميم التالية:

• محدِّدات العنصر
• سمات العنصر، بالبكسل
• لون خلفية العنصر
• لون نص العنصر
• سمات الخط للعنصر
• سمة الحشو للعنصر، بالبكسل
• هامش العنصر، بالبكسل

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

سيعرض قسم تسهيل الاستخدام في التلميح المعلومات التالية:

• اسم العنصر ودوره الذي تم الإبلاغ عنه للتكنولوجيا المساعِدة
• ما إذا كان العنصر قابلاً للتركيز باستخدام لوحة المفاتيح

سيؤدي تمرير مؤشر الماوس فوق رؤوس النصوص على وجه الخصوص إلى عرض نسبة تباين تقيس الفرق في السطوع بين ألوان المقدّمة (لون النص) وألوان الخلفية.

إنّ نسبة التباين الجيدة ضرورية لقراءة النص بسهولة. تعرَّف على كيفية إصلاح مشكلة النص الذي يتسم بدرجة تباين منخفضة.

الاحتفاظ بتلميح وضع "الفحص" وإخفاؤه

لإبقاء التلميح وضع الفحص معروضًا مع إمكانية تحريك مؤشر الماوس إلى مكان آخر، اضغط مع الاستمرار على:

• نظام التشغيل macOS: Ctrl+Option
• نظام التشغيل Windows وLinux وChromeOS: ‏ Ctrl+Alt

لإخفاء التلميح التعليمي الخاص بالفحص مؤقتًا أثناء تحريك مؤشر الماوس، اضغط مع الاستمرار على Ctrl.

فحص العناصر التي لا يمكن الوصول إليها

لا يمكن استهداف العناصر التي تتضمّن سمة CSS pointer-events: none; باستخدام وضع الفحص في البداية.

لفحص العناصر التي لا يمكن الوصول إليها، اضغط على Shift أثناء تمرير مؤشر الماوس فوق العنصر.