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

Sofia Emelianova
Sofia Emelianova

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

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

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

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

'बैज सेटिंग' मेन्यू.

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

ग्रिड

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

मीडिया

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

बैज की सेटिंग में चालू किया गया मीडिया बैज, वीडियो एलिमेंट के बगल में दिखता है.

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