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

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

बैज दिखाना या छिपाना

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

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

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

ग्रिड

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

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

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

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

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

सबग्रिड

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

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

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

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

अनफ़ोल्ड करें

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

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

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

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

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

विज्ञापन

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

निम्नलिखित पूर्वावलोकन में विज्ञापन खोजें:

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

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

स्क्रोल-स्नैप

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

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

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

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

कंटेनर

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

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

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

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

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

स्लॉट

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

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

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

ऊपरी परत

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

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

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

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

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

मीडिया

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

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