Wie finde ich nicht verwendete Bilder und CSS-Stile auf einer Website? [geschlossen]

Gibt es eine andere Methode (außer Versuch und Irrtum), mit der ich nicht verwendete Bilddateien finden kann? Wie wäre es mit CSS-Deklarationen für IDs und Klassen, die nicht einmal auf der Site vorhanden sind?

Es scheint, als gäbe es eine Möglichkeit, ein Skript zu schreiben, das die Site scannt, profiliert und sieht, welche Bilder und Stile niemals geladen werden.

Es gibtEs gab eine Firefox-Erweiterung, die findetNicht verwendete CSS-Selektoren auf einer Seite gefunden. Eshathatte die Möglichkeit, die ganze Seite zu spinnen. Version 3.01sollte könnte mit neueren Versionen von Firefox funktionieren.

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

Und hier ist eine andere Option:

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

Sie müssen keinen Webdienst bezahlen oder nach einem Addon suchen, dies haben Sie bereits in Google Chrome unter F12 (Inspector)->Audits->Remove unused CSS rules

Bildschirmfoto:

Update: 30. Juni 2017

Jetzt bietet Chrome 59 CSS- und JS-Codeabdeckung . Siehe 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. Unterschiedlich zu den Dateien auf der Site

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

CSS Redundancy Checker ist ein Tool, das Sie lokal ausführen und an das 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 anhand eines CSS-Stylesheets und einer TXT-Datei mit URLs von HTML-Dateien oder eines Verzeichnisses mit HTML-Dateien alle durchläuft und die CSS-Anweisungen im Stylesheet auflistet, die im HTML niemals aufgerufen werden.

Grundsätzlich hilft es Ihnen, Ihre CSS-Dateien relevant und kompakt zu halten. Und es ist ziemlich genau.

Wie Tim Murtaugh im A List Apart-Blogbeitrag " Zwei Tools, um Ihr CSS sauber zu halten " feststellte :

csscss

csscss analysiert alle CSS-Dateien, die Sie ihm geben, und teilt Ihnen mit, welche Regelsätze doppelte Deklarationen haben.

Und am relevantesten für die Frage:
Helium-CSS

Helium ist ein Tool zum Erkennen von nicht verwendetem CSS auf vielen Seiten einer Website.

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 lädt und analysiert dann jede Seite, um eine Liste aller Stylesheets zu erstellen. Anschließend wird jede Seite in der URL-Liste besucht und geprüft, ob die in den Stylesheets enthaltenen Selektoren auf den Seiten verwendet werden. Schließlich wird ein Bericht erstellt, in dem jedes Stylesheet und die Selektoren aufgeführt sind, die auf keiner der angegebenen Seiten verwendet wurden.

Ich erinnere mich an Adobe Dreamweaver oder Adobe Golive, die über eine Funktion verfügen, mit der sowohl verwaiste Stile als auch Bilder gefunden werden können. Ich kann mich jetzt nicht daran erinnern. Möglicherweise beides, aber die Funktionen waren gut versteckt.

TopStyle verfügt über eine Reihe von Tools zum Auffinden und Behandeln von verwaisten Klassen. Außerdem erhalten Sie Berichte darüber, wo IDs und Klassen im HTML-Code verwendet werden, sodass Sie schnell öffnen und zum entsprechenden Markup springen können. Hier ist der Klappentext von der Website zu dieser Funktion:

Site-Berichte: Sehen Sie auf einen Blick, wo Stile auf Ihrer Site verwendet werden. Finden Sie heraus, wo Sie Stilklassen angewendet haben, die in keinem Stylesheet definiert sind, oder sehen Sie, welche Stilklassen Sie definiert haben, die nicht verwendet werden.

Sehr nützlich zum Zerlegen unbekannter Websites.

Es werden jedoch keine unbenutzten Bilder gefunden.

Chrome Canary Build bietet in der Entwicklersymbolleiste eine Option für " CSS Coverage" als eine der experimentellen Entwicklerfunktionen. Diese Option wird auf der Registerkarte "Zeitachse" angezeigt 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 Entwickler-Symbolleiste aktivieren müssen. Diese Funktion sollte es wahrscheinlich bis zur offiziellen Chrome-Veröffentlichung schaffen.

Ich habe dieses Tool gefunden, das mit allen Versionen von Firefox funktioniert! Es dauert eine Weile, um zu lernen, wie es funktioniert, aber sobald es beginnt, scheint es ziemlich gut zu sein. Es wird eine neue Version des CSS mit ausgefeilten CSS-Selektoren gespeichert, sodass Sie bei Bedarf schnell zurückkehren können.

CSS-Verwendung - Firefox-Addon

Dieses kleine Tool gibt Ihnen eine Liste der CSS-Regeln, die von einigen HTML-Dateien verwendet werden.

Hier ist es auf Code Pen

Klicken Sie auf Run code snippetund dann auf Full page, um darauf zuzugreifen. Folgen Sie dann den Anweisungen im Snippet. Sie können es ganzseitig ausführen, um zu sehen, ob es mit Ihrem HTML / CSS funktioniert.

Es ist jedoch einfacher, 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, um meine Website-Projekte zu bereinigen

Nicht verwendete Dateien suchen

Es hilft nicht bei CSS & Sachen, sondern bei verwaisten Bildern und anderen Dateitypen.

Ich hoffe es hilft!

Helium CSS ist hierfür ein großartiges Werkzeug. Es ist jedoch zu beachten, dass Sie dieses Tool auf einer Entwicklungs- oder lokalen Version Ihrer Website ausführen sollten. Wenn Sie dies auf einer Produktionsversion ausführen, können Ihre Besucher die Helium-Testumgebung sehen.

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

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

Um Ihre Frage zu einem Tool zum Auffinden nicht verwendeter Bilddateien zu beantworten, können Sie Xenu Link Sleuth verwenden, um Ihre Website zu durchsuchen und alle von Ihrer Website verwendeten Bilder zu finden. 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 klingt es wert, untersucht zu werden.

BEARBEITEN: Sie müssen nur darauf achten, keine Bilder zu löschen, die von Javascript verwendet werden.