इस गाइड में यह माना गया है कि आपको Chrome DevTools में सीएसएस की जांच करने के बारे में पता है. बुनियादी बातें जानने के लिए, सीएसएस देखना और बदलना देखें.
अपनी बनाई गई सीएसएस की जांच करना
मान लें कि आपने किसी एलिमेंट में कुछ सीएसएस जोड़ी हैं और आपको यह पक्का करना है कि नई स्टाइल ठीक से लागू हों. पेज को रीफ़्रेश करने पर, एलिमेंट पहले जैसा ही दिखता है. कुछ गलत हुआ.
सबसे पहले, एलिमेंट की जांच करें और पक्का करें कि एलिमेंट पर आपका नया सीएसएस लागू किया गया हो.
कभी-कभी, आपको अपना नया सीएसएस, एलिमेंट > स्टाइल पैनल में दिखेगा. हालांकि, आपका नया सीएसएस पेड़ टेक्स्ट में मौजूद होता है, जिसमें बदलाव नहीं किया जा सकता या उसे क्रॉस आउट किया गया है. इसके अलावा, उसके बगल में चेतावनी या संकेत वाला आइकॉन मौजूद है.
स्टाइल पैनल में सीएसएस के बारे में जानकारी
स्टाइल पैनल, सीएसएस की कई तरह की समस्याओं की पहचान करता है और उन्हें अलग-अलग तरीके से हाइलाइट करता है.
मेल खाने वाले और मेल न खाने वाले सिलेक्टर
स्टाइल पैनल, मेल खाने वाले सिलेक्टर को सामान्य टेक्स्ट में और मेल न खाने वाले सिलेक्टर को पीले टेक्स्ट में दिखाता है.
अमान्य वैल्यू और एलान
स्टाइल पैनल क्रॉस हो जाता है और उसके बगल में 
चेतावनी वाले आइकॉन दिखाता है:
- सीएसएस प्रॉपर्टी के अमान्य या अज्ञात होने पर, सीएसएस का पूरा एलान (प्रॉपर्टी और वैल्यू).
- सिर्फ़ वह वैल्यू, जब सीएसएस प्रॉपर्टी मान्य है, लेकिन वैल्यू अमान्य है.
ओवरराइड किया गया
स्टाइल पैनल, उन प्रॉपर्टी को क्रॉस कर देता है जो कैस्केडिंग ऑर्डर के मुताबिक अन्य प्रॉपर्टी से बदल जाती हैं.
इस उदाहरण में, .youtube क्लास पर एलिमेंट का width: 300px; स्टाइल एट्रिब्यूट, width: 100% को बदल देता है.
बंद है
स्टाइल पैनल पीले टेक्स्ट में दिखता है. साथ ही, इसमें उन प्रॉपर्टी के बगल में 
के बारे में जानकारी देने वाले आइकॉन दिखते हैं जो मान्य हैं, लेकिन अन्य प्रॉपर्टी की वजह से उन पर कोई असर नहीं पड़ता है.
ये पेल प्रॉपर्टी, कैस्केडिंग ऑर्डर के बजाय, सीएसएस लॉजिक की वजह से बंद होती हैं.
इस उदाहरण में, display: block; प्रॉपर्टी, justify-content और align-items को बंद कर देती है, जो फ़्लेक्स या ग्रिड लेआउट को कंट्रोल करते हैं.
इनहेरिट किया गया और इनहेरिट नहीं किया गया
स्टाइल पैनल में, Inherited from <element-name> सेक्शन में प्रॉपर्टी की सूची होती है. ये प्रॉपर्टी, उनके डिफ़ॉल्ट इनहेरिटेंस के आधार पर तय होती हैं:
- डिफ़ॉल्ट रूप से इनहेरिट किए गए, सामान्य टेक्स्ट में होते हैं.
- डिफ़ॉल्ट रूप से, इनहेरिट नहीं किए गए टेक्स्ट पीले टेक्स्ट में होते हैं.
शॉर्टहैंड
शॉर्टहैंड (कम शब्दों में) प्रॉपर्टी की मदद से, एक साथ कई सीएसएस प्रॉपर्टी सेट की जा सकती हैं. साथ ही, इससे स्टाइलशीट को ज़्यादा आसानी से पढ़ा जा सकता है. हालांकि, ऐसी प्रॉपर्टी छोटी होने की वजह से, हो सकता है कि आपको किसी लंबी (सटीक) प्रॉपर्टी का ऐक्सेस न मिले. यह प्रॉपर्टी, शॉर्टहैंड में शामिल प्रॉपर्टी की जगह लागू हो जाती है.
स्टाइल पैनल, शॉर्टहैंड प्रॉपर्टी को 
ड्रॉप-डाउन सूचियों के तौर पर दिखाता है. इनमें वे सभी प्रॉपर्टी शामिल होती हैं जिन्हें छोटा किया गया होता है.
इस उदाहरण में, छोटा की गई चार प्रॉपर्टी में से दो प्रॉपर्टी को बदल दिया गया है.
बदलाव नहीं किया जा सकता
स्टाइल पैनल में वे प्रॉपर्टी दिखती हैं जिनमें इटैलिक टेक्स्ट में बदलाव नहीं किया जा सकता. उदाहरण के लिए, नीचे दिए गए सोर्स की सीएसएस में बदलाव नहीं किया जा सकता:
user agent stylesheet—Chrome की डिफ़ॉल्ट स्टाइलशीट.
एलिमेंट पर स्टाइल से जुड़े एचटीएमएल एट्रिब्यूट, जैसे कि ऊंचाई, चौड़ाई, रंग वगैरह. आपके पास डीओएम ट्री में उन एट्रिब्यूट में बदलाव करने का विकल्प होता है. इससे स्टाइल पैनल में सीएसएस अपडेट हो जाती है. हालांकि, एट्रिब्यूट की वैल्यू में बदलाव नहीं होता.
इस उदाहरण में,
<svg>एलिमेंट मेंheight="48"एट्रिब्यूट को50पर सेट किया गया है. इससे स्टाइल पैनल में,svg[Attributes Style]में इससे जुड़ी प्रॉपर्टी अपडेट हो जाती है.
ऐसे एलिमेंट की जांच करें जो आपकी सोच के मुताबिक नहीं है
गड़बड़ी का पता लगाने के लिए, नीचे दी गई बातों की जांच करें:
- स्टाइल पैनल के टूलटिप में, सीएसएस के दस्तावेज़ और सिलेक्टर की खास जानकारी देखें.
- कंप्यूटेड पैनल में मौजूद "फ़ाइनल" किसी एलिमेंट पर लागू किए गए सीएसएस को देखा जा सकता है. साथ ही, उस एलिमेंट से तुलना भी की जा सकती है जिसका आपने एलान किया है.
एलिमेंट > स्टाइल पैनल, सीएसएस नियमों का सटीक सेट दिखाता है, क्योंकि उन्हें अलग-अलग स्टाइलशीट में लिखा जाता है. दूसरी ओर, एलिमेंट > कंप्यूटेड पैनल की सूचियों में मौजूद सीएसएस वैल्यू को, Chrome किसी एलिमेंट को रेंडर करने के लिए इस्तेमाल करता है:
- इनहेरिटेंस से मिला सीएसएस
- कैस्केड के विजेता
- लॉन्गहैंड प्रॉपर्टी (सटीक), न कि शॉर्टहैंड (कम शब्दों में)
- कंप्यूटेड वैल्यू, जैसे कि
font-size: 70%के बजायfont-size: 14px
कंप्यूटेड पैनल में सीएसएस को समझना
कंप्यूटेड पैनल में मौजूद अलग-अलग प्रॉपर्टी को भी अलग-अलग तरीके से दिखाया जाता है.
एलान किया गया और इनहेरिट किया गया
कंप्यूटेड पैनल में, किसी भी स्टाइलशीट में तय की गई प्रॉपर्टी, सामान्य फ़ॉन्ट में शामिल की जाती हैं. इनमें एलिमेंट खुद की और इनहेरिट की गई होती हैं. इसका सोर्स देखने के लिए, उसके बगल में मौजूद 
बड़ा करें आइकॉन पर क्लिक करें.
स्टाइल पैनल में एलान वाला फ़ॉर्म देखने के लिए, बड़ी की गई प्रॉपर्टी पर कर्सर घुमाएं और ऐरो बटन 
पर क्लिक करें.
सोर्स पैनल में एलान वाला फ़ॉर्म देखने के लिए, सोर्स फ़ाइल के लिंक पर क्लिक करें.
एक से ज़्यादा सोर्स वाली प्रॉपर्टी के लिए, कंप्यूटेड पैनल में पहले कैस्केड विजेता दिखता है.
रनटाइम
कैलकुलेट किए गए पैनल में, रनटाइम के दौरान कैलकुलेट की गई प्रॉपर्टी की वैल्यू पेल टेक्स्ट में दी जाती हैं.
इस उदाहरण में, Chrome ने <ul> एलिमेंट के लिए इनकी गिनती की है:
widthअपने पिता,<div>के रिश्तेदारheight, अपने बच्चों से संबंधित दो<li>एलिमेंट है
इनहेरिट नहीं किया गया और पसंद के मुताबिक बनाया गया
कैलकुलेट किए गए पैनल में सभी प्रॉपर्टी और उनकी वैल्यू देखने के लिए, 
सभी दिखाएं को चुनें. सभी प्रॉपर्टी में ये शामिल हैं:
- पेल टेक्स्ट में, इनहेरिट न की गई प्रॉपर्टी के लिए शुरुआती वैल्यू.
- कस्टम प्रॉपर्टी—सामान्य टेक्स्ट में
--प्रीफ़िक्स के साथ. ऐसी प्रॉपर्टी डिफ़ॉल्ट रूप से इनहेरिट की जाती हैं.
इस बड़ी सूची को कैटगरी में बांटने के लिए, 
ग्रुप चुनें.
इस उदाहरण में, ऐनिमेशन में इनहेरिट न की गई प्रॉपर्टी की शुरुआती वैल्यू और सीएसएस वैरिएबल में कस्टम प्रॉपर्टी की शुरुआती वैल्यू दिखाई गई हैं.
डुप्लीकेट खोजें
किसी खास प्रॉपर्टी और उसके डुप्लीकेट की जांच करने के लिए, फ़िल्टर टेक्स्ट बॉक्स में उस प्रॉपर्टी का नाम टाइप करें. स्टाइल और कंप्यूटेड पैनल, दोनों में ऐसा किया जा सकता है.
किसी एलिमेंट के सीएसएस को खोजना और उसे फ़िल्टर करना लेख पढ़ें.
इस्तेमाल नहीं किए गए सीएसएस ढूंढें
कवरेज: इस्तेमाल नहीं किया गया JavaScript और सीएसएस ढूंढना देखें.