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

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

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

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

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

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

सोर्स देखें

view-source बैज, एचटीएमएल पेज के रूट पर मौजूद <html> टैग के बगल में होता है. सोर्स पैनल में अपने पेज का सोर्स देखने के लिए, इस पर क्लिक करें.

यह बैज, Chrome के पेज के कॉन्टेक्स्ट (राइट क्लिक) मेन्यू में मौजूद पेज का सोर्स देखें विकल्प के लिए, एक वैकल्पिक वर्कफ़्लो उपलब्ध कराता है:

1. Chrome में, किसी पेज पर राइट क्लिक करें > जांच करें.
2. एलिमेंट पैनल में, <html> टैग के बगल में मौजूद view-source बैज पर क्लिक करें.
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 बैज पर क्लिक नहीं किया जा सकता. हालांकि, इस पर कर्सर घुमाने पर, आपको एक टूलटिप दिखेगी. इसमें यह जानकारी होती है कि एलिमेंट को विज्ञापन के तौर पर क्यों पहचाना गया है. जैसे:

• स्क्रिप्ट की वंशावली: एलिमेंट बनाने में किन स्क्रिप्ट का इस्तेमाल किया गया.
• फ़िल्टर की सूची के नियम: फ़िल्टर की सूची (उदाहरण के लिए, EasyList) का वह खास नियम जो एलिमेंट या लोड किए गए रिसोर्स से मैच हुआ.

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

स्क्रोल करें

कोई एचटीएमएल एलिमेंट, स्क्रोल कंटेनर तब होता है, जब उसकी 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 बैज पर क्लिक करके, स्लॉट के कॉन्टेंट पर वापस जाएं.

top-layer

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

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

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

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

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

मीडिया

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

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

पॉपओवर

पॉपओवर, popoverpopover एट्रिब्यूट वाला कोई भी एलिमेंट हो सकता है. यह इंटरैक्टिव पैटर्न के लिए काम का होता है. जैसे, टूलटिप, अलर्ट, टोस्ट वगैरह. ऐसे एलिमेंट के बगल में popover बैज होते हैं.

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

नीचे दी गई झलक में, popover बैज ढूंढें:

1. झलक में, पॉपओवर टॉगल करें पर क्लिक करें.
2. दिखने वाले पॉपओवर की जांच करें.

3. डीओएम ट्री में, <div popover> एलिमेंट के बगल में मौजूद popover बैज पर क्लिक करें. एलिमेंट पैनल में, आपको top-layer बैज दिखेगा.

   

4. `Top layer section में दिया गया तरीका अपनाएं.

ज़्यादा जानने के लिए, https://web.dev/learn/css/popover-and-dialog लेख भी पढ़ें.

starting-style

The@starting-style नियम, किसी एलिमेंट पर शुरुआती स्टाइल तय करता है. ये स्टाइल, एलिमेंट के पेज पर रेंडर होने से पहले लागू होते हैं. यह उन एलिमेंट के लिए ज़रूरी है जो ऐनिमेट होते हैं से display: none, क्योंकि उन्हें ऐनिमेट होने के लिए किसी स्टेट की ज़रूरत होती है. ऐसे एलिमेंट के बगल में starting-style बैज होते हैं.

इस बैज से, @starting-style नियम में मौजूद स्टाइल टॉगल किए जा सकते हैं. इससे, ऐनिमेशन को ऐक्शन में देखा जा सकता है.

नीचे दी गई झलक में, starting-style बैज ढूंढें:

1. झलक में, पॉपओवर खोलें पर क्लिक करें.
2. दिखने वाले पॉपओवर की जांच करें.

3. डीओएम ट्री में, starting-style बैज को <div popover> एलिमेंट के बगल में टॉगल करें.

   

4. ऐनिमेशन को ऐक्शन में देखें. साथ ही, एलिमेंट > स्टाइल टैब में, लागू किए जा रहे स्टाइल देखें.

ज़्यादा जानने के लिए, पॉपओवर को ऐनिमेट करना लेख भी पढ़ें.

custom-element

हाइफ़न वाले टैग नामों या पसंद के मुताबिक बनाए गए इन-बिल्ट एलिमेंट के लिए is="..." एट्रिब्यूट से पहचाने जाने वाले, कस्टम एचटीएमएल एलिमेंट के बगल में, डीओएम ट्री में custom-element बैज होते हैं.

सोर्स पैनल में, काम के कोड पर जाने के लिए, बैज पर क्लिक करें.