مرجع الشارات

Sofia Emelianova

يمكنك تبديل العناصر التي تظهر على سطح الصفحة المختلفة وتسريع التنقّل في شجرة نموذج DOM باستخدام هذا المرجع الشامل للشارات في لوحة العناصر.

إظهار الشارات أو إخفاؤها

لإظهار شارات معيّنة أو إخفاؤها:

1. افتح "أدوات مطوّري البرامج".
2. انقر بزر الماوس الأيمن على عنصر في شجرة نموذج DOM وضع علامة في مربّع اختيار شارة واحدة أو عدة شارات في القائمة الفرعية إعدادات الشارة.

تعرِض لوحة العناصر الشارات المحدّدة بجانب العناصر المناسبة في شجرة نموذج DOM. توضّح الأقسام التالية كل شارة.

شبكة

يكون عنصر HTML هو حاوية شبكة إذا تم ضبط سمة display في CSS على grid أو inline-grid. تظهر شارات grid بجانب هذه العناصر لتفعيل أو إيقاف التراكبات المقابلة.

بدِّل التراكب في المعاينة التالية:

1. فحص العنصر في المعاينة
2. في شجرة نموذج DOM، انقر على شارة grid بجانب العنصر وراقِب التراكب.

يعرض التراكب الأعمدة والصفوف وأرقامها والفواصل بينها.

للتعرّف على كيفية تصحيح أخطاء تنسيق الشبكة، اطّلِع على مقالة فحص شبكة CSS.

الشبكة الفرعية

الشبكة الفرعية هي شبكة مُدمجة تستخدم مسارات الشبكة الرئيسية نفسها. يكون العنصر حاوية شبكة فرعية إذا تم ضبط سمة grid-template-columns أو grid-template-rows أو كليهما على القيمة subgrid. تظهر شارات subgrid بجانب هذه العناصر لتفعيل أو إيقاف التراكبات المقابلة.

فعِّل التراكب في المعاينة التالية:

1. فحص العنصر في المعاينة
2. في شجرة نموذج DOM، انقر على شارة subgrid بجانب العنصر وراقِب التراكب.

يعرض التراكب الأعمدة والصفوف وأرقامها والفواصل في شبكة فرعية.

التعبير

يكون عنصر HTML هو حاوية مرنة إذا تم ضبط سمة display في CSS على flex أو inline-flex. تظهر شارات flex بجانب هذه العناصر، وهي تتيح تفعيل أو إيقاف العناصر التي تظهر على سطح الفيديو.

بدِّل التراكب في المعاينة التالية:

1. فحص العنصر في المعاينة
2. في شجرة نموذج DOM، انقر على شارة flex بجانب العنصر وراقِب التراكب.

يعرض التراكب مواضع العناصر الثانوية.

لمعرفة كيفية تصحيح أخطاء تنسيقات Flex، اطّلِع على مقالة فحص تنسيق CSS flexbox وتصحيح أخطائه.

إعلان

يمكن لأداة DevTools رصد بعض إطارات الإعلانات ووضع علامات عليها. تظهر شارات ad بجانب هذه الإطارات.

يمكنك الاطّلاع على إعلان في المعاينة التالية:

1. فحص العنصر في المعاينة
2. في شجرة نموذج DOM، ابحث عن عنصر يحمل شارة ad بجانبه.

لا يمكن النقر على شارة ad، ولكن يمكنك استخدام علامة التبويب العرض لتمييز إطارات الإعلانات باللون الأحمر.

صفحة مواضع التمرير

يكون عنصر HTML هو حاوية لفّ إذا تم ضبط سمة overflow CSS على scroll أو auto عندما يكون هناك محتوى كافٍ للتسبب في حدوث تدفّق. تظهر شارات scroll بجانب هذه العناصر.

محاذاة مواضع التمرير

يمكن أن تحتوي حاويات التمرير على خصائص CSS التي تضبط نقاط الربط. تظهر شارات scroll-snap بجانب هذه العناصر، وهي تتيح تفعيل أو إيقاف العناصر التي تظهر على سطح الفيديو.

فعِّل التراكب في المعاينة التالية:

1. فحص العنصر في المعاينة
2. في شجرة نموذج DOM، انقر على شارة scroll-snap بجانب العنصر.
3. حاوِل الانتقال إلى العنصر على يسار الصفحة وراقِب الشكل المتراكب.

