सीएसएस अपरिभाषित वेरिएबल चेकर Chrome ऑफिस डॉक्स के साथ
Ad
वर्णन
क्या आप कस्टम गुण/चर का उपयोग करके CSS लिखते हैं? क्या आपने कभी किसी एक की स्पेलिंग गलत लिखी है, और केवल बाद में ध्यान दिया कि परिणाम के रूप में एक रंग सही ढंग से नहीं आ रहा था? क्या आप कभी ऐसे टूल के लिए तरस रहे हैं जो आपको सीएसएस वेरिएबल्स के ऐसे उपयोगों को ट्रैक करने में मदद करे जो परिभाषित नहीं हैं? तो फिर आप भाग्यशाली हैं, क्योंकि यह ऐसा ही एक उपकरण है! यह एक्सटेंशन क्रोम डेवलपर टूल्स में एक टैब जोड़ता है जो "var ()" अभिव्यक्तियों के भीतर उपयोग किए जाने वाले किसी भी अपरिभाषित सीएसएस चर के लिए वर्तमान पृष्ठ की जांच कर सकता है।
न केवल स्टाइलशीट, बल्कि इनलाइन शैली विशेषताओं का भी विश्लेषण किया जाता है, और परिणाम डेवलपर टूल्स के एलिमेंट्स टैब के भीतर आपत्तिजनक तत्व के लिंक के साथ एक अनुकूल तालिका में प्रदर्शित होते हैं।
इस एक्सटेंशन का उपयोग करने के लिए, इसे स्थापित करने के बाद Google क्रोम में अपनी पसंद की वेबसाइट खोलें, और फिर डेवलपर टूल्स खोलें।
आपको डेवलपर टूल के शीर्ष पर एक नया टैब दिखाई देगा जिसका शीर्षक होगा "सीएसएस अपरिभाषित वेरिएबल चेकर"।
वह टैब आपको इस एक्सटेंशन के UI पर ले जाएगा।
प्रारंभ में, आपको केवल "अपरिभाषित चरों की जांच करें" शीर्षक वाला एक बटन और एक खाली तालिका दिखाई देगी।
बटन पर क्लिक करने से उस पृष्ठ पर विश्लेषण शुरू हो जाएगा जिससे devtools जुड़े हुए हैं और तालिका के भीतर किसी भी परिणाम की रिपोर्ट करेगा।
यदि कोई अपरिभाषित सीएसएस चर नहीं मिला है, तो इसके बजाय तालिका को एक संदेश के साथ पॉप्युलेट किया जाएगा।
तालिका के परिणामों में तीन कॉलम हैं।
पहला कॉलम अपरिभाषित चर का नाम इंगित करता है।
अगला कॉलम उस स्टाइलशीट को इंगित करता है जिसमें यह पाया गया था, और तीसरा कॉलम इंगित करता है कि पृष्ठ पर कौन सा तत्व अपरिभाषित चर पाया गया था।
यह तीसरा कॉलम तत्व को CSS चयनकर्ता द्वारा संदर्भित करता है।
यदि स्टाइलशीट के भीतर अपरिभाषित चर पाया गया था, तो चयनकर्ता कॉलम सीएसएस शैली घोषणा के लिए चयनकर्ता के साथ भर जाता है जहां चर पाया गया था।
दूसरी ओर यदि अपरिभाषित चर एक इनलाइन शैली के भीतर पाया जाता है, तो एक चयनकर्ता वर्ग, आईडी, और प्रश्न में तत्व के टैग नाम और उसके सभी पूर्वजों के आधार पर उत्पन्न होता है।
ध्यान दें कि यह उत्पन्न चयनकर्ता प्रश्न में तत्व की विशिष्ट रूप से पहचान करने की गारंटी नहीं देता है।
परिणाम तालिका के चयनकर्ता कॉलम में प्रत्येक सेल एक हाइपरलिंक है।
प्रत्येक लिंक पर क्लिक करने से devtools का एलिमेंट्स टैब खुल जाएगा और इसके भीतर समस्याग्रस्त तत्व को हाइलाइट करेगा, जिससे आपको अपरिभाषित चर को ट्रैक करने में मदद मिलेगी।
नोट: यह एक्सटेंशन स्टाइलशीट जानकारी तक पहुँचने के लिए एपीआई पर निर्भर करता है जो क्रॉस-ओरिजनल रिसोर्स शेयरिंग द्वारा बाधित हैं।
कोई भी स्टाइलशीट जो पृष्ठ में लोड की गई है, लेकिन जो पृष्ठ से ही भिन्न मूल पर हैं, और जिन्हें एक्सेस-कंट्रोल-अनुमति-उत्पत्ति शीर्षलेख के साथ प्रस्तुत नहीं किया गया था, जो इस पृष्ठ से पहुंच की अनुमति देगा, इस एक्सटेंशन द्वारा विश्लेषण नहीं किया जाएगा और यह त्रुटियों को प्रदर्शित करने का कारण बनेगा।
ये त्रुटियां एक्सटेंशन को अन्य शैलियों का विश्लेषण करने से नहीं रोकती हैं जो एपीआई-सुलभ हैं।
इस विस्तार के पीछे विश्लेषण तर्क npm पैकेज के रूप में @sonatype/undefined-css-variable-checker नाम के तहत भी उपलब्ध है।
https://www देखें।
npmjs.
कॉम/पैकेज/@सोनाटाइप/अपरिभाषित-सीएसएस-चर-जांचकर्ता।
अतिरिक्त जानकारी:
- समुदाय-समूह-क्रोम-स्टोर द्वारा ऑफ़र किया गया
- औसत रेटिंग : 3 सितारे (यह ठीक था)
- डेवलपर इस ईमेल पते की सुरक्षा स्पैममबोट से की जा रही है। इसे देखने के लिए आपको जावास्क्रिप्ट सक्षम करना होगा।
सीएसएस अपरिभाषित वेरिएबल चेकर वेब extension ऑफिस डॉक्स के साथ एकीकृत Chromium ऑनलाइन
