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

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

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

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

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 पर सेट है, तो एचटीएमएल एलिमेंट को स्क्रोल कंटेनर माना जाता है. इसके अलावा, अगर ज़रूरत के मुताबिक कॉन्टेंट मौजूद है, तो ओवरफ़्लो होने पर इसकी वैल्यू auto पर सेट होती है. ऐसे एलिमेंट के बगल में 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. एलिमेंट या उसके ::backdrop के बगल में मौजूद, ink_selectionreveal बैज पर क्लिक करके, <dialog> एलिमेंट पर वापस जाएं.

मीडिया

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

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