يعرض التراكب مواضع العناصر ونقاط التثبيت.

الحاوية

يكون عنصر HTML هو حاوية إذا كان يتضمّن سمة container-type في CSS. تظهر شارات container بجانب هذه العناصر لتفعيل أو إيقاف التراكبات المقابلة.

ملاحظة: طلبات البحث عن حاويات CSS هي ميزة تجريبية. لتفعيل هذه الميزة في "أدوات مطوّري البرامج"، ضِمن chrome://flags، اضبط تجربة Enable CSS Container Queries على Enabled. وبخلاف ذلك، لن تعمل المعاينة التالية.

بدِّل التراكب في المعاينة التالية:

1. فحص العنصر في المعاينة
2. في شجرة نموذج DOM، انقر على شارة container بجانب العنصر.
3. حاوِل تغيير حجم العنصر من خلال سحب الزاوية السفلية اليمنى منه، وراقِب تغيير التنسيق والعنصر المتراكب.

يعرض التراكب مواضع العناصر الثانوية.

للتعرّف على كيفية تصحيح أخطاء طلبات البحث عن الحاويات، اطّلِع على مقالة فحص طلبات البحث عن حاويات CSS وتصحيح أخطائها.

الخانة

عنصر HTML‏ <slot> هو عنصر نائب يمكنك ملؤه بمحتوى من اختيارك. بالإضافة إلى عنصر <template>، يتيح لك عنصر <slot> إنشاء أشجار DOM منفصلة وعرضها معًا. تظهر شارات ink_selectionslot بجانب عناصر محتوى الفتحات، وتعمل هذه الشارات كروابط تؤدي إلى الفتحات المقابلة.

يمكنك الاطّلاع على شارة ink_selectionslot في المعاينة التالية:

1. فحص العنصر في المعاينة
2. في شجرة نموذج DOM، انقر على شارة ink_selectionslot بجانب العنصر لتحديد مكان الفتحة المقابلة.
   ملاحظة مهمة: تتضمّن شارة ink_selectionslot شارة ink_selectionreveal مقترنة بها تنقل إلى الخطوة السابقة.
3. يمكنك الرجوع إلى محتوى الشريحة بالنقر على شارة ink_selectionreveal.

الطبقة العليا

تساعدك هذه الشارة في فهم مفهوم الطبقة العليا وعرضها بشكل مرئي. تعرِض الطبقة العلوية المحتوى فوق جميع الطبقات الأخرى، بغض النظر عن z-index. عند فتح عنصر <dialog> باستخدام طريقة .showModal()، يضع المتصفّح العنصر في الطبقة العليا.

لمساعدتك في الاطّلاع على عناصر الطبقة العليا، تضيف لوحة العناصر حاوية #top-layer إلى شجرة DOM بعد علامة </html> الإغلاق.

تظهر شارات ink_selectiontop-layer (N) بجانب عناصر الطبقة العليا، حيث يشير N إلى رقم فهرس العنصر. الشارات هي روابط تؤدي إلى العناصر المقابلة لها في حاوية #top-layer.

يمكنك الاطّلاع على شارة ink_selectiontop-layer (N) في المعاينة التالية:

1. في المعاينة، انقر على فتح مربّع الحوار.
2. فحص مربّع الحوار
3. في شجرة نموذج DOM، انقر على شارة ink_selectiontop-layer (1) بجانب العنصر <dialog>. تنقلك لوحة العناصر إلى العنصر المقابل في حاوية #top-layer بعد العلامة </html> الإغلاق.
   ملاحظة مهمة: تتضمّن شارة ink_selectiontop-layer (N) شارة ink_selectionreveal مقترنة بها تنقل إلى الخطوة السابقة.
4. يمكنك الرجوع إلى عنصر <dialog> بالنقر على شارة ink_selectionreveal بجانب العنصر أو ::backdrop.

الوسائط

تكون شارة media غير مفعَّلة تلقائيًا. عند تفعيله، يظهر بجانب العنصرَين <audio> و<video>. انقر على هذه الشارة لفتح لوحة الوسائط وتصحيح أخطاء الوسائط.

لمزيد من المعلومات، يُرجى الاطّلاع على مقالة تصحيح أخطاء مشغّلات الوسائط باستخدام لوحة "الوسائط".