Chrome डेवलपर टूल: सीएसएस नियम को ओवरराइड करने का तरीका कैसे पता करें?


196

खैर, यह बहुत सीधा है। यदि Chrome का डेवलपर टूल मुझे दिखा रहा है कि एक शैली ओवरराइड हो गई है, तो कैसे देखें कि CSS नियम इसे ओवरराइड कर रहा है?

मैं जानना चाहता हूं कि क्या ऐसा कुछ है "मुझे दिखाओ कि यह क्या ओवरराइड करता है"

OBS: कृपया, मुझे Firebug को इंगित न करें।


2
Chrome का डेवलपर टूल आपको ओवरराइडिंग नियम भी दिखाता है
Zoltan Toth

जवाबों:


283

तत्व इंस्पेक्टर के कम्प्यूटेड स्टाइल पैनल का उपयोग करें । लागू नियमों की सूची देखने के लिए ब्याज की संपत्ति का विस्तार करें, और जो जीता।

क्रोम स्क्रीनशॉट


मेरे लिए कंप्यूटेड टैब डिफ़ॉल्ट रूप से खुला था और इसलिए टैब के रूप में सूचीबद्ध नहीं था, इसमें हेडर 'कम्प्यूटेड' होना चाहिए था, अन्यथा आप लंबे समय तक देख सकते थे।
MrFox

1
Chrome के उन्नत होते ही तकनीक थोड़ी बदल गई है। प्रॉपर्टी के आगे 'इंटरेस्ट ऑफ प्रॉपर्टी ऑफ इंटरेस्ट' के बजाय स्पाई-ग्लास पर क्लिक करें और यह दिखाएगा कि स्टाइल्स टैब में कौन सा स्टाइल वापस जीता।
इंटोचो

3
@intotecho: क्रोम 47 ने कम्प्यूटेड टैब में विस्तारक को बहाल कर दिया है क्योंकि आवर्धक ग्लास परिवर्तन चूसा है। crbug.com/496263
josh3736

क्या होगा अगर उन सभी को रद्द कर दिया जाए? शायद एक स्क्रिप्ट के कारण? आपको कैसे पता चलेगा कि किसने क्या किया?
अंधकारपूर्ण

यह अभी भी एलिमेंट्स पैनल पर "कंप्यूटेड" टैब के रूप में है।
josh3736

7

आप बस एक ही नाम वाले लोगों को देख सकते हैं, जिन्हें बाहर नहीं निकाला गया है, याद रखें कि लिस्टिंग का महत्व है।

या आप गणना की गई शैलियों को देख सकते हैं। वे वास्तव में लागू शैलियों होंगे।


2

crtrl + shift + c और तत्व का निरीक्षण करते हैं। फिर नीचे के कोने में बॉक्स में, इसके माध्यम से एक पंक्ति के बिना शैली ढूंढें।

ओवरराइड अधिकांश मामलों में शीर्ष पर है (और इसके माध्यम से एक पंक्ति के बिना, क्योंकि यह शैली "जीत" है)।


4
ऐसा नहीं है जब एक शैली को ध्वजांकित किया जाता है! महत्वपूर्ण
JCorriveau
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.