क्या यह जांचने का कोई तरीका है कि वेब पेज पर सीएसएस शैलियों का उपयोग किया जा रहा है या नहीं?

121

जानना चाहते हैं कि वर्तमान में कौन सी CSS शैलियों का उपयोग वेब पेज पर किया जा रहा है।

css

— मदद
स्रोत

2

एक ब्राउज़र का उपयोग करें जिसमें एक सीएसएस इंस्पेक्टर है। सफारी और क्रोम (उर्फ वेबकिट) इसे डेवलपर टूल के भाग के रूप में प्रदान करते हैं। फ़ायरफ़ॉक्स में यह फ़ायरबग प्लगइन द्वारा प्रदान किया गया है। Internet Explorer में ऐसा कुछ नहीं है जिससे मैं परिचित हूं। इंस्पेक्टर आपको एक तत्व का चयन करने की अनुमति देगा, राइट-क्लिक करें, और "इंसपेक्ट एलीमेंट" चुनें - फिर यह आपको दिखाएगा कि आपके द्वारा चयनित तत्व पर कौन से चयनकर्ता और कौन से व्यक्तिगत नियम लागू हैं।

— ली

@Lee ie8 डेवलपर टूलबार css सिलेक्टर्स में फायरबग की तरह व्यवहार करता है, आप राइट हैंडसाइड पर लगाई गई शैलियों का चयन और देख सकते हैं।

— कोबे

केवल एक विशिष्ट पृष्ठ में उपयोग किए गए सीएसएस

— cweiske

58

फायरबग के लिए सीएसएस उपयोग ऐड-ऑन स्थापित करें और इसे उस पृष्ठ पर चलाएं। यह आपको बताएगा कि कौन सी शैलियों का उपयोग किया जा रहा है और उस पृष्ठ का उपयोग नहीं किया गया है।

— कोबे
स्रोत

@ हेरी, एक बार जब आप इस प्लगइन को स्थापित करते हैं, तो यह फायरबग के एक हिस्से के रूप में टैब में होगा, जहां आपके पास नेट और सभी //// हैं, मुझे बताएं कि क्या आपको किसी और चीज की आवश्यकता है

— kobe

33

क्या क्रोम जैसी कोई चीज है?

— पेड्रो लूज

3

यह अब काम नहीं करता है, और दुर्भाग्य से समर्थित नहीं है।

— nostromo

1

खबरदार कि फायरबग अब नहीं रखा गया है। मुझे लगता है कि यह ऐड-ऑन फ़ायरफ़ॉक्स बिल्ट-इन DevTools के साथ काम नहीं करता है।

— एंड्रयू

निरीक्षण के दौरान आप क्रोम में ऑडिट विकल्प का उपयोग कर सकते हैं। यह केवल उस विशेष पृष्ठ पर उपयोग नहीं किए गए शो सीएसएस है।

— सारथ हरि

81

Google Chrome के पास अप्रयुक्त सीएसएस की जांच करने के दो तरीके हैं ।

1. ऑडिट टैब: > पेज पर राइट क्लिक + एलीमेंट का निरीक्षण करें, "ऑडिट" टैब ढूंढें, और ऑडिट को चलाएं, जिससे यह सुनिश्चित होता है कि "वेब पेज प्रदर्शन" चेक किया गया है।

सभी अप्रयुक्त सीएसएस टैग सूचीबद्ध करता है - नीचे दी गई छवि देखें।

अद्यतन: - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

2. कवरेज टैब: > पेज पर राइट क्लिक + इंस्पेक्ट एलिमेंट, सबसे दाईं ओर तीन डॉट्स ढूंढें (इमेज में परिक्रमा) और कंसोल ड्रॉअर (या हिट Esc), अंत में ड्राअर में बाएं तीन डॉट्स पर क्लिक करें (सर्कुलेटेड) छवि में) कवरेज उपकरण खोलने के लिए।

Chrome ने अप्रयुक्त CSS और JS को देखने के लिए एक टूल लॉन्च किया - Chrome 59 अपडेट आपको पृष्ठ पर उपयोगकर्ता अनुभव के बेहतर कवरेज की अनुमति देने के लिए रिकॉर्डिंग (छवि में लाल वर्ग) को शुरू करने और रोकने की अनुमति देता है।

सभी उपयोग किए गए और अप्रयुक्त CSS / JS को फाइलों में दिखाता है - नीचे चित्र देखें।

— Cordell
स्रोत

3

