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

Dale St. Marthe

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

نظرة عامة

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

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

لتفعيل وضع الفحص، اتّبِع الخطوات التالية:

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

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

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

• macOS: Cmd+Option+C
• Windows وLinux وChromeOS: Ctrl+Shift+C

استخدِم "وضع الفحص" للاطّلاع على معلومات النمط وتسهيل الاستخدام

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

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

• محددات العنصر.
• أبعاد العنصر بالبكسل.
• لون خلفية العنصر
• لون نص العنصر.
• خصائص خط العنصر.
• المساحة المتروكة للعنصر بالبكسل.
• هامش العنصر بالبكسل.

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

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

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

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

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

الاستمرار في تلميح "وضع الفحص" وإخفائه

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

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

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

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

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

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