Jak znaleźć nieużywane obrazy i style CSS na stronie internetowej? [Zamknięte]

Czy istnieje metoda (inna niż prób i błędów), której mogę użyć, aby znaleźć nieużywane pliki obrazów? A co z deklaracjami CSS dla identyfikatorów i klas, których nawet nie ma w witrynie?

Wygląda na to, że istnieje sposób na napisanie skryptu, który skanuje witrynę, profiluje ją i sprawdza, które obrazy i style nigdy nie są ładowane.

JestByło to rozszerzenie do Firefoksa znajdzieznaleziono nieużywane selektory CSS na stronie. Tomamiał możliwość spajania całej witryny. Wersja 3.01.0powinien może działać z nowszymi wersjami przeglądarki Firefox.

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

A oto inna opcja:

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

Nie musisz płacić żadnej usługi sieciowej ani szukać dodatku, masz to już w Google Chrome pod F12 (Inspector)->Audits->Remove unused CSS rules

Zrzut ekranu:

Aktualizacja: 30 czerwca 2017 r

Teraz Chrome 59 zapewnia pokrycie kodu CSS i JS . Zobacz https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage

Na poziomie pliku:

użyj wget do agresywnego przeszukiwania witryny, a następnie przetwórz dzienniki serwera http w celu uzyskania listy plików, do których uzyskano dostęp, porównaj to z plikami w witrynie

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

CSS Redundancy Checker to narzędzie uruchamiane lokalnie, któremu przekazujesz arkusz stylów i listę adresów URL lub katalog plików HTML. Oto opis podany na stronie narzędzia:

Prosty skrypt, który mając arkusz stylów CSS i plik .txt zawierający adresy URL plików HTML lub katalog plików HTML, dokona iteracji po nich wszystkich i wyświetli instrukcje CSS w arkuszu stylów, które nigdy nie są wywoływane w HTML.

Zasadniczo pomaga zachować odpowiednie i kompaktowe pliki CSS. I jest dość dokładny.

Jak zauważył Tim Murtaugh w poście na blogu A List Apart „ Two Tools to Keep Your CSS Clean ”:

csscss

csscss przeanalizuje wszystkie podane przez Ciebie pliki CSS i poinformuje Cię, które zestawy reguł mają zduplikowane deklaracje.

I najbardziej istotne w przypadku pytania:
hel-css

Hel to narzędzie do wykrywania nieużywanych CSS na wielu stronach w witrynie internetowej.

Narzędzie jest oparte na języku JavaScript i działa z poziomu przeglądarki.

Helium akceptuje listę adresów URL dla różnych sekcji witryny, a następnie ładuje i analizuje każdą stronę, aby utworzyć listę wszystkich arkuszy stylów. Następnie odwiedza każdą stronę z listy adresów URL i sprawdza, czy selektory znalezione w arkuszach stylów są używane na stronach. Na koniec generuje raport, który szczegółowo opisuje każdy arkusz stylów i selektory, których nie znaleziono na żadnej z podanych stron.

Wydaje mi się, że Adobe Dreamweaver lub Adobe Golive mają funkcję znajdowania zarówno osieroconych stylów, jak i obrazów; nie mogę sobie przypomnieć, który teraz. Prawdopodobnie jedno i drugie, ale cechy były dobrze ukryte.

TopStyle posiada zestaw narzędzi do lokalizowania i postępowania z osieroconymi klasami. Zapewnia również raporty o tym, gdzie identyfikatory i klasy są używane w kodzie HTML, umożliwiając szybkie otwieranie i przeskakiwanie do odpowiednich znaczników. Oto notka ze strony internetowej dotycząca tej funkcji:

Raporty dotyczące witryn: zobacz na pierwszy rzut oka, gdzie w Twojej witrynie są używane style. Dowiedz się, gdzie zastosowano klasy stylów, które nie są zdefiniowane w żadnym arkuszu stylów, lub zobacz, które zdefiniowane przez Ciebie klasy stylów nie są używane.

Bardzo przydatne do analizy nieznanych witryn.

Nie znajduje jednak nieużywanych obrazów.

Wersja canary Chrome ma na pasku narzędzi programisty opcję „ Pokrycie CSS” jako jedną z eksperymentalnych funkcji programistycznych. Ta opcja pojawia się w zakładce osi czasu i może być użyta do uzyskania listy nieużywanych CSS.

Pamiętaj, że musisz również włączyć tę funkcję w ustawieniach paska narzędzi programisty. Ta funkcja prawdopodobnie powinna pojawić się w oficjalnej wersji Chrome.

Znalazłem to narzędzie, które działa ze wszystkimi wersjami Firefoksa! Trochę czasu zajmuje nauczenie się, jak to działa, ale po uruchomieniu wydaje się całkiem niezłe. Spowoduje to zapisanie nowej wersji CSS z zaznaczonymi selektorami CSS, dzięki czemu możesz szybko cofnąć, jeśli zajdzie taka potrzeba.

Wykorzystanie CSS - dodatek do przeglądarki Firefox

To małe narzędzie zawiera listę reguł CSS używanych przez niektóre pliki HTML.

Tutaj jest na Code Pen

Kliknij Run code snippet, a następnie kliknij, Full pageaby się do niego dostać. Następnie postępuj zgodnie z instrukcjami we fragmencie. Możesz uruchomić go na całej stronie, aby zobaczyć, jak działa z Twoim html / css.

Ale łatwiej jest po prostu dodać do zakładek mój długopis jako narzędzie.

/* 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>");

Wszystkie wymienione tutaj narzędzia doskonale nadają się do CSS. Nie wiem o programie Dreamweaver & Co. Ale jakiś czas temu stworzyłem mały program, aby pomóc mi uporządkować projekty witryn internetowych

Znajdź-nieużywane-pliki

Nie pomaga w CSS i innych rzeczach, ale zamiast tego w przypadku osieroconych obrazów i innych typów plików.

Mam nadzieję, że to pomoże!

Helium CSS to świetne narzędzie do tego. Należy jednak zauważyć, że należy uruchomić to narzędzie na rozwojowej lub lokalnej wersji witryny. Jeśli uruchomisz to w wersji produkcyjnej, Twoi goście będą mogli zobaczyć środowisko testowe helu.

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

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

Aby odpowiedzieć na pytanie dotyczące narzędzia do znajdowania nieużywanych plików graficznych, możesz użyć Xenu Link Sleuth do przeszukiwania witryny w celu znalezienia wszystkich obrazów używanych w witrynie. Następnie Xenu poprosi o dostęp do ftp, aby mógł przeszukać twoje katalogi w celu znalezienia osieroconych plików. Nie używałem go jeszcze na serwerze produkcyjnym, ale wydaje mi się, że warto się temu przyjrzeć.

EDYCJA: Musisz tylko uważać, aby nie usunąć obrazów używanych przez javascript.