क्रोम के लिए CSSPeeper के साथ हर साइट पर विस्तृत सीएसएस इंस्पेक्टर
नियमित रूप से क्रोम DevTools पैनल पागल शक्तिशाली है। यदि किसी को किसी साइट के लेआउट, सीएसएस और यहां तक कि HTTP हेडर का अध्ययन करने की आवश्यकता है, तो यह किसी को भी किसी भी पृष्ठ पर गहरा गोता लगाने देता है.
आप DevTools CSS इंस्पेक्टर के साथ बहुत कुछ कर सकते हैं। लेकिन इसमें एक स्पष्ट GUI पैनल नहीं है और यह एक बात है जो हर डेवलपर को पसंद आएगी.
CSSPeeper, एक निशुल्क क्रोम एक्सटेंशन देखें जो इस GUI इंस्पेक्टर को आपके ब्राउज़र में जोड़ता है। यह आपको किसी भी पृष्ठ पर किसी भी तत्व के सीएसएस गुणों का अध्ययन करने देता है, हालांकि यह अभी केवल क्रोम के लिए बनाया गया है.
एक बार आप बस स्थापित एक वेबपेज पर जाएँ और एक्सटेंशन के मुख्य बटन पर क्लिक करें Chrome ऐड-ऑन बार में। प्रत्येक मुख्य तत्व के बारे में विवरण के साथ एक नया इंस्पेक्टर विंडो वेबपेज के ऊपर दिखाई देता है.
जैसा कि आप साइट के माध्यम से ब्राउज़ करते हैं आप किसी भी तत्व पर बिंदीदार रूपरेखा के साथ देख सकते हैं। इसमें बटन, पेज सेक्शन, हेडर, नेविगेशन आइटम शामिल हो सकते हैं, आप इसे नाम दें.
वहाँ से आपको टाइपोग्राफी, रंग विकल्पों और फ़ॉन्ट शैलियों के विवरण के साथ एक संपूर्ण निरीक्षक मिलेगा। यह एक शानदार तरीका है वेबपृष्ठ से सीधे शैलियाँ खींचना खुद सीएसएस कोड में खुदाई के बिना.
CSSPeeper भी आपको देता है एक अंतर्निहित रंग बीनने वाले के साथ संबंधित रंग चुनें और रंग योजना जनरेटर। आप पृष्ठों से चित्र निर्यात कर सकते हैं, अपनी रंग योजनाएँ बना सकते हैं, और इन्हें अपने मॉकअप में लागू करें फोटोशॉप या स्केच के साथ.
मैं मुख्य रूप से डिजाइनरों के लिए इस विस्तार की सिफारिश करें डेवलपर्स के बजाय क्योंकि यह एक बहुत अधिक डिज़ाइनर-अनुकूल प्लगइन है जो कच्चे CSS को खींचता है और कोड को डेटा के आसान-से-पढ़े गए विखंडू में बदल देता है।.
लेकिन यह प्लगइन डेवलपर्स की भी मदद कर सकता है! यह वास्तव में एक है सभी प्रकार के CSS के लिए शक्तिशाली साइट निरीक्षण उपकरण.
यह क्या कर सकता है, इसके बारे में और जानने के लिए CSSPeeper होमपेज पर एक नज़र डालें। मुख्य पृष्ठ में Chrome स्टोर का लिंक भी शामिल है, ताकि आप एक्सटेंशन को निःशुल्क इंस्टॉल कर सकें और इसे टेस्ट रन के लिए निकाल सकें.
