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