استخدِم لوحة العناصر لفحص عناصر DOM وتعديلها.
نظرة عامة
تقدّم لوحة العناصر واجهة قوية لفحص نموذج المستند (DOM) والتعديل عليه. يمكنك استخدام شجرة نموذج العناصر في المستند، التي تشبه مستند HTML، لاختيار عقد DOM معيّنة وتعديلها باستخدام أدوات أخرى.
تحتوي لوحة العناصر أيضًا على علامات التبويب التالية التي تتضمّن أدوات ذات صلة:
الأنماط:
- عرض قواعد CSS وتصحيح أخطائها المطبَّقة على عنصر من جميع أوراق الأنماط
- ابحث عن أي ملف CSS غير صالح أو تم تجاهله أو غير نشط أو غير ذلك لا يعمل على النحو المنشود.
- يمكنك تعديل العناصر من خلال إضافة تعريف وتطبيق فئة والتفاعل مع نموذج المربّع.
- يمكنك الوصول إلى خيارات تعديل الحاوية باستخدام الشارات في شجرة نموذج العناصر في المستند.
المحتسَبة: تعرض هذه اللوحة الخصائص التي تم حلّها والمطبَّقة على أحد العناصر أثناء عرضها في Chrome.
التنسيق: يحتوي على خيارات لتعديل تراكبات الشبكة ومربّع العرض المرن.
أدوات معالجة الأحداث: تعرض هذه اللوحة جميع أدوات معالجة الأحداث وسماتها. تتيح لك هذه اللوحة العثور على مصدر أدوات معالجة الأحداث وفلترة أدوات معالجة الأحداث السلبية أو الحظر.
نقاط إيقاف DOM: تعرض نقاط إيقاف تغيير DOM المضافة من لوحة "العناصر" وتتيح لك تفعيلها أو إيقافها أو إزالتها أو عرضها.
السمات: اختَر عقدة DOM لفحصها وترتيب السمات الخاصة بالعنصر والسمات الموروثة.
إمكانية الوصول: تعرض هذه اللوحة العناصر التي تتضمّن تصنيفات ARIA وخصائصها. تتيح لك إيقاف شجرة تسهيل الاستخدام وفحصها (تجريبية).
فتح لوحة "العناصر"
عند فتح "أدوات مطوّري البرامج"، تفتح لوحة "العناصر" تلقائيًا. يمكنك أيضًا فحص عقدة في أي مكان على الصفحة لفتح لوحة العناصر تلقائيًا.
لفتح لوحة العناصر يدويًا، اتّبِع الخطوات التالية:
- افتح "أدوات مطوّري البرامج".
- افتح قائمة الأوامر من خلال الضغط على:
- macOS: Command+Shift+P
- Windows وLinux وChromeOS: Control+Shift+P
- ابدأ الكتابة
Elements، ثم اختَر عرض العناصر، واضغط على Enter. تعرض "أدوات مطوّري البرامج" لوحة العناصر في الدرج أسفل نافذة "أدوات مطوّري البرامج".