बैज के बारे में जानकारी

एलिमेंट पैनल में बैज की इस पूरी जानकारी के साथ अलग-अलग ओवरले को टॉगल करें और डीओएम ट्री नेविगेशन की प्रोसेस को तेज़ करें.

बैज दिखाएं या छिपाएं

बैज दिखाने या छिपाने के लिए:

1. DevTools खोलें.
2. डीओएम ट्री में किसी एलिमेंट पर राइट क्लिक करके, बैज सेटिंग... चुनें.
3. चुने गए बैज के आगे मौजूद चेकबॉक्स चुनें या उन्हें मिटाएं.

एलिमेंट पैनल, डीओएम ट्री में सही एलिमेंट के बगल में चुने गए बैज दिखाता है. अगले सेक्शन में हर बैज के बारे में बताया गया है.

GRid

अगर display सीएसएस प्रॉपर्टी को grid या inline-grid पर सेट किया गया है, तो एचटीएमएल एलिमेंट को ग्रिड कंटेनर माना जाता है. ऐसे एलिमेंट के आगे grid बैज होते हैं जो इनसे जुड़े ओवरले को टॉगल करते हैं.

नीचे दिए गए झलक पर ओवरले को टॉगल करें:

1. झलक में एलिमेंट की जांच करें.
2. डीओएम ट्री में, एलिमेंट के बगल में मौजूद grid बैज पर क्लिक करके ओवरले पर नज़र रखें.

ओवरले में कॉलम, पंक्तियां, उनकी संख्या, और गैप दिखते हैं.

ग्रिड लेआउट को डीबग करने का तरीका जानने के लिए, सीएसएस ग्रिड की जांच करना लेख पढ़ें.

सबग्रिड

सबग्रिड एक नेस्ट किया हुआ ग्रिड है, जो अपने पैरंट ग्रिड वाले ट्रैक का इस्तेमाल करता है. अगर एक या दोनों grid-template-columns, grid-template-rows प्रॉपर्टी को subgrid पर सेट किया जाता है, तो उस एलिमेंट को सबग्रिड कंटेनर कहा जाता है. ऐसे एलिमेंट के आगे subgrid बैज होते हैं जो इनसे जुड़े ओवरले को टॉगल करते हैं.

नीचे दिए गए झलक पर ओवरले को टॉगल करें:

1. झलक में एलिमेंट की जांच करें.
2. डीओएम ट्री में, एलिमेंट के बगल में मौजूद subgrid बैज पर क्लिक करके ओवरले पर नज़र रखें.

ओवरले किसी सबग्रिड के कॉलम, पंक्तियां, उनकी संख्याएं, और गैप दिखाता है.

Flex

अगर display सीएसएस प्रॉपर्टी को flex या inline-flex पर सेट किया गया है, तो एचटीएमएल एलिमेंट एक फ़्लेक्स कंटेनर होता है. ऐसे एलिमेंट के आगे flex बैज होते हैं जो इनसे जुड़े ओवरले को टॉगल करते हैं.

नीचे दिए गए झलक पर ओवरले को टॉगल करें:

1. झलक में एलिमेंट की जांच करें.
2. डीओएम ट्री में, एलिमेंट के बगल में मौजूद flex बैज पर क्लिक करके ओवरले पर नज़र रखें.

ओवरले चाइल्ड एलिमेंट की पोज़िशन दिखाता है.

फ़्लेक्स लेआउट को डीबग करने का तरीका जानने के लिए, सीएसएस फ़्लेक्सबॉक्स की जांच करना और उसे डीबग करना लेख पढ़ें.

विज्ञापन

DevTools कुछ विज्ञापन फ़्रेम का पता लगा सकता है और उन्हें टैग कर सकता है. ऐसे फ़्रेम के आगे ad बैज होते हैं.

नीचे दी गई झलक में कोई विज्ञापन देखें:

1. झलक में एलिमेंट की जांच करें.
2. डीओएम ट्री में, ad बैज के बगल में मौजूद एलिमेंट ढूंढें.

ad बैज पर क्लिक नहीं किया जा सकता. हालांकि, लाल रंग से विज्ञापन फ़्रेम को हाइलाइट करने के लिए, रेंडरिंग टैब का इस्तेमाल किया जा सकता है.

स्क्रोल करें

अगर overflow सीएसएस प्रॉपर्टी को scroll या auto पर सेट किया जाता है, जब कॉन्टेंट में ओवरफ़्लो होने की वजह से काफ़ी कॉन्टेंट होता है, तो एचटीएमएल एलिमेंट स्क्रोल कंटेनर होता है. स्क्रोल कंटेनर में स्नैप पॉइंट कॉन्फ़िगर करने वाली सीएसएस प्रॉपर्टी हो सकती हैं. ऐसे एलिमेंट के आगे scroll-snap बैज होते हैं जो इनसे जुड़े ओवरले को टॉगल करते हैं.

