Wie finde ich ungenutzte Bilder und CSS-Stile auf einer Website?[geschlossen]
https://stackoverflow.com/questions/33242
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Gibt es eine Methode (außer Versuch und Irrtum), mit der ich ungenutzte Bilddateien finden kann?Wie wäre es mit CSS-Deklarationen für IDs und Klassen, die auf der Site noch nicht einmal vorhanden sind?
Es scheint, als gäbe es eine Möglichkeit, ein Skript zu schreiben, das die Site scannt, ein Profil erstellt und sieht, welche Bilder und Stile nie geladen werden.
Lösung
Es gibt eine Firefox-Erweiterung, die ungenutzte CSS-Selektoren auf einer Seite findet.Es besteht die Möglichkeit, die gesamte Website zu spinnen.Version 3.01 sollte mit neueren Versionen von Firefox funktionieren.
https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/
Und hier ist eine weitere Option.
Andere Tipps
Sie müssen keinen Webdienst bezahlen oder nach einem Add-on suchen, dies haben Sie bereits in Google Chrome unter F12 (Inspector)->Audits->Remove unused CSS rules
Bildschirmfoto:
Aktualisieren:30. Juni 2017
Jetzt bietet Chrome 59 CSS- und JS-Codeabdeckung.Sehen https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage
Auf Dateiebene:
Verwenden Sie wget, um die Site aggressiv zu spinnen, und verarbeiten Sie dann die HTTP-Serverprotokolle, um die Liste der Dateien zu erhalten, auf die zugegriffen wird. Vergleichen Sie diese mit den Dateien auf der Site
diff \
<(sed some_rules httpd_log | sort -u) \
<(ls /var/www/whatever | sort -u) \
| grep something
CSS-Redundanzprüfer ist ein Tool, das Sie lokal ausführen und dem Sie ein Stylesheet und entweder eine Liste von URLs oder ein Verzeichnis von HTML-Dateien übergeben.Hier ist die Beschreibung auf der Website des Tools:
Ein einfaches Skript, das bei einem CSS -Stylesheet und einer .txt -Datei -URLs von HTML -Dateien oder einem Verzeichnis von HTML -Dateien über alle alle IT -Verzeichnisse in der Stylesheet iteriert, die nie in der HTML genannt werden.
Im Grunde hilft es Ihnen, Ihre CSS-Dateien relevant und kompakt zu halten.Und es ist einigermaßen genau.
Probieren Sie WARI – Web Application Resource Inspector.
Es findet unbenutzte Bilder, unbenutztes und doppeltes CSS/JS.
Verknüpfung: wari.konem.net
Wie Tim Murtaugh im Blogbeitrag A List Apart feststellte: „Zwei Tools, um Ihr CSS sauber zu halten":
CSSCSS analysiert alle CSS -Dateien, die Sie angeben, und teilen Sie Ihnen mit, welche Regeln doppelte Erklärungen haben.
Und am relevantesten für die Frage:
Helium-CSS
Helium ist ein Werkzeug, um nicht verwendete CSS auf vielen Seiten auf einer Website zu entdecken.
Das Tool basiert auf Javascript und wird über den Browser ausgeführt.
Helium akzeptiert eine Liste von URLs für verschiedene Abschnitte einer Site und enthält jede Seite, um eine Liste aller Stylesheets zu erstellen.Anschließend besucht sie jede Seite in der URL -Liste und prüft, ob die in den Stylesheets gefundenen Selektoren auf den Seiten verwendet werden.Schließlich generiert es einen Bericht, in dem jedes Stylesheet und die Selektoren beschrieben werden, die auf keiner der angegebenen Seiten verwendet wurden.
Ich erinnere mich an Adobe Dreamweaver oder Adobe Golive, die über eine Funktion zum Auffinden verwaister Stile und Bilder verfügten.Ich kann mich jetzt nicht erinnern, welches.Möglicherweise beides, aber die Merkmale waren gut versteckt.
TopStyle verfügt über eine Reihe von Tools zum Auffinden und Behandeln verwaister Klassen.Außerdem erhalten Sie Berichte darüber, wo IDs und Klassen im HTML verwendet werden, sodass Sie das relevante Markup schnell öffnen und dorthin springen können.Hier ist der Klappentext von der Website zu dieser Funktion:
Site-Berichte:Sehen Sie auf einen Blick, in dem Stile auf Ihrer Website verwendet werden.Finden Sie heraus, wo Sie Stilklassen angewendet haben, die in keiner Stilblätter definiert sind, oder sehen Sie, welche Stilklassen Sie definiert haben und die nicht verwendet werden.
Sehr nützlich, um unbekannte Websites zu analysieren.
Es werden jedoch keine ungenutzten Bilder gefunden.
Chrome Canary Build verfügt über eine Option in der Entwicklersymbolleiste für „CSS-Abdeckung“ als eine der experimentellen Entwicklerfunktionen.Diese Option erscheint auf der Registerkarte „Timeline“ und kann zum Abrufen einer Liste des nicht verwendeten CSS verwendet werden.
Bitte beachten Sie, dass Sie diese Funktion auch in den Einstellungen in der Entwicklersymbolleiste aktivieren müssen.Diese Funktion sollte es wahrscheinlich in die offizielle Chrome-Version schaffen.
Ich habe dieses Tool gefunden, das mit allen Versionen von Firefox funktioniert!Es dauert eine Weile, bis man erlernt, wie es funktioniert, aber sobald es anfängt, scheint es ziemlich gut zu sein.Es wird eine neue Version des CSS mit auskommentierten CSS-Selektoren gespeichert, sodass Sie bei Bedarf schnell zurückkehren können.
Dieses kleine Tool bietet Ihnen eine Liste der von einigen HTML-Codes verwendeten CSS-Regeln.
Hier ist es Codestift
Klicke auf Codeausschnitt ausführen, dann klicken Sie auf Volle Seite hineinzukommen.Folgen Sie dann den Anweisungen im Snippet.Sie können es ganzseitig ausführen, um zu sehen, wie es mit Ihrem HTML/CSS funktioniert.
Aber es ist einfacher, einfach meinen Codestift als Werkzeug zu speichern.
/* 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>");Alle hier aufgeführten Tools eignen sich hervorragend für CSS.Ich weiß nichts über Dreamweaver & Co.Aber ich habe vor einiger Zeit ein kleines Programm erstellt, das mir beim Aufräumen meiner Website-Projekte hilft
Nicht verwendete Dateien suchen
Es hilft nicht bei CSS & Co., sondern bei verwaisten Bildern und anderen Dateitypen.
Ich hoffe es hilft!
Helium CSS ist hierfür ein großartiges Werkzeug.Beachten Sie jedoch, dass Sie dieses Tool auf einer Entwicklungs- oder lokalen Version Ihrer Website ausführen sollten.Wenn Sie dies in einer Produktionsversion ausführen, können Ihre Besucher die Helium-Testumgebung sehen.
Um Ihre Frage zu einem Tool zum Auffinden ungenutzter Bilddateien zu beantworten, können Sie Folgendes verwenden: Xenu Link Sleuth um Ihre Website zu spinnen, um alle Bilder zu finden, die Ihre Website verwendet.Anschließend fordert Xenu Sie zum FTP-Zugriff auf, damit Ihre Verzeichnisse nach verwaisten Dateien durchsucht werden können.Ich habe es noch nicht auf einem Produktionsserver verwendet, aber es scheint einen Blick wert zu sein.
BEARBEITEN:Sie müssen nur darauf achten, keine Bilder zu löschen, die von Javascript verwendet werden.
