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

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

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

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

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

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

ग्रिड

अगर एचटीएमएल की 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> की मदद से अलग-अलग डीओएम ट्री बनाए जा सकते हैं और उन्हें एक साथ दिखाया जा सकता है. स्लॉट के कॉन्टेंट एलिमेंट के बगल में 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. <dialog> एलिमेंट पर वापस जाने के लिए, एलिमेंट या उसके ::backdrop के बगल में मौजूद reveal बैज पर क्लिक करें.

मीडिया

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

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