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