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

Dale St. Marthe

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

نظرة عامة

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

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

• الأنماط:

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

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

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

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

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

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

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

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

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

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

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