एलिमेंट पैनल में बैज के बारे में दी गई इस पूरी जानकारी की मदद से, अलग-अलग ओवरले टॉगल करें और डीओएम ट्री में नेविगेट करने की प्रोसेस को तेज़ करें.
बैज दिखाना या छिपाना
कुछ बैज दिखाने या छिपाने के लिए:
- DevTools खोलें.
- DOM ट्री में किसी एलिमेंट पर राइट क्लिक करें. इसके बाद, बैज की सेटिंग सब-मेन्यू में एक या उससे ज़्यादा बैज चुनें.
एलिमेंट पैनल में, चुने गए बैज, डीओएम ट्री में सही एलिमेंट के बगल में दिखते हैं. अगले सेक्शन में, हर बैज के बारे में बताया गया है.
सोर्स देखें
view-source बैज, एचटीएमएल पेज के रूट पर मौजूद <html> टैग के बगल में दिखता है. सोर्स पैनल में अपने पेज का सोर्स देखने के लिए, इस पर क्लिक करें.
यह बैज, Chrome के पेज कॉन्टेक्स्ट (राइट क्लिक) मेन्यू में मौजूद पेज का सोर्स देखें विकल्प के लिए, एक वैकल्पिक वर्कफ़्लो उपलब्ध कराता है:
- Chrome में, किसी पेज पर राइट क्लिक करें > जांच करें.
- एलिमेंट पैनल में,
<html>टैग के बगल में मौजूदview-sourceबैज पर क्लिक करें. - सोर्स पैनल में, पेज के सोर्स की जांच करें.
ग्रिड
कोई एचटीएमएल एलिमेंट, ग्रिड कंटेनर तब होता है, जब उसकी display सीएसएस प्रॉपर्टी को grid या inline-grid पर सेट किया जाता है. ऐसे एलिमेंट के बगल में grid बैज दिखते हैं. इनकी मदद से, इनसे जुड़े ओवरले टॉगल किए जा सकते हैं.
नीचे दी गई झलक पर ओवरले टॉगल करें:
- झलक में एलिमेंट की जांच करें.
- डीओएम ट्री में, एलिमेंट के बगल में मौजूद
gridबैज पर क्लिक करें और ओवरले देखें.
ओवरले में कॉलम, लाइनें, उनके नंबर, और गैप दिखते हैं.
ग्रिड लेआउट को डीबग करने का तरीका जानने के लिए, सीएसएस ग्रिड की जांच करना लेख पढ़ें.
सबग्रिड
सबग्रिड, नेस्ट की गई ग्रिड होती है. यह अपने पैरंट ग्रिड के ट्रैक का इस्तेमाल करती है. कोई एलिमेंट, सबग्रिड कंटेनर तब होता है, जब उसकी grid-template-columns और grid-template-rows प्रॉपर्टी में से किसी एक या दोनों को subgrid पर सेट किया जाता है. ऐसे एलिमेंट के बगल में subgrid बैज दिखते हैं. इनकी मदद से, इनसे जुड़े ओवरले टॉगल किए जा सकते हैं.
नीचे दी गई झलक पर ओवरले टॉगल करें:
- झलक में एलिमेंट की जांच करें.
- डीओएम ट्री में, एलिमेंट के बगल में मौजूद
subgridबैज पर क्लिक करें और ओवरले देखें.
ओवरले में, सबग्रिड के कॉलम, लाइनें, उनके नंबर, और गैप दिखते हैं.
Flex
कोई एचटीएमएल एलिमेंट, फ़्लेक्स कंटेनर तब होता है, जब उसकी display सीएसएस प्रॉपर्टी को flex या inline-flex पर सेट किया जाता है. ऐसे एलिमेंट के बगल में flex बैज दिखते हैं. इनकी मदद से, इनसे जुड़े ओवरले टॉगल किए जा सकते हैं.
नीचे दी गई झलक पर ओवरले टॉगल करें:
- झलक में एलिमेंट की जांच करें.
- डीओएम ट्री में, एलिमेंट के बगल में मौजूद
flexबैज पर क्लिक करें और ओवरले देखें.
ओवरले में, चाइल्ड एलिमेंट की जगहें दिखती हैं.
फ़्लेक्स लेआउट को डीबग करने का तरीका जानने के लिए, सीएसएस फ़्लेक्सबॉक्स की जांच करना और उसे डीबग करना लेख पढ़ें.
विज्ञापन
DevTools, विज्ञापन के कुछ फ़्रेम का पता लगा सकता है और उन्हें टैग कर सकता है. ऐसे फ़्रेम के बगल में ad बैज दिखते हैं.
नीचे दी गई झलक में, कोई विज्ञापन ढूंढें:
- झलक में एलिमेंट की जांच करें.
- डीओएम ट्री में, ऐसा एलिमेंट ढूंढें जिसके बगल में
adबैज मौजूद हो.
ad बैज पर क्लिक नहीं किया जा सकता. हालांकि, इस पर कर्सर घुमाने पर, आपको एक टूलटिप दिखेगी. इसमें यह जानकारी होती है कि एलिमेंट को विज्ञापन के तौर पर क्यों पहचाना गया. जैसे:
- स्क्रिप्ट की जानकारी: एलिमेंट बनाने में किन स्क्रिप्ट का इस्तेमाल किया गया.
- फ़िल्टर की सूची के नियम: फ़िल्टर की सूची (उदाहरण के लिए,
EasyList) का वह खास नियम जो एलिमेंट या लोड किए गए रिसोर्स से मैच हुआ.
विज्ञापन के फ़्रेम को लाल रंग में हाइलाइट करने के लिए, रेंडरिंग टैब का भी इस्तेमाल किया जा सकता है.
स्क्रोल करें
कोई एचटीएमएल एलिमेंट, स्क्रोल कंटेनर तब होता है, जब उसकी overflow सीएसएस प्रॉपर्टी को scroll पर सेट किया जाता है. इसके अलावा, जब ज़रूरत के मुताबिक कॉन्टेंट मौजूद होने पर, इसे auto पर सेट किया जाता है. ऐसे एलिमेंट के बगल में scroll बैज दिखते हैं.
स्क्रोल-स्नैप
स्क्रोल कंटेनर में, सीएसएस प्रॉपर्टी हो सकती हैं. इनकी मदद से, स्नैप पॉइंट कॉन्फ़िगर किए जा सकते हैं. ऐसे एलिमेंट के बगल में scroll-snap बैज दिखते हैं. इनकी मदद से, इनसे जुड़े ओवरले टॉगल किए जा सकते हैं.
नीचे दी गई झलक पर ओवरले टॉगल करें:
- झलक में एलिमेंट की जांच करें.
- DOM ट्री में, एलिमेंट के बगल में मौजूद
scroll-snapबैज पर क्लिक करें. - एलिमेंट को दाईं ओर स्क्रोल करके देखें और ओवरले देखें.
ओवरले में, एलिमेंट की जगहें और स्नैप पॉइंट दिखते हैं.
कंटेनर
कोई एचटीएमएल एलिमेंट, कंटेनर तब होता है, जब उसमें container-type सीएसएस प्रॉपर्टी मौजूद होती है. ऐसे एलिमेंट के बगल में container बैज दिखते हैं. इनकी मदद से, इनसे जुड़े ओवरले टॉगल किए जा सकते हैं.
नीचे दी गई झलक पर ओवरले टॉगल करें:
- झलक में एलिमेंट की जांच करें.
- DOM ट्री में, एलिमेंट के बगल में मौजूद
containerबैज पर क्लिक करें. - एलिमेंट के सबसे नीचे दाएं कोने को खींचकर, उसका साइज़ बदलने की कोशिश करें. इसके बाद, लेआउट में होने वाला बदलाव और ओवरले देखें.
ओवरले में, चाइल्ड एलिमेंट की जगहें दिखती हैं.
कंटेनर क्वेरी को डीबग करने का तरीका जानने के लिए, सीएसएस कंटेनर क्वेरी की जांच करना और उसे डीबग करना लेख पढ़ें.
स्लॉट
<slot> एचटीएमएल एलिमेंट, प्लेसहोल्डर होता है. इसमें अपना कॉन्टेंट जोड़ा जा सकता है. <template> एलिमेंट के साथ मिलकर, <slot> की मदद से अलग-अलग DOM ट्री बनाए जा सकते हैं और उन्हें एक साथ दिखाया जा सकता है. स्लॉट कॉन्टेंट एलिमेंट के बगल में slot बैज दिखते हैं. ये बैज, इनसे जुड़े स्लॉट के लिंक के तौर पर काम करते हैं.
नीचे दी गई झलक में, slot बैज ढूंढें:
- झलक में एलिमेंट की जांच करें.
- DOM ट्री में, एलिमेंट के बगल में मौजूद
slotबैज पर क्लिक करके, इससे जुड़ा स्लॉट ढूंढें.
revealबैज पर क्लिक करके, स्लॉट के कॉन्टेंट पर वापस जाएं.
top-layer
इस बैज की मदद से, टॉप लेयर के कॉन्सेप्ट को समझा जा सकता है और इसे विज़ुअलाइज़ किया जा सकता है. टॉप लेयर, z-index की वैल्यू के बावजूद, कॉन्टेंट को अन्य सभी लेयर के ऊपर रेंडर करती है. जब <dialog> एलिमेंट खोलने के लिए .showModal() तरीके का इस्तेमाल किया जाता है, तो ब्राउज़र इसे टॉप लेयर में डाल देता है.
टॉप लेयर के एलिमेंट को विज़ुअलाइज़ करने में आपकी मदद करने के लिए, एलिमेंट पैनल, क्लोज़िंग </html> टैग के बाद, डीओएम ट्री में #top-layer कंटेनर जोड़ता है.
टॉप लेयर के एलिमेंट के बगल में top-layer (N) बैज दिखते हैं. यहां N एलिमेंट का इंडेक्स नंबर होता है. ये बैज, #top-layer कंटेनर में मौजूद, इनसे जुड़े एलिमेंट के लिंक होते हैं.
नीचे दी गई झलक में, top-layer (N) बैज ढूंढें:
- झलक में, डायलॉग खोलें पर क्लिक करें.
- डायलॉग की जांच करें.
- डीओएम ट्री में,
top-layer (1)बैज पर क्लिक करें जो<dialog>एलिमेंट के बगल में है. एलिमेंट पैनल, क्लोज़िंग</html>टैग के बाद, आपको#top-layerकंटेनर में मौजूद, इससे जुड़े एलिमेंट पर ले जाता है.
- एलिमेंट या उसके
::backdropके बगल में मौजूदrevealबैज पर क्लिक करके,<dialog>एलिमेंट पर वापस जाएं.
मीडिया
media बैज की सेटिंग डिफ़ॉल्ट रूप से बंद होती है. चालू करने पर, यह <audio> और <video> एलिमेंट के बगल में दिखता है. मीडिया पैनल खोलने और अपने मीडिया को डीबग करने के लिए, इस बैज पर क्लिक करें.
ज़्यादा जानकारी के लिए, मीडिया पैनल की मदद से मीडिया प्लेयर को डीबग करना लेख पढ़ें.
पॉपओवर
पॉपओवर, पॉपओवर एट्रिब्यूट वाला कोई भी एलिमेंट हो सकता है. यह इंटरैक्टिव पैटर्न के लिए काम का होता है. जैसे, टूलटिप, चेतावनियां, टोस्ट वगैरह.popover ऐसे एलिमेंट के बगल में popover बैज दिखते हैं.
इस बैज की मदद से, इसके बगल में मौजूद top-layer बैज टॉगल किया जा सकता है. यह बैज, #top-layer कंटेनर में मौजूद, इनसे जुड़े एलिमेंट के लिंक के तौर पर काम करता है.
नीचे दी गई झलक में, popover बैज ढूंढें:
- झलक में, पॉपओवर टॉगल करें पर क्लिक करें.
- दिखने वाले पॉपओवर की जांच करें.
डीओएम ट्री में,
popoverबैज पर क्लिक करें जो<div popover>एलिमेंट के बगल में है. एलिमेंट पैनल में,top-layerबैज दिखता है.
`Top layer सेक्शन में दिए गए निर्देशों का पालन करें.
ज़्यादा जानने के लिए, https://web.dev/learn/css/popover-and-dialog लेख भी पढ़ें.
starting-style
The@starting-style नियम, किसी एलिमेंट पर शुरुआती स्टाइल तय करता है. ये स्टाइल, एलिमेंट के पेज पर रेंडर होने से पहले लागू होते हैं. यह उन एलिमेंट के लिए ज़रूरी है जो ऐनिमेट होते हैं display: none से. ऐसा इसलिए, क्योंकि उन्हें ऐनिमेट होने के लिए किसी स्टेट की ज़रूरत होती है. ऐसे एलिमेंट के बगल में starting-style बैज दिखते हैं.
इस बैज की मदद से, @starting-style नियम में मौजूद स्टाइल टॉगल किए जा सकते हैं. इससे, ऐनिमेशन को ऐक्शन में देखा जा सकता है.
नीचे दी गई झलक में, starting-style बैज ढूंढें:
- झलक में, पॉपओवर खोलें पर क्लिक करें.
- दिखने वाले पॉपओवर की जांच करें.
डीओएम ट्री में,
starting-styleबैज को<div popover>एलिमेंट के बगल में टॉगल करें.
ऐनिमेशन को ऐक्शन में देखें. साथ ही, एलिमेंट > स्टाइल टैब में, लागू किए जा रहे स्टाइल देखें.
ज़्यादा जानने के लिए, पॉपओवर को ऐनिमेट करना लेख भी पढ़ें.