मैं एक वेबसाइट में अप्रयुक्त छवियां और सीएसएस शैलियों कैसे पा सकता हूं? [बन्द है]

Question

क्या कोई विधि है (परीक्षण और त्रुटि के अलावा) मैं अप्रयुक्त छवि फ़ाइलों को खोजने के लिए उपयोग कर सकता हूं? आईडी और कक्षाओं के लिए सीएसएस घोषणाओं के बारे में कैसे साइट में मौजूद नहीं है?

ऐसा लगता है कि स्क्रिप्ट लिखने का एक तरीका हो सकता है जो साइट को स्कैन करता है, इसे प्रोफाइल करता है, और देखता है कि कौन सी छवियां और शैलियाँ कभी भरी हुई नहीं हैं।

Comments

हे जॉन ... अभी (सवाल और जवाब पढ़ने के बाद) मैंने देखा कि यह आप ही थे जिसने सवाल पूछा था। 4 साल बाद मैं यहाँ ठीक उसी चीज़ की तलाश में हूँ! StackOverflow वास्तव में अद्भुत है ... वैसे: मैं सिर्फ बैज से प्यार करता हूँ "मेरी मशीन पर काम करता है" आप अपने प्रोफ़ाइल में हैं ... मुझे लगता है कि मैं इसे उधार लूंगा! : डी

— लेनियल मैकाफेर्री

पर अधिक जानकारी stackoverflow.com/questions/135657/...

— लेमी

बस इस प्रश्न को संपादित किया है इसलिए यह SO के नियमों के अनुसार है। कम से कम मुझे उम्मीद है, क्योंकि मुझे वास्तव में खुद एक उत्तर की आवश्यकता है!

— एसएमबिग्स

छवियों के लिए गुल-डिलीट-अप्रयुक्त-चित्रों की कोशिश करें

— लुई फिलिप

Answer 1

वहाँ हैफ़ायरफ़ॉक्स एक्सटेंशन था कि पाताएक पृष्ठ पर अप्रयुक्त सीएसएस चयनकर्ताओं को मिला। यहहैपूरी साइट पर मकड़ी का विकल्प था। संस्करण 3.01चाहिए फ़ायरफ़ॉक्स के नए संस्करणों के साथ काम कर सकता है।

http://www.brothercake.com/dustmeselectors/

और यहाँ एक और विकल्प है:

https://addons.mozilla.org/en-US/firefox/addon/css-usage/

Comments

हां, यह केवल फ़ायरफ़ॉक्स के पुराने संस्करण पर काम करेगा, लेकिन यह: सीएसएस उपयोग - फ़ायरफ़ॉक्स एडोन एक ही है और नवीनतम संस्करण के साथ भी काम करेगा।

— एंड्रिया सालिसीटी

न तो 2018 में काम करें।

— लोनी बेस्ट

Answer 2

आपको किसी वेब सेवा का भुगतान करने या किसी ऐडऑन को खोजने की आवश्यकता नहीं है, आपके पास पहले से ही Google Chrome में F12 के तहत यह है (Inspector)->Audits->Remove unused CSS rules

स्क्रीनशॉट:

अपडेट: ३० जून, २०१ 2017

अब Chrome 59 CSS और JS कोड कवरेज प्रदान करता है । Https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage देखें

Comments

यह बहुत अच्छा है, टिप के लिए धन्यवाद!

— ब्रायन

मौजूदा उपकरणों का उपयोग करने के लिए अच्छा है, लेकिन यह केवल लोड किए गए पृष्ठ को स्कैन करता है, न कि पूरी साइट को?

— मार्क कूपर

बहुत अच्छे धन्यवाद। उत्तरदायी वेबसाइटों के बारे में सावधान रहें क्योंकि आपको यह जानने के लिए विभिन्न आकारों के लिए पुनः लोड करना होगा कि इनमें से एक या अधिक शैलियों का उपयोग नहीं किया जा रहा है। यह केवल व्यूपोर्ट की शैलियों को देखता है।

— माइक

स्टाइल शीट की छंटनी की गई फाइल को प्राप्त करने का कोई तरीका नहीं बल्कि हटाने की प्रक्रिया को मैन्युअल रूप से करना है?

— डैनियल सोकोलोस्की

यह उन साइटों के लिए एक व्यवहार्य विकल्प नहीं हो सकता है जो एक ही फाइल में अपने सभी सीएसएस को संपीड़ित करते हैं। यदि आप किसी विशेष पृष्ठ का ऑडिट करते हैं, तो यह बहुत अधिक अप्रयुक्त सीएसएस दिखाएगा लेकिन उन शैलियों का उपयोग अन्य पृष्ठों पर किया जाएगा। इसलिए, मेरी राय में किसी एकल पृष्ठ का ऑडिट करना अच्छा विकल्प नहीं है।

— सौरभ

Answer 3

एक फ़ाइल स्तर पर:

साइट पर आक्रामक तरीके से मकड़ी का उपयोग करें और फिर फ़ाइलों की सूची प्राप्त करने के लिए http सर्वर लॉग को संसाधित करें, इसे साइट में फ़ाइलों के साथ अलग करें

