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