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