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