यह देखने के लिए बहुत बढ़िया होगा कि कौन सा उपयोग किया जाता है .... लेकिन यह बहुत अच्छा है, धन्यवाद।

— सेरज सगन

जहाँ तक मैं बता सकता हूँ, यदि आप जानना चाहते हैं कि आपके सबसे अच्छे दांव का क्या उपयोग किया जाता है तो क्रोम के लिए एक प्लगइन स्थापित करना है

— कॉर्डेल

नया Chrome 59 अपडेट आपको उपयोग किए गए / अप्रयुक्त CSS और JS

— कॉर्डेल

ऐसा करने के लिए Chrome किस लाइब्रेरी का उपयोग करता है?

— एलेक्सी श्वेलेव

1

@UMAR multi-page website coverage == (single-page coverage) * n जहां n = प्रत्येक पृष्ठ एक वेबसाइट में । टूल / इस उत्तर को "बेकार" के रूप में वर्गीकृत करने से किसी को लाभ नहीं होता है।

— शाई कोहेन

40

केवल पूर्णता के लिए और क्योंकि यह टिप्पणियों में पूछा गया था - उसी उद्देश्य के लिए अब क्रोम में सीएसएस ऑडिट टूल भी है । यहाँ कुछ विवरण:

http://meeech.amihod.com/very-useful-find-unused-css-rules-with-google

— जन पेट्ज़ोल्ड
स्रोत

3

मुझे यकीन नहीं है कि यह "CSS ऑडिट टूल" है, जिसके लिए यह उत्तर संदर्भित कर रहा है , क्रोम डेवलपर टूल्स में ऑडिट टैब के समान है , लेकिन यह आपको बताएगा कि कौन से सीएसएस नियम अप्रयुक्त हैं (जैसे "Some.css: 42% वर्तमान पृष्ठ द्वारा उपयोग नहीं किया जाता है। ")।

— केनी एविट

11

UnCSS पर एक नज़र डालें । यह प्रयुक्त CSS की CSS फ़ाइल बनाने में मदद करता है।

— रॉबर्ट ब्रिसिटा
स्रोत

1

यह एक शानदार कार्यक्रम है। धन्यवाद! Rob

— r0berts

1

एक बंद के लिए अच्छा वेब उपकरण। ty

— बिलीओनाह

1

यह इस्सो है - UnCSS cannot be run on non-HTML pages, such as templates or PHP files- कोई बात नहीं .......

— ब्रायन पॉवेल

@ ब्रायन-पॉवेल हाँ, टेम्प्लेट आउटपुट पहले उत्पन्न करना होगा। और कैसे UnCSS पता है कि क्या जरूरत है?

— रॉबर्ट ब्रिसिटा

8

मैं CSS Dig का उपयोग कर रहा हूँ । यह क्रोम के लिए बनाया गया है, लेकिन मुझे लगता है कि यह एक महान उपकरण है!

— cs.matyi
स्रोत

मैंने बस यह कोशिश की - यह सब कुछ cssdig.com पर घर पर कॉल करके करता है, इसलिए यह स्थानीय रूप से होस्ट की गई किसी भी चीज़ को देखने या विश्लेषण करने में असमर्थ है।

— ब्रिलियनड

0

इस टूल का उपयोग करने का प्रयास करें, जो कि केवल एक सरल js स्क्रिप्ट है https://github.com/shashwatsahai/CSSExtractor/ यह टूल CSS को एक विशिष्ट पृष्ठ से सक्रिय शैलियों के लिए सभी स्रोतों को सूचीबद्ध करने में मदद करता है और इसे JSON स्रोत के रूप में सहेजता है। मूल्य के रूप में कुंजी और नियम। यह सभी सीएसएस को href लिंक से लोड करता है और उनसे लागू सभी शैलियों को बताता है। आप सभी कोड को एक .css फ़ाइल में सहेजने के लिए कोड को संशोधित कर सकते हैं। जिससे आपकी सभी सीएसएस का संयोजन होता है।

— शशवत सहाय
स्रोत

0

किसी भी तृतीय-पक्ष उपकरण और किसी भी एप्लिकेशन के बिना, आप कवरेज टैब में क्रोम देव उपकरणों का उपयोग करके अप्रयुक्त सीएसएस और जावास्क्रिप्ट पा सकते हैं। नीचे Google डेवलपर्स से पोस्ट पढ़ें। क्रोम कवरेज टैब

— महदी सफारी
स्रोत