Chrome DevTools की इन सुविधाओं के बारे में ज़्यादा जानकारी देने के लिए, नए वर्कफ़्लो देखें में बदलाव करना होता है.
बुनियादी बातें जानने के लिए, सीएसएस देखना और उसमें बदलाव करना देखें.
कोई एलिमेंट चुनें
DevTools के एलिमेंट पैनल की मदद से, एक बार में किसी एक एलिमेंट का सीएसएस देखा या बदला जा सकता है.
स्क्रीनशॉट में, DOM ट्री में नीले रंग से हाइलाइट किया गया h1 एलिमेंट चुना गया एलिमेंट है.
दाईं ओर मौजूद एलिमेंट की स्टाइल, स्टाइल टैब में दिखती हैं. बाईं ओर मौजूद एलिमेंट
व्यूपोर्ट में हाइलाइट किया गया है, लेकिन सिर्फ़ इसलिए किया गया है, क्योंकि DOM में माउस उस पर कर्सर घुमा रहा है
पेड़.
ट्यूटोरियल के लिए एलिमेंट का सीएसएस देखना देखें.
किसी एलिमेंट को चुनने के कई तरीके हैं:
- अपने व्यूपोर्ट में, एलिमेंट पर राइट क्लिक करें और जांच करें चुनें.
- DevTools में, कोई एलिमेंट चुनें पर क्लिक करें
इसके अलावा, Command+Shift+C (Mac) दबाएं या
कंट्रोल+Shift+C (Windows, Linux) के लिए. इसके बाद, यहां मौजूद एलिमेंट पर क्लिक करें
व्यूपोर्ट. - DevTools में, DOM ट्री में मौजूद एलिमेंट पर क्लिक करें.
- DevTools में, कंसोल में
document.querySelector('p')जैसी क्वेरी चलाएं. इसके बाद, नतीजा चुनकर, एलिमेंट पैनल में दिखाएं को चुनें.
सीएसएस देखें
एलिमेंट का इस्तेमाल करें > सीएसएस के नियम देखने और सीएसएस से जुड़ी समस्याओं का पता लगाने के लिए, स्टाइल और कंप्यूट किए गए टैब.
लिंक की मदद से नेविगेट करें
स्टाइल टैब, कई जगहों पर मौजूद लिंक को अन्य जगहों के लिए दिखाता है. इसमें इनके अलावा, और भी जगहें शामिल हो सकती हैं:
- सीएसएस नियमों के बगल में मौजूद, स्टाइल शीट और सीएसएस सोर्स के बगल में. ऐसे लिंक Sources पैनल खोलते हैं. अगर स्टाइल शीट को छोटा किया गया है, तो छोटा की गई फ़ाइल को पढ़ने लायक बनाना लेख पढ़ें.
- इससे इनहेरिट किया गया ... सेक्शन में, पैरंट एलिमेंट में.
var()कॉल में, कस्टम प्रॉपर्टी के एलान के लिए.animationशॉर्टहैंड प्रॉपर्टी में,@keyframesतक.- दस्तावेज़ के टूलटिप में मौजूद लिंक पर ज़्यादा जानें.
- और ज़्यादा.
यहां उनमें से कुछ को हाइलाइट किया गया है:
लिंक का स्टाइल अलग हो सकता है. अगर आप तय नहीं कर पा रहे हैं कि क्या कोई लिंक है, तो यह जानने के लिए उस पर क्लिक करें.
सीएसएस दस्तावेज़, खासियत, और कस्टम प्रॉपर्टी वैल्यू के साथ टूलटिप देखें
एलिमेंट > स्टाइल, खास एलिमेंट पर कर्सर घुमाने पर, टूलटिप को काम की जानकारी के साथ दिखाती है.
सीएसएस दस्तावेज़ देखें
सीएसएस के छोटे ब्यौरे वाला टूलटिप देखने के लिए, स्टाइल टैब में प्रॉपर्टी के नाम पर कर्सर घुमाएं.
इस प्रॉपर्टी में MDN सीएसएस रेफ़रंस पर जाने के लिए, ज़्यादा जानें पर क्लिक करें.
टूलटिप बंद करने के लिए, 
न दिखाएं को चुनें.
उन्हें वापस चालू करने के लिए, 
सेटिंग > प्राथमिकताएं > एलिमेंट > 
सीएसएस के दस्तावेज़ का टूलटिप दिखाएं.
चुनने वाले की खासियत देखें
सिलेक्टर पर कर्सर घुमाकर, उसकी खासियत के साथ टूलटिप देखें.
कस्टम प्रॉपर्टी की वैल्यू देखना
टूलटिप में किसी --custom-property की वैल्यू देखने के लिए, उस पर कर्सर घुमाएं.
अमान्य, ओवरराइड की गई, बंद की गई, और अन्य सीएसएस देखें
स्टाइल टैब कई तरह की सीएसएस से जुड़ी समस्याओं की पहचान करता है और उन्हें अलग-अलग तरीके से हाइलाइट करता है.
स्टाइल टैब में सीएसएस को समझना लेख पढ़ें.
सिर्फ़ वह सीएसएस देखना जिसे असल में एलिमेंट पर लागू किया गया है
स्टाइल टैब में, किसी एलिमेंट पर लागू होने वाले सभी नियम दिखते हैं. इनमें, वे एलान भी शामिल हैं जो बदल दिए गए हैं. अगर आपको बदले गए एलानों में दिलचस्पी नहीं है, तो कंप्यूट किए गए टैब का उपयोग करके केवल उस CSS को देख सकते हैं, जिसे असल में एलीमेंट पर लागू किया जा रहा है.
- कोई एलिमेंट चुनें.
- एलिमेंट पैनल में, कंप्यूट किए गए टैब पर जाएं.
सभी प्रॉपर्टी देखने के लिए, सभी दिखाएं चेकबॉक्स पर सही का निशान लगाएं.
कंप्यूट किए गए टैब में सीएसएस के बारे में जानकारी लेख पढ़ें.
वर्णमाला के क्रम में सीएसएस प्रॉपर्टी देखें
कंप्यूट किए गए टैब का इस्तेमाल करें. सिर्फ़ वह सीएसएस देखना जो असल में एलिमेंट पर लागू किया गया है.
इनहेरिट की गई सीएसएस प्रॉपर्टी देखें
कंप्यूट किए गए टैब में, सभी दिखाएं चेकबॉक्स को चुनें. सिर्फ़ उस सीएसएस को देखें जो असल में है किसी एलिमेंट पर लागू किया जाता है.
इसके अलावा, स्टाइल टैब को स्क्रोल करें और Inherited from <element_name> नाम के सेक्शन ढूंढें.
सीएसएस के नियम देखें
'नियम' सीएसएस स्टेटमेंट होते हैं, जिनकी मदद से सीएसएस के व्यवहार को कंट्रोल किया जा सकता है. एलिमेंट > स्टाइल, खास सेक्शन में इन नियमों को दिखाती है:
@property नियम देखें
@property सीएसएस ऐट रूल की मदद से, सीएसएस कस्टम प्रॉपर्टी को साफ़ तौर पर तय किया जा सकता है. साथ ही, JavaScript का इस्तेमाल किए बिना उन्हें स्टाइल शीट में रजिस्टर किया जा सकता है.
स्टाइल टैब में ऐसी प्रॉपर्टी के नाम पर कर्सर घुमाएं. इससे आपको प्रॉपर्टी की वैल्यू, डिस्क्रिप्टर, और स्टाइल टैब में सबसे नीचे मौजूद, छोटे किए जा सकने वाले @property सेक्शन में इसके रजिस्ट्रेशन का लिंक दिखेगा.
@property नियम में बदलाव करने के लिए, उसके नाम या मान पर दो बार क्लिक करें.
@supports नियम देखें
अगर किसी एलिमेंट पर @supports सीएसएस के नियम लागू किए गए हैं, तो स्टाइल टैब आपको दिखाता है. उदाहरण के लिए, इस एलिमेंट की जांच करें:
अगर आपके ब्राउज़र में lab() फ़ंक्शन काम करता है, तो एलिमेंट का रंग हरा है, नहीं तो यह बैंगनी रंग का है.
@scope नियम देखें
अगर किसी एलिमेंट पर सीएसएस @scope के नियम लागू किए गए हैं, तो स्टाइल टैब आपको इन्हें दिखाता है.
@scope के नए नियम, सीएसएस कैस्केडिंग और इनहेरिटेंस लेवल 6 की खास जानकारी का हिस्सा हैं. इन नियमों की मदद से, सीएसएस स्टाइल का स्कोप किया जा सकता है. दूसरे शब्दों में कहें, तो खास एलिमेंट पर स्टाइल को साफ़ तौर पर लागू किया जा सकता है.
नीचे दी गई झलक में @scope नियम देखें:
- झलक में कार्ड पर मौजूद टेक्स्ट की जांच करें.
- स्टाइल टैब पर,
@scopeनियम खोजें.
इस उदाहरण में, card क्लास वाले एलिमेंट में मौजूद सभी <p> एलिमेंट के लिए, @scope नियम ग्लोबल सीएसएस background-color एलान को बदल देता है.
@scope नियम में बदलाव करने के लिए, उस पर दो बार क्लिक करें.
@font-palette-values नियम देखें
@font-palette-values सीएसएस के नियम की मदद से, font-palette प्रॉपर्टी की डिफ़ॉल्ट वैल्यू को पसंद के मुताबिक बनाया जा सकता है. एलिमेंट > स्टाइल, इस नियम को खास सेक्शन में दिखाती है.
अगली झलक में @font-palette-values सेक्शन देखें:
- झलक में टेक्स्ट की दूसरी लाइन की जांच करें.
- स्टाइल में,
@font-palette-valuesसेक्शन ढूंढें.
इस उदाहरण में, --New फ़ॉन्ट पैलेट की वैल्यू, रंगीन फ़ॉन्ट के डिफ़ॉल्ट फ़ॉन्ट की वैल्यू बदल गई हैं.
अपनी पसंद के मुताबिक वैल्यू में बदलाव करने के लिए, उन पर दो बार क्लिक करें.
@position-try नियम देखें
@position-try सीएसएस नियम और position-try-options प्रॉपर्टी की मदद से, एलिमेंट के लिए ऐंकर पोज़िशन तय की जा सकती है. ज़्यादा जानने के लिए, पेश है सीएसएस ऐंकर पोज़िशनिंग एपीआई लेख पढ़ें.
एलिमेंट > स्टाइल इन समस्याओं को ठीक करती है और इन्हें लिंक करती है:
@position-try --nameप्रॉपर्टी के लिए खास तौर पर बनाए गए सेक्शन के लिएposition-try-optionsप्रॉपर्टी की वैल्यू.popovertargetएट्रिब्यूट वाले संबंधित एलिमेंट मेंposition-anchorप्रॉपर्टी की वैल्यू औरanchor()आर्ग्युमेंट.
अगली झलक में position-try-options वैल्यू और @position-try सेक्शन की जांच करें:
popover के साथ ऐंकर का इस्तेमाल करने वाला डेमो- झलक में, सबमेन्यू खोलें. इसका मतलब है कि पहले आपका खाता और फिर स्टोरफ़्रंट पर क्लिक करें.
- झलक में
id="submenu"वाले एलिमेंट की जांच करें. - स्टाइल में जाकर,
position-try-optionsप्रॉपर्टी ढूंढें और उसकी--bottomवैल्यू पर क्लिक करें. स्टाइल टैब, आपको इससे जुड़े@position-tryसेक्शन पर ले जाता है. position-anchorवैल्यू वाले लिंक या उसीanchor()आर्ग्युमेंट पर क्लिक करें. एलिमेंट पैनल में उससे जुड़ेpopovertargetएट्रिब्यूट वाले एलिमेंट को चुना जाता है और स्टाइल टैब एलिमेंट का सीएसएस दिखाता है.
वैल्यू में बदलाव करने के लिए, उन पर दो बार क्लिक करें.
एलिमेंट का बॉक्स मॉडल देखना
किसी एलिमेंट का बॉक्स मॉडल देखने के लिए, स्टाइल टैब पर जाएं. इसके बाद, ऐक्शन बार में 
साइडबार दिखाएं बटन पर क्लिक करें.
वैल्यू बदलने के लिए, उस पर दो बार क्लिक करें.
किसी एलिमेंट के सीएसएस को खोजना और फ़िल्टर करना
किसी सीएसएस को खोजने के लिए, स्टाइल और कंप्यूट किए गए टैब पर फ़िल्टर बॉक्स का इस्तेमाल करें प्रॉपर्टी या वैल्यू.
कंप्यूट किए गए टैब में इनहेरिट की गई प्रॉपर्टी खोजने के लिए, सभी दिखाएं चेकबॉक्स को चुनें.
कंप्यूट किए गए टैब पर जाने के लिए, फ़िल्टर की गई प्रॉपर्टी को ग्रुप चुनें और छोटी की जा सकने वाली कैटगरी में रखें.
फ़ोकस किए गए पेज को एम्युलेट करें
फ़ोकस को पेज से DevTools पर स्विच करने पर, फ़ोकस से ट्रिगर होने पर कुछ ओवरले एलिमेंट अपने-आप छिप जाते हैं. उदाहरण के लिए, ड्रॉप-डाउन सूचियां, मेन्यू या तारीख चुनने वाला टूल. check_box फ़ोकस किए गए पेज को एम्युलेट करें विकल्प की मदद से, आप ऐसे एलिमेंट को इस तरह डीबग कर सकते हैं जैसे वह फ़ोकस में है.
इस डेमो पेज पर फ़ोकस किए गए पेज को एम्युलेट करके देखें:
- इनपुट एलिमेंट पर फ़ोकस करें. उसके नीचे एक और एलिमेंट दिखता है.
- DevTools खोलें. DevTools विंडो अब पेज के बजाय फ़ोकस में है. इसलिए, एलिमेंट फिर से गायब हो जाता है.
- एलिमेंट में > स्टाइल पर क्लिक करें, :hov पर क्लिक करें, check_box फ़ोकस किए गए पेज को एम्युलेट करें पर सही का निशान लगाएं, और पक्का करें कि इनपुट एलिमेंट चुना गया है. अब इसके नीचे मौजूद एलिमेंट की जांच की जा सकती है.
आपको यह विकल्प रेंडरिंग पैनल में भी मिल सकता है.
pseudo-class को टॉगल करें
सूडो-क्लास को टॉगल करने के लिए, जैसे कि :active, :focus, :focus-within, :target, :hover, :visited या focus-visible:
- कोई एलिमेंट चुनें.
- एलिमेंट पैनल पर, स्टाइल टैब पर जाएं.
- :hov पर क्लिक करें.
- उस pseudo-class को चुनें जिसे आपको चालू करना है.
व्यूपोर्ट में, यह देखा जा सकता है कि DevTools background-color एलान को एलिमेंट पर लागू करता है, भले ही एलिमेंट पर असल में कर्सर न घुमाया गया हो.
इंटरैक्टिव ट्यूटोरियल के लिए, क्लास में स्यूडोस्टेट जोड़ना लेख पढ़ें.
इनहेरिट किए गए हाइलाइट स्यूडो-एलिमेंट देखें
सूडो-एलिमेंट की मदद से, एलिमेंट के खास हिस्सों को स्टाइल किया जा सकता है. हाइलाइट साइडो एलिमेंट, दस्तावेज़ के ऐसे हिस्से होते हैं जिनमें "चुना गया" होता है स्टेटस दिखाया जाता है और उन्हें "हाइलाइट किया गया" के तौर पर स्टाइल किया जाता है का इस्तेमाल करें. उदाहरण के लिए, ऐसे सूडो एलिमेंट ::selection, ::spelling-error, ::grammar-error, और ::highlight हैं.
जैसा कि खास जानकारी में बताया गया है, जब एक से ज़्यादा स्टाइल में अंतर होता है, तो कैस्केड की वजह से सबसे अच्छी स्टाइल तय होती है.
नियमों की इनहेरिटेंस और प्राथमिकता को बेहतर तरीके से समझने के लिए, इनहेरिट किए गए हाइलाइट स्यूडो-एलिमेंट को देखा जा सकता है:
नीचे दिए गए टेक्स्ट की जांच करें.
मुझे अपने माता-पिता के हाइलाइट pseudo-element की स्टाइल इनहेरिट की गई है. मेरा नाम चुनें!ऊपर दिए गए टेक्स्ट का कोई हिस्सा चुनें.
स्टाइल टैब में, नीचे की ओर स्क्रोल करके
Inherited from ::selection pseudo of...सेक्शन ढूंढें.
कैस्केड लेयर देखें
कैस्केड लेयर की मदद से, सीएसएस फ़ाइलों को बेहतर तरीके से कंट्रोल किया जा सकता है. इससे, स्टाइल की खासियत के विवादों से बचा जा सकता है. यह बड़े कोड बेस, डिज़ाइन सिस्टम, और ऐप्लिकेशन में तीसरे पक्ष की स्टाइल को मैनेज करते समय काम आता है.
कैस्केड लेयर देखने के लिए, अगले एलिमेंट की जांच करें और एलिमेंट खोलें > स्टाइल.
स्टाइल टैब में, कैस्केड की तीन लेयर और उनकी स्टाइल देखें: page, component, और base.
लेयर का ऑर्डर देखने के लिए, लेयर के नाम पर क्लिक करें या 
सीएसएस लेयर व्यू को टॉगल करें बटन पर क्लिक करें.
page लेयर की खासियत सबसे ज़्यादा है, इसलिए एलिमेंट का बैकग्राउंड हरा है.
प्रिंट मोड में कोई पेज देखना
प्रिंट मोड में किसी पेज को देखने के लिए:
- Command मेन्यू खोलें.
Renderingटाइप करना शुरू करें औरShow Renderingचुनें.- CSS Media ड्रॉप-डाउन के लिए, प्रिंट करें को चुनें.
कवरेज टैब में जाकर, इस्तेमाल की गई और इस्तेमाल नहीं की गई सीएसएस देखना
कवरेज टैब में यह देखा जा सकता है कि पेज, असल में किस सीएसएस का इस्तेमाल करता है.
- Command+Shift+P (Mac) दबाएं या Control+Shift+P (Windows, Linux, ChromeOS) और DevTools के लिए फ़ोकस में रखा गया है.
coverageटाइप करना शुरू करें.
कवरेज दिखाएं को चुनें. इसके बाद, कवरेज टैब दिखेगा.
फिर से लोड करें पर क्लिक करें.
पेज फिर से लोड होने पर और कवरेज टैब से यह जानकारी मिलती है कि सीएसएस और JavaScript) कितनी
का उपयोग करता है.
हरा रंग इस्तेमाल किए गए सीएसएस को दिखाता है. लाल रंग, इस्तेमाल नहीं किए गए सीएसएस को दिखाता है.
किसी सीएसएस फ़ाइल पर क्लिक करके, आप यह देख सकते हैं कि वह ऊपर दी गई झलक में किस सीएसएस का इस्तेमाल करती है.
स्क्रीनशॉट में,
devsite-google-blue.cssकी 55 से 57 और 65 से 67 लाइनें इस्तेमाल नहीं की गई हैं. वहीं, 59 से 63 की लाइनों का इस्तेमाल किया गया है.
ज़बरदस्ती प्रिंट पूर्वावलोकन मोड
DevTools को प्रिंट झलक मोड में ज़बरदस्ती चालू करना देखें.
सीएसएस को कॉपी करें
स्टाइल टैब में मौजूद सिंगल ड्रॉप-डाउन मेन्यू से, सीएसएस के नियम, एलान, प्रॉपर्टी, वैल्यू को अलग-अलग कॉपी किया जा सकता है
इसके अलावा, JavaScript सिंटैक्स में भी सीएसएस प्रॉपर्टी को कॉपी किया जा सकता है. CSS-in-JS लाइब्रेरी का इस्तेमाल करने पर, यह विकल्प इस्तेमाल करना आसान है.
सीएसएस को कॉपी करने के लिए:
- कोई एलिमेंट चुनें.
- एलिमेंट में > स्टाइल टैब पर जाकर, किसी सीएसएस प्रॉपर्टी पर राइट क्लिक करें.
ड्रॉप-डाउन मेन्यू से, इनमें से कोई विकल्प चुनें:
- एलान की जानकारी कॉपी करें. सीएसएस सिंटैक्स में प्रॉपर्टी और उसकी वैल्यू कॉपी की जाती है:
css property: value; - प्रॉपर्टी कॉपी करें. सिर्फ़
propertyनाम कॉपी किया जाता है. - वैल्यू कॉपी करें. सिर्फ़
valueकॉपी करता है. - नियम कॉपी करें. पूरे सीएसएस नियम को कॉपी करता है:
css selector[, selector] { property: value; property: value; ... } - एलान को JS के तौर पर कॉपी करें. प्रॉपर्टी और उसकी वैल्यू को JavaScript सिंटैक्स में कॉपी करता है:
js propertyInCamelCase: 'value' - सभी एलान कॉपी करें. सीएसएस के नियम में सभी प्रॉपर्टी और उनकी वैल्यू कॉपी की जाती है:
css property: value; property: value; ... सभी एलानों को JS के तौर पर कॉपी करें. सभी प्रॉपर्टी और उनकी वैल्यू को JavaScript सिंटैक्स में कॉपी करता है: ```js प्रॉपर्टीInCamelCase: 'वैल्यू', प्रॉपर्टीInCamelCase: 'वैल्यू', ...
सीएसएस में किए गए सभी बदलावों को कॉपी करें. सभी एलानों में, स्टाइल टैब में किए गए बदलावों को कॉपी किया जाता है.
कंप्यूट की गई वैल्यू देखें. यह आपको कंप्यूट किए गए टैब पर ले जाता है.
- एलान की जानकारी कॉपी करें. सीएसएस सिंटैक्स में प्रॉपर्टी और उसकी वैल्यू कॉपी की जाती है:
सीएसएस बदलें
इस सेक्शन में एलिमेंट में जाकर, सीएसएस को बदलने के सभी तरीकों की सूची दी गई है > स्टाइल.
इसके अलावा, आपके पास ये विकल्प भी हैं:
- हर पेज लोड में सीएसएस को बदलना.
- किसी फ़ाइल फ़ोल्डर में, उस सीएसएस को अपने लोकल सोर्स में सेव करें जिसमें बदलाव किया गया है.
किसी एलिमेंट में सीएसएस का एलान जोड़ना
एलानों के क्रम से एलिमेंट के स्टाइल पर असर पड़ता है. इसलिए, आपके पास अलग-अलग तरीके:
- इनलाइन एलान जोड़ें. यह एलिमेंट के एचटीएमएल में,
styleएट्रिब्यूट जोड़ने के बराबर है. - स्टाइल रूल में एलान जोड़ें.
आपको किस वर्कफ़्लो का इस्तेमाल करना चाहिए? ज़्यादातर स्थितियों में, हो सकता है कि आप इनलाइन का इस्तेमाल करना चाहें एलान का वर्कफ़्लो. बाहरी एलान की तुलना में इनलाइन एलानों की खासियत ज़्यादा होती है. इसलिए, इनलाइन एलानों की मदद से वर्कफ़्लो यह पक्का करता है कि एलिमेंट में आपकी उम्मीद के मुताबिक़ बदलाव करें. चुनने वाला देखें खासियत के बारे में ज़्यादा जानकारी के लिए, टाइप.
अगर किसी एलिमेंट के स्टाइल को डीबग किया जा रहा है और आपको खास तौर पर यह टेस्ट करना होगा कि क्या होता है एलान के बारे में अलग-अलग जगहों पर बताया गया है, तो दूसरा वर्कफ़्लो इस्तेमाल करें.
इनलाइन एलान जोड़ें
इनलाइन एलान जोड़ने के लिए:
- कोई एलिमेंट चुनें.
- स्टाइल टैब में, element.style सेक्शन के ब्रैकेट के बीच क्लिक करें. कर्सर फ़ोकस करता है, जिससे आपको टेक्स्ट डालने की सुविधा मिलती है.
- प्रॉपर्टी का नाम डालें और Enter दबाएं.
उस प्रॉपर्टी के लिए कोई मान्य वैल्यू डालें और Enter दबाएं. DOM ट्री में, ये काम किए जा सकते हैं देखें कि एलिमेंट में
styleएट्रिब्यूट जोड़ा गया है.
स्क्रीनशॉट में, चुने गए एलिमेंट पर
margin-topऔरbackground-colorप्रॉपर्टी लागू की गई हैं. डीओएम ट्री में, एलिमेंट केstyleएट्रिब्यूट में दिखने वाले एलान देखे जा सकते हैं.
स्टाइल के नियम में एलान जोड़ें
मौजूदा स्टाइल नियम में एलान जोड़ने के लिए:
- कोई एलिमेंट चुनें.
- स्टाइल टैब में, उस स्टाइल नियम के ब्रैकेट के बीच में क्लिक करें जिसमें आपको जोड़ना है के बारे में नहीं है. कर्सर फ़ोकस करने के बाद, उसमें टेक्स्ट डाल सकता है.
- प्रॉपर्टी का नाम डालें और Enter दबाएं.
- उस प्रॉपर्टी के लिए कोई मान्य वैल्यू डालें और Enter दबाएं.
स्क्रीनशॉट पर, स्टाइल नियम के हिसाब से नया border-bottom-style:groove एलान दिखता है.
एलान का नाम या वैल्यू बदलना
किसी एलान के नाम या वैल्यू में बदलाव करने के लिए, उस पर दो बार क्लिक करें. संख्यात्मक मान को इससे बदलें किसी वैल्यू को तेज़ी से बढ़ाने या घटाने के लिए, कीबोर्ड शॉर्टकट: 10 या 100 यूनिट.
कीबोर्ड शॉर्टकट की मदद से, गिने जा सकने वाले वैल्यू बदलें
किसी एलान की तय संख्या (जैसे कि font-size) में बदलाव करते समय, वैल्यू को एक तय रकम से बढ़ाने के लिए, यहां दिए गए कीबोर्ड शॉर्टकट का इस्तेमाल किया जा सकता है:
- Option+Up (Mac) या Alt+Up (Windows, Linux) पर 0.1 की बढ़ोतरी होगी.
- वैल्यू को 1 से बदलने के लिए ज़्यादा या अगर मौजूदा वैल्यू -1 और 1 के बीच है, तो वैल्यू 0.1 से बदलने के लिए.
- 10 बढ़ाने के लिए Shift+Up दबाएं.
- Shift+Command+Up (Mac) या Control+Shift+Page Up (Windows, Linux) पर क्लिक करें.
विज्ञापन को कम करने से भी काम होता है. बस पहले बताए गए Up के हर इंस्टेंस को इससे बदलें डाउन ऐरो.
लंबाई की वैल्यू बदलें
पॉइंटर का इस्तेमाल करके, लंबाई वाली किसी भी प्रॉपर्टी को बदला जा सकता है. जैसे, चौड़ाई, ऊंचाई, पैडिंग (जगह), मार्जिन या बॉर्डर.
लंबाई की इकाई बदलने के लिए:
- यूनिट के नाम पर कर्सर घुमाएं और देखें कि वह अंडरलाइन है.
ड्रॉप-डाउन से कोई इकाई चुनने के लिए इकाई के नाम पर क्लिक करें.
लंबाई की वैल्यू बदलने के लिए:
- यूनिट वैल्यू पर कर्सर घुमाएं और देखें कि आपका पॉइंटर, दो सिर वाले हॉरिज़ॉन्टल ऐरो में बदल गया है.
वैल्यू को बढ़ाने या घटाने के लिए, हॉरिज़ॉन्टल तरीके से खींचें और छोड़ें.
वैल्यू को 10 तक घटाने या बढ़ाने के लिए, खींचते समय Shift को दबाकर रखें.
किसी एलिमेंट में क्लास जोड़ना
किसी एलिमेंट में क्लास जोड़ने के लिए:
- डीओएम ट्री में एलिमेंट चुनें.
- .cls पर क्लिक करें.
- नई क्लास जोड़ें बॉक्स में क्लास का नाम डालें.
- Enter दबाएं.
हल्के और गहरे रंग वाली थीम की प्राथमिकताओं को एम्युलेट करें. साथ ही, गहरे रंग वाला मोड अपने-आप चालू होने की सुविधा चालू करें
गहरे रंग वाले मोड के अपने-आप चालू होने वाले मोड को टॉगल करने या उपयोगकर्ता की हल्के या गहरे रंग वाली थीम को आज़माने के लिए:
- एलिमेंट पर > स्टाइल टैब पर जाकर,
रेंडरिंग के सामान्य एम्युलेशन को टॉगल करें पर क्लिक करें.
ड्रॉप-डाउन सूची से इनमें से कोई एक विकल्प चुनें:
- prefers-color-scheme: light. इससे पता चलता है कि उपयोगकर्ता को हल्के रंग वाली थीम पसंद है.
- prefers-color-scheme: डार्क. इससे पता चलता है कि उपयोगकर्ता को गहरे रंग वाली थीम पसंद है.
- गहरे रंग वाला मोड अपने-आप चालू होने की सुविधा. इससे आपका पेज गहरे रंग वाले मोड में दिखता है. भले ही, आपने इसे लागू न किया हो. इसके अलावा, यह
prefers-color-schemeकोdarkपर अपने-आप सेट करता है.
यह ड्रॉप-डाउन, सीएसएस मीडिया सुविधा को बेहतर बनाएं prefers-color-scheme और रेंडरिंग टैब के अपने-आप गहरे रंग वाले मोड को चालू करने के विकल्पों का शॉर्टकट है.
क्लास को टॉगल करें
किसी एलिमेंट पर क्लास को चालू या बंद करने के लिए:
- डीओएम ट्री में एलिमेंट चुनें.
- एलिमेंट क्लास सेक्शन खोलें. एलिमेंट में क्लास जोड़ना देखें. नया जोड़ें क्लास बॉक्स में वे सभी क्लास हैं जिन्हें इस एलिमेंट पर लागू किया जा रहा है.
- आपको जिस क्लास को चालू या बंद करना है उसके बगल में मौजूद चेकबॉक्स को टॉगल करें.
स्टाइल का नियम जोड़ें
नया स्टाइल नियम जोड़ने के लिए:
- कोई एलिमेंट चुनें.
- स्टाइल का नया नियम पर क्लिक करें
. DevTools एक बार में
element.style नियम के नीचे नया नियम हो सकता है.
स्क्रीनशॉट पर, स्टाइल का नया नियम पर क्लिक करने के बाद, DevTools h1.devsite-page-title स्टाइल नियम जोड़ देता है.
वह स्टाइल शीट चुनें, जिसमें नियम जोड़ना है
स्टाइल का नया नियम जोड़ते समय, स्टाइल का नया नियम पर क्लिक करके रखें
कौनसी स्टाइल शीट चुनने के लिए 
ताकि स्टाइल का नियम जोड़ा जा सके.
एलान को टॉगल करें
किसी एक एलान को चालू या बंद करने के लिए:
- कोई एलिमेंट चुनें.
- स्टाइल टैब में, एलान के बारे में बताने वाले नियम पर कर्सर घुमाएं. इसके बाद चेकबॉक्स दिखते हैं नीति का पालन करना होगा.
- एलान के बगल में मौजूद चेकबॉक्स को चुनें या उससे सही का निशान हटाएं. किसी एलान को मिटाने पर, DevTools ईमेल को यह बताने के लिए काट देता है कि यह अब सक्रिय नहीं है.
स्क्रीनशॉट में, चुने गए एलिमेंट के लिए color प्रॉपर्टी टॉगल बंद है.
ऐनिमेशन के दौरान ::view-transition pseudo-elements में बदलाव करें
इससे जुड़ा सेक्शन ऐनिमेशन में देखें.
ज़्यादा जानकारी के लिए, View Transits API की मदद से आसान और आसान ट्रांज़िशन देखें.
ग्रिड एडिटर की मदद से, ग्रिड में मौजूद आइटम और उनके कॉन्टेंट को अलाइन करें
इससे जुड़ा सेक्शन, सीएसएस ग्रिड की जांच करें में देखें.
कलर पिकर की मदद से रंग बदलें
कलर पिकर की मदद से, एचडी और नॉन-एचडी कलर की जांच करना और उन्हें डीबग करना लेख पढ़ें.
ऐंगल क्लॉक की मदद से ऐंगल की वैल्यू बदलें
एंगल क्लॉक, सीएसएस प्रॉपर्टी की वैल्यू में <angle> को बदलने के लिए जीयूआई देता है.
एंगल घड़ी खोलने के लिए:
- एंगल डिक्लेरेशन वाला एलिमेंट चुनें.
स्टाइल टैब में, वह
transformयाbackgroundएलान ढूंढें जिसमें आपको बदलाव करना है. ऐंगल की वैल्यू के बगल में मौजूद, कोण की झलक वाले बॉक्स पर क्लिक करें.
-5degऔर0.25turnकी बाईं ओर मौजूद छोटी घड़ियां, ऐंगल की झलक दिखाती हैं.कोण घड़ी खोलने के लिए झलक पर क्लिक करें.
कोण घड़ी वाले गोले पर क्लिक करके कोण की वैल्यू बदलें या माउस को स्क्रोल करके ऐंगल की वैल्यू को 1 से बढ़ाएं / घटाएं.
ऐंगल की वैल्यू बदलने के लिए, और भी कीबोर्ड शॉर्टकट उपलब्ध हैं. स्टाइल पैनल में ज़्यादा जानकारी पाएं कीबोर्ड शॉर्टकट.
शैडो एडिटर की मदद से, बॉक्स और टेक्स्ट शैडो को बदलना
शैडो एडिटर, text-shadow और box-shadow सीएसएस एलानों को बदलने के लिए जीयूआई उपलब्ध कराता है.
शैडो एडिटर की मदद से शैडो बदलने के लिए:
शैडो डिक्लेयरेशन वाला एलिमेंट चुनें. उदाहरण के लिए, अगला एलिमेंट चुनें.
स्टाइल टैब में,
text-shadowयाbox-shadowएलान के बगल में शैडो
आइकॉन ढूंढें.
शैडो एडिटर खोलने के लिए शैडो आइकॉन पर क्लिक करें.
शैडो की प्रॉपर्टी बदलें:
- टाइप (सिर्फ़
box-shadowके लिए). आउटसेट या इनसेट चुनें. - X और Y ऑफ़सेट. नीले बिंदु को खींचें या वैल्यू बताएं.
- धुंधला करें. स्लाइडर खींचें या कोई वैल्यू तय करें.
- स्प्रेड (सिर्फ़
box-shadowके लिए). स्लाइडर खींचें या कोई वैल्यू तय करें.
- टाइप (सिर्फ़
एलिमेंट पर लागू किए गए बदलावों को देखें.
ईज़िंग एडिटर की मदद से, ऐनिमेशन और ट्रांज़िशन टाइम में बदलाव करें
ईज़िंग एडिटर, transition-timing-function और animation-timing-function की वैल्यू बदलने के लिए एक जीयूआई उपलब्ध कराता है.
ईज़िंग एडिटर खोलने के लिए:
- टाइमिंग फ़ंक्शन की जानकारी वाला एलिमेंट चुनें, जैसे कि इस पेज पर
<body>एलिमेंट. - स्टाइल टैब में,
transition-timing-function,animation-timing-functionएलान याtransitionशॉर्टहैंड प्रॉपर्टी के बगल में मौजूद, बैंगनी रंग का
आइकॉन ढूंढें.
- ईज़िंग एडिटर खोलने के लिए, आइकॉन पर क्लिक करें:
टाइमिंग में बदलाव करने के लिए, प्रीसेट का इस्तेमाल करना
समय को एक क्लिक से अडजस्ट करने के लिए, ईज़िंग एडिटर में मौजूद प्रीसेट का इस्तेमाल करें:
- ईज़िंग एडिटर में, कीवर्ड वैल्यू सेट करने के लिए, किसी एक पिकर बटन पर क्लिक करें:
- लीनियर
- आसानी से करना
- ईज़-इन
- आसानी से ठीक करना
- लीनियर
प्रीसेट स्विचर में, नीचे दिए गए प्रीसेट में से कोई एक चुनने के लिए
या 
बटन क्लिक करें:- लीनियर प्रीसेट:
elastic,bounceयाemphasized. - क्यूबिक बेज़ियर प्रीसेट:
- लीनियर प्रीसेट:
| समय कीवर्ड | प्रीसेट | क्यूबिक बेज़ियर |
|---|---|---|
| ease-in-out | इन आउट, साइन | cubic-bezier(0.45, 0.05, 0.55, 0.95) |
| इन आउट, क्वाड्रेटिक | cubic-bezier(0.46, 0.03, 0.52, 0.96) |
|
| इन आउट, क्यूबिक | cubic-bezier(0.65, 0.05, 0.36, 1) |
|
| तेज़ी से, धीमी रफ़्तार से | cubic-bezier(0.4, 0, 0.2, 1) |
|
| बाहर, वापस | cubic-bezier(0.68, -0.55, 0.27, 1.55) |
|
| ease-in | इन, साइन | cubic-bezier(0.47, 0, 0.75, 0.72) |
| इन, क्वाड्रेटिक | cubic-bezier(0.55, 0.09, 0.68, 0.53) |
|
| इन, क्यूबिक | cubic-bezier(0.55, 0.06, 0.68, 0.19) |
|
| अंदर, वापस | cubic-bezier(0.6, -0.28, 0.74, 0.05) |
|
| फ़ास्ट आउट, लीनियर इन | cubic-bezier(0.4, 0, 1, 1) |
|
| ease-out | आउट, साइन | cubic-bezier(0.39, 0.58, 0.57, 1) |
| आउट, क्वाड्रेटिक | cubic-bezier(0.25, 0.46, 0.45, 0.94) |
|
| आउट, क्यूबिक | cubic-bezier(0.22, 0.61, 0.36, 1) |
|
| लीनियर आउट, स्लो इन | cubic-bezier(0, 0, 0.2, 1) |
|
| बाहर, वापस | cubic-bezier(0.18, 0.89, 0.32, 1.28) |
पसंद के मुताबिक समय कॉन्फ़िगर करना
टाइम फ़ंक्शन के लिए कस्टम वैल्यू सेट करने के लिए, लाइनों पर दिए गए कंट्रोल पॉइंट का इस्तेमाल करें:
लीनियर फ़ंक्शन के लिए, लाइन पर कहीं भी क्लिक करके, कंट्रोल पॉइंट जोड़ें और उसे खींचें. बिंदु निकालने के लिए दो बार क्लिक करें.
क्यूबिक बेज़ियर फ़ंक्शन के लिए, कंट्रोल पॉइंट में से एक को खींचें.
कोई भी बदलाव करने पर, एडिटर के सबसे ऊपर मौजूद झलक में बॉल ऐनिमेशन ट्रिगर हो जाता है.
(प्रयोग के तौर पर) सीएसएस में किए गए बदलावों को कॉपी करें
यह एक्सपेरिमेंट चालू होने पर, स्टाइल टैब आपके सीएसएस में हुए बदलावों को हरे रंग से हाइलाइट करता है.
सीएसएस के एलान वाले किसी एक बदलाव को कॉपी करने के लिए, हाइलाइट किए गए एलान पर कर्सर घुमाएं और 
कॉपी करें बटन पर क्लिक करें.
सीएसएस में किए गए सभी बदलावों को एक साथ कॉपी करने के लिए, किसी भी एलान पर राइट क्लिक करें. इसके बाद, सीएसएस में किए गए सभी बदलावों को कॉपी करें को चुनें.
इसके अलावा, बदलाव टैब से, किए गए बदलावों को ट्रैक किया जा सकता है.