نظرة عامة على لوحة العناصر

Dale St. Marthe

يمكنك استخدام لوحة العناصر لفحص عناصر DOM وتعديلها.

نظرة عامة

توفر لوحة العناصر واجهة فعالة لفحص نموذج العناصر في المستند (DOM) والتعامل معه. يمكنك استخدام شجرة DOM، التي تشبه مستند HTML، لتحديد عُقد DOM محدّدة وتعديلها باستخدام أدوات أخرى.

تحتوي لوحة العناصر أيضًا على علامات التبويب التالية التي تحتوي على أدوات ذات صلة:

• الأنماط:

  • عرض وتصحيح الأخطاء قواعد CSS المطبَّقة على عنصر من جميع أوراق الأنماط
  • ابحث عن أيّ خدمة غير صالحة أو مُلغاة أو غير نشطة أو أيّ خدمة CSS أخرى لا تعمل على النحو المنشود.
  • يمكنك تعديل العناصر من خلال إضافة بيان وتطبيق فئة والتفاعل مع نموذج Box.
  • يمكنك الوصول إلى خيارات تعديل الحاوية باستخدام الشارات المتوفّرة في شجرة نموذج العناصر في المستند (DOM).

• الحساب المحسوب: يتم تطبيق السمات التي تم حلّها على عنصر أثناء عرضه بواسطة Chrome.

• التنسيق: يحتوي على خيارات لتعديل تراكبات الشبكة وflexbox.

• أدوات معالجة الأحداث: يسرد جميع أدوات معالجة الأحداث وسماتها. تسمح لك هذه الميزة بالعثور على مصدر أدوات معالجة الأحداث والفلترة بحثًا عن أدوات معالجة الحدث السلبية أو المحظورة.

• النقاط الفاصلة (DOM): تدرج نقاط الإيقاف المتعلّقة بتغيير DOM المضافة من لوحة "العناصر" وتتيح لك تفعيلها أو إيقافها أو إزالتها أو إظهارها.

• الخصائص: اختَر عقدة DOM لفحص الخصائص الخاصة والمكتسَبة للكائن وترتيبها.

• أدوات تسهيل الاستخدام: يعرض العناصر التي تتضمّن تصنيفات ARIA وخصائصها. تتيح لك هذه الميزة التبديل بين شجرة تسهيل الاستخدام وفحصها (ميزة تجريبية).

فتح لوحة "العناصر"

بشكل تلقائي، عند فتح أدوات مطوّري البرامج، يتم فتح لوحة العناصر. يمكنك أيضًا فحص عقدة في أي مكان على الصفحة لفتح لوحة العناصر تلقائيًا.

لفتح لوحة العناصر يدويًا:

1. افتح "أدوات مطوري البرامج".
2. افتح قائمة الأوامر بالضغط على:
   • نظام التشغيل macOS: Command+Shift+P
   • أنظمة التشغيل Windows وLinux وChromeOS: Control+Shift+P
3. ابدأ كتابة Elements، واختَر إظهار العناصر، ثم اضغط على Enter. تعرض "أدوات مطوري البرامج" لوحة العناصر في الدرج في أسفل نافذة "أدوات مطوري البرامج".