नीचे दिए गए झलक पर ओवरले को टॉगल करें:

1. झलक में एलिमेंट की जांच करें.
2. डीओएम ट्री में, एलिमेंट के बगल में मौजूद scroll-snap बैज पर क्लिक करें.
3. एलिमेंट को दाईं ओर स्क्रोल करके देखें और ओवरले की निगरानी करें.

ओवरले, एलिमेंट की पोज़िशन और स्नैप पॉइंट दिखाता है.

कंटेनर

अगर एचटीएमएल एलिमेंट में container-type सीएसएस प्रॉपर्टी है, तो उसे कंटेनर माना जाता है. ऐसे एलिमेंट के आगे container बैज होते हैं जो इनसे जुड़े ओवरले को टॉगल करते हैं.

नीचे दिए गए झलक पर ओवरले को टॉगल करें:

1. झलक में एलिमेंट की जांच करें.
2. डीओएम ट्री में, एलिमेंट के बगल में मौजूद container बैज पर क्लिक करें.
3. एलिमेंट का साइज़ बदलने के लिए, उसके सबसे नीचे दाएं कोने को खींचें और छोड़ें. साथ ही, लेआउट में हुए बदलाव और ओवरले को देखें.

ओवरले चाइल्ड एलिमेंट की पोज़िशन दिखाता है.

कंटेनर की क्वेरी को डीबग करने का तरीका जानने के लिए, सीएसएस कंटेनर की क्वेरी की जांच करना और उसे डीबग करना लेख पढ़ें.

स्लॉट

<slot> एचटीएमएल एलिमेंट एक प्लेसहोल्डर है, जिसे अपने कॉन्टेंट से भरा जा सकता है. <template> एलिमेंट के साथ <slot> की मदद से, अलग-अलग DOM ट्री बनाए जा सकते हैं और उन्हें एक साथ प्रज़ेंट किया जा सकता है. स्लॉट के कॉन्टेंट एलिमेंट के बगल में slot बैज होते हैं. ये इनसे जुड़े स्लॉट के लिंक के तौर पर काम करते हैं.

नीचे दी गई झलक में slot बैज देखें:

1. झलक में एलिमेंट की जांच करें.
2. डीओएम ट्री में, एलिमेंट के बगल में मौजूद slot बैज पर क्लिक करके, उससे जुड़ा स्लॉट ढूंढें.
3. reveal बैज पर क्लिक करके स्लॉट के कॉन्टेंट पर वापस जाएं.

ऊपरी लेयर

इस बैज से आपको सबसे ऊपरी लेयर के कॉन्सेप्ट को समझने और उसे विज़ुअलाइज़ करने में मदद मिलती है. सबसे ऊपर वाली लेयर, कॉन्टेंट को अन्य सभी लेयर के ऊपर रेंडर करती है. भले ही, z-index कुछ भी हो. जब .showModal() तरीके का इस्तेमाल करके कोई <dialog> एलिमेंट खोला जाता है, तो ब्राउज़र उसे सबसे ऊपर वाली लेयर में डालता है.

टॉप लेयर के एलिमेंट को विज़ुअलाइज़ करने के लिए, एलिमेंट पैनल, बंद होने वाले </html> टैग के बाद, डीओएम ट्री में एक #top-layer कंटेनर जोड़ता है.

टॉप लेयर एलिमेंट के आगे top-layer (N) बैज होते हैं. इसमें N, एलिमेंट का इंडेक्स नंबर होता है. ये बैज, #top-layer कंटेनर में मौजूद मिलते-जुलते एलिमेंट के लिंक होते हैं.

नीचे दी गई झलक में top-layer (N) बैज देखें:

1. झलक में, डायलॉग खोलें पर क्लिक करें.
2. डायलॉग की जांच करें.
3. डीओएम ट्री में, <dialog> एलिमेंट के बगल में मौजूद top-layer (1) बैज पर क्लिक करें. एलिमेंट पैनल आपको क्लोज़िंग </html> टैग के बाद, #top-layer कंटेनर में उससे जुड़े एलिमेंट पर ले जाता है.
4. एलिमेंट या उसके ::backdrop के आगे दिए गए reveal बैज पर क्लिक करके, <dialog> एलिमेंट पर वापस जाएं.

मीडिया

media बैज, डिफ़ॉल्ट रूप से बंद होता है. चालू होने पर, यह <audio> और <video> एलिमेंट के बगल में दिखता है. मीडिया पैनल खोलने और अपने मीडिया को डीबग करने के लिए, इस बैज पर क्लिक करें.

ज़्यादा जानकारी के लिए, मीडिया पैनल की मदद से मीडिया प्लेयर को डीबग करना देखें.