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