diff \
 <(sed some_rules httpd_log | sort -u) \
 <(ls /var/www/whatever | sort -u) \
 | grep something

Comments

अतिरिक्त कमांड-लाइन गीकनेस के लिए +1!

— ngeek

मिरर वाइज विकल्प अन-रेफ़र्ड और अप्रयुक्त फ़ाइलों को स्वचालित रूप से prune करने का एक अच्छा तरीका है, अर्थात wget -m <your site>। : - स्टाइल शीट अप्रयुक्त चयनकर्ताओं पहले हालांकि से कम कर दिए हैं किया जाना चाहिए स्वत: उस कार्य के लिए एक अच्छे उम्मीदवार की तरह इस दिखता developers.google.com/speed/pagespeed/psol

— डैनियल Sokolowski

Answer 4

CSS Redundancy Checker एक उपकरण है जिसे आप स्थानीय रूप से चलाते हैं, जिसे आप एक स्टाइलशीट और या तो URL की सूची या HTML फ़ाइलों की एक निर्देशिका से गुजरते हैं। यहाँ उपकरण की साइट पर दिया गया विवरण दिया गया है:

एक साधारण स्क्रिप्ट, जो सीएसएस स्टाइलशीट और HTML फ़ाइलों की या तो एक .txt फाइल लिस्टिंग यूआरएल, या HTML फ़ाइलों की एक निर्देशिका दी जाती है, उन सभी पर पुनरावृति करेगा और स्टाइलशीट में सीएसएस बयानों को सूचीबद्ध करेगा जिन्हें कभी भी एचटीएमएल में नहीं बुलाया जाता है।

असल में, यह आपकी सीएसएस फाइलों को प्रासंगिक और कॉम्पैक्ट रखने में आपकी मदद करता है। और यह काफी सटीक है।

Answer 5

जैसा कि एक सूची के अलावा ब्लॉग पोस्ट पर टिम मुर्तो द्वारा लिखा गया है, " दो उपकरण अपने सीएसएस को साफ रखने के लिए "

csscss

csscss आपके द्वारा दी गई किसी भी CSS फाइलों को पार्स कर देगा और आपको बताएगा कि कौन से नियमों में डुप्लिकेट घोषित किए गए हैं।

और प्रश्न के लिए सबसे अधिक प्रासंगिक:
हीलियम-सीएसएस

हीलियम एक वेब साइट पर कई पृष्ठों में अप्रयुक्त सीएसएस की खोज के लिए एक उपकरण है।

उपकरण जावास्क्रिप्ट-आधारित है और ब्राउज़र से चलता है।

हीलियम किसी साइट के विभिन्न वर्गों के लिए URL की सूची को स्वीकार करता है और फिर सभी स्टाइलसेट की सूची बनाने के लिए प्रत्येक पृष्ठ को लोड और पार्स करता है। यह तब URL सूची में प्रत्येक पृष्ठ पर जाता है और जांचता है कि क्या चयनकर्ताओं को शैलियों में मिले पृष्ठ पर उपयोग किया जाता है। अंत में, यह एक रिपोर्ट बनाता है जो प्रत्येक स्टाइलशीट और चयनकर्ताओं का विवरण देता है जो किसी भी दिए गए पृष्ठों पर उपयोग नहीं किए गए थे।

Answer 6

मुझे या तो Adobe Dreamweaver याद आता है या Adobe Golive को अनाथ शैलियों और चित्रों दोनों को खोजने की सुविधा है; जो अब याद नहीं है। संभवतः दोनों, लेकिन विशेषताएं अच्छी तरह से छिपी हुई थीं।

Comments

हाँ, आप Dreamweaver में अनाथ फ़ाइलें पा सकते हैं। यह साइट> चेक लिंक में है और फिर ड्रॉप-डाउन को अनाथ फ़ाइलों में बदल दें। हालांकि रिश्तेदार बनाम पूर्ण लिंक से सावधान रहें। इसने मुझे बताया कि मेरी सभी छवियां अनाथ फाइलें थीं क्योंकि वास्तविक लिंक वेब पर छवियों की लाइव प्रतियों की ओर इशारा करते थे जो छवियों की स्थानीय प्रतियों के लिए नहीं थे।

— स्टुअर्ट यंग

Answer 7

TopStyle में अनाथ वर्गों के साथ काम करने और उनसे निपटने के लिए कई उपकरण हैं। यह आपको रिपोर्ट भी देगा कि HTML में आईडी और कक्षाएं कहां उपयोग की जाती हैं, जिससे आप संबंधित मार्कअप को जल्दी से खोल सकते हैं और छोड़ सकते हैं। यहाँ इस सुविधा के बारे में वेबसाइट से धुंधला है:

साइट रिपोर्ट: एक नज़र जहां आपकी साइट में शैलियों का उपयोग किया जाता है, वहां देखें। यह पता करें कि आपने कहाँ शैली की कक्षाएं लागू की हैं जो किसी भी शैली पत्रक में परिभाषित नहीं हैं, या देखें कि आपने किस शैली की कक्षाएं परिभाषित की हैं जिनका उपयोग नहीं किया जा रहा है।

अपरिचित वेबसाइटों को अलग करने के लिए बहुत उपयोगी है।

यह अप्रयुक्त छवियों को नहीं ढूंढता है, हालांकि।

Comments

इस जवाब को वोट क्यों दिया जाता है?

— चार्ल्स रॉपर

Answer 8

क्रोम कैनरी बिल्ड में प्रायोगिक टूलबार में " सीएसएस कवरेज" के लिए प्रायोगिक डेवलपर सुविधाओं में से एक के रूप में एक विकल्प है। यह विकल्प टाइमलाइन टैब में आता है और इसका उपयोग अप्रयुक्त सीएसएस की सूची प्राप्त करने के लिए किया जा सकता है।

कृपया ध्यान दें कि आपको डेवलपर टूलबार में सेटिंग्स में इस सुविधा को सक्षम करने की आवश्यकता होगी। यह सुविधा शायद इसे आधिकारिक क्रोम रिलीज के लिए बना दे।

Answer 9

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

सीएसएस उपयोग - फ़ायरफ़ॉक्स Addon

Answer 10

यह छोटा टूल आपको कुछ html द्वारा उपयोग में आने वाले css नियमों की एक सूची देता है।

यहां यह कोड पेन पर है

पर क्लिक करें Run code snippetपर क्लिक करें, फिर Full pageयह करने के लिए मिलता है। फिर स्निपेट में निर्देशों का पालन करें। अपने html / css के साथ काम करने के लिए आप इसे पूरा पृष्ठ चला सकते हैं।

लेकिन मेरे कोड पेन को टूल के रूप में बुकमार्क करना आसान है।

/* CSS CLEANER INSTRUCTIONS
   1. Paste your HTML into the HTML window
   2. Paste your CSS into the CSS window
   5. The web page result now ends with a list of just the CSS used by your HTML!
*/

function cssRecursive(e) {
  var cssList = css(e);
  for (var i = 0; i < e.children.length; ++i) {
    var childElement = e.children[i];
    cssList = union(cssList, cssRecursive(childElement));
  }
  return cssList;
}

function css(a) {
  var sheets = document.styleSheets,
    o = [];
  a.matches = a.matches || a.webkitMatchesSelector || a.mozMatchesSelector || a.msMatchesSelector || a.oMatchesSelector;
  for (var i in sheets) {
    var rules = sheets[i].rules || sheets[i].cssRules;
    for (var r in rules) {
      if (a.matches(rules[r].selectorText)) {
        o.push(rules[r].cssText);
      }
    }
  }
  return o;
}

function union(x, y) {
  return unique(x.concat(y));
};

function unique(x) {
  return x.filter(function(elem, index) {
    return x.indexOf(elem) == index;
  });
};

document.write("<br/><hr/><code style='background-color:white; color:black;'>");
var allCss = cssRecursive(document.body);
for (var i = 0; i < allCss.length; ++i) {
  var cssRule = allCss[i];
  document.write(cssRule + "<br/>");
}
document.write("</code>");

Answer 11

यहां सूचीबद्ध सभी उपकरण CSS के लिए बहुत अच्छे हैं। मैं ड्रीमविवर एंड कंपनी के बारे में नहीं जानता, लेकिन मैंने अपनी वेबसाइट परियोजनाओं को साफ करने में मदद करने के लिए कुछ समय पहले एक छोटा कार्यक्रम बनाया

खोजें-अप्रयुक्त-फ़ाइलें

यह सीएसएस और सामान के साथ मदद नहीं करता, बल्कि अनाथ छवियों और अन्य प्रकार की फाइलों के साथ करता है।

आशा करता हूँ की ये काम करेगा!

Answer 12

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

https://github.com/geuis/helium-css

http://www.unknownerror.org/opensource/geuis/helium-css

Comments

हीलियम पहले से ही उत्तर दिया गया था। यह उस उत्तर के लिए एक टिप्पणी होना चाहिए था।

— Jan Doggen

Answer 13

अप्रयुक्त छवि फ़ाइलों को खोजने के लिए एक उपकरण के बारे में आपके प्रश्न का उत्तर देने के लिए, आप अपनी साइट का उपयोग करने वाली सभी छवियों को खोजने के लिए अपनी साइट को मकड़ी के लिए ज़ेनू लिंक स्लीथ का उपयोग कर सकते हैं । तब Xenu आपको ftp एक्सेस के लिए संकेत देता है ताकि यह अनाथ फ़ाइलों को खोजने के लिए आपकी निर्देशिकाओं को क्रॉल कर सके। मैंने अभी तक इसे प्रोडक्शन सर्वर पर इस्तेमाल नहीं किया है, लेकिन यह देखने लायक है।

EDIT: आपको केवल उन चित्रों को हटाने के लिए सावधान रहना होगा जो जावास्क्रिप्ट द्वारा उपयोग किए जाते हैं।

Comments

क्यों डाउन वोट?

— SMBiggs