डीओएम एलिमेंट की जांच करने और उनमें बदलाव करने के लिए, एलिमेंट पैनल का इस्तेमाल करें.
खास जानकारी
एलिमेंट पैनल, डीओएम की जांच करने और उसमें बदलाव करने के लिए बेहतर इंटरफ़ेस उपलब्ध कराता है. खास डीओएम नोड चुनने और दूसरे टूल की मदद से उनमें बदलाव करने के लिए, एचटीएमएल दस्तावेज़ जैसे डीओएम ट्री का इस्तेमाल किया जा सकता है.
एलिमेंट पैनल में ये टैब भी होते हैं जिनमें काम के टूल शामिल होते हैं:
स्टाइल:
- सभी स्टाइल शीट के किसी एलिमेंट पर लागू किए गए सीएसएस नियम देखें और डीबग करें.
- ऐसी सभी अमान्य, बदली गई, इनऐक्टिव या अन्य सीएसएस ढूंढें जो उम्मीद के मुताबिक काम नहीं कर रही हैं.
- एलिमेंट में बदलाव करने के लिए, एलान जोड़ें, क्लास लागू करें, और Box मॉडल के साथ इंटरैक्ट करें.
- डीओएम ट्री में मिले बैज की मदद से, कंटेनर में बदलाव करने के विकल्पों को ऐक्सेस करें.
कंप्यूटेड: Chrome से रेंडर किए जाने के बाद, किसी एलिमेंट पर लागू की गई लिस्ट की गई प्रॉपर्टी.
लेआउट: इसमें ग्रिड और फ़्लेक्सबॉक्स ओवरले में बदलाव करने के विकल्प होते हैं.
इवेंट सुनने वाले: इसमें इवेंट सुनने वाले सभी लोगों और उनकी विशेषताओं की जानकारी दी जाती है. इससे इवेंट लिसनर का सोर्स पता किया जा सकता है और पैसिव या ब्लॉक किए गए लिसनर के लिए फ़िल्टर किया जा सकता है.
डीओएम ब्रेकपॉइंट: यह एलिमेंट पैनल से जोड़े गए डीओएम बदलाव के ब्रेकपॉइंट की सूची बनाता है. इसकी मदद से, उन्हें चालू किया जा सकता है, बंद किया जा सकता है, हटाया जा सकता है या उनके बारे में बताया जा सकता है.
प्रॉपर्टी: ऑब्जेक्ट की अपनी और इनहेरिट की गई प्रॉपर्टी की जांच करने और उन्हें क्रम से लगाने के लिए, कोई डीओएम नोड चुनें.
सुलभता: यह उन एलिमेंट की सूची बनाता है जिनमें ARIA लेबल और उनकी प्रॉपर्टी हैं. इस सुविधा की मदद से, सुलभता ट्री को टॉगल किया जा सकता है और उसकी जांच की जा सकती है. हालांकि, यह एक्सपेरिमेंट एक्सपेरिमेंट के तौर पर उपलब्ध है.
एलिमेंट पैनल खोलें
डिफ़ॉल्ट रूप से, DevTools खोलने पर, एलिमेंट पैनल खुलता है. एलिमेंट पैनल को अपने-आप खोलने के लिए, पेज पर कहीं भी किसी नोड की जांच की जा सकती है.
मैन्युअल तरीके से एलिमेंट पैनल खोलने के लिए:
- DevTools खोलें.
- यह दबाकर कमांड मेन्यू खोलें:
- macOS पर: Command+Shift+P
- Windows, Linux, ChromeOS: Control+Shift+P
Elementsटाइप करना शुरू करें, एलिमेंट दिखाएं को चुनें, और Enter दबाएं. DevTools आपकी DevTools विंडो के सबसे नीचे मौजूद ड्रॉर में एलिमेंट पैनल दिखाता है.