CSS Dig Chrome Extension के साथ किसी भी वेबसाइट के कोड का विश्लेषण करें

आप के साथ बहुत कुछ कर सकते हैं क्रोम DevTools लाइव वेबसाइटों के संपादन से लेकर विस्तृत HTTP अनुरोधों का अध्ययन करने तक। लेकिन वो सीएसएस पैटर्न का विश्लेषण करने की क्षमता कंसोल में बेक नहीं किया गया है.

साथ में सीएसएस खोदो, आप सभी का विश्लेषण कर सकते हैं सीएसएस चयनकर्ताओं, विशेषता, तथा अद्वितीय गुण Chrome से किसी भी वेब पेज पर। यह एक्सटेंशन पूरी तरह से मुफ़्त है और डेवलपर्स को आगे बढ़ाने के लिए बहुत सारी शक्ति प्रदान करता है.

जैसा कि आप एक स्टाइलशीट का निरीक्षण करते हैं, आपको सीएसएस डिग पैनल से बहुत सारे डेटा मिलेंगे। यह आपको दिखा सकता है व्यक्तिगत चयनकर्ता, समेत डुप्लिकेट तथा अनावश्यक विशिष्टता का स्तर.

आरंभ करने के लिए, बस प्लगइन स्थापित करें और कंसोल विंडो खोलें। तुम्हे पता चलेगा दो टैब सीएसएस खोद खिड़की में: गुण तथा चयनकर्ताओं.

आप परिणाम ब्राउज़ कर सकते हैं गुणों द्वारा आयोजित (रंग, सीमा, गद्दी), या चयनकर्ताओं द्वारा (कक्षाएं, आईडी)। मुझे लगता है कि गुण विंडो सबसे अधिक मूल्यवान है, क्योंकि यह आपको अध्ययन करने की अनुमति देता है कि आप किस फ़ॉन्ट और रंग का उपयोग कर रहे हैं.

यह टूल किसी भी वेबसाइट के लिए बोर्ड में काम करता है, इसलिए यह इसके लिए भी उपयोगी है रिवर्स इंजीनियरिंग किसी का डिजाइन। आप इस विंडो से सीधे CSS को कॉपी / पेस्ट कर सकते हैं और इसे अपने प्रोजेक्ट्स पर पुनः उपयोग कर सकते हैं.

शायद CSS Dig के लिए सबसे आम उपयोग मामला है स्पष्ट डुप्लिकेट रंग अपने रंग पैलेट से। वास्तव में आपको कितने हरे रंग के अनूठे रंगों की आवश्यकता है? या, एक पृष्ठ के लिए कितने अलग-अलग सेन्स-सेरिफ़ फ़ॉन्ट आवश्यक हैं?

CSS Dig अविश्वसनीय रूप से सरल है, इसलिए DevTools जैसी दर्जनों सुविधाओं की अपेक्षा न करें। इसके बजाय, यह प्लगइन बल्कि है सामने वाले डेवलपर्स की ओर देखा गया बार-बार चयनकर्ताओं या डुप्लिकेट संपत्तियों के लिए ऑडिटिंग साइटें.

सोर्स कोड प्लगइन GitHub पर मुफ्त में उपलब्ध है जहाँ आपको सभी मिलेंगे नवीनतम अपडेट.