¿Cómo puedo encontrar imágenes y estilos CSS no utilizados en un sitio web? [cerrado]

¿Existe algún método (que no sea de prueba y error) que pueda utilizar para encontrar archivos de imagen no utilizados? ¿Qué hay de las declaraciones CSS para ID y clases que ni siquiera existen en el sitio?

Parece que podría haber una forma de escribir un script que escanee el sitio, lo perfile y vea qué imágenes y estilos nunca se cargan.

HayHabía una extensión de Firefox que encuentraencontró selectores CSS no utilizados en una página. Esotienetenía la opción de rastrear todo el sitio. Versión 3.01debería podría funcionar con versiones más recientes de Firefox.

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

Y aquí tienes otra opción:

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

No tiene que pagar ningún servicio web o buscar un complemento, ya lo tiene en Google Chrome en F12 (Inspector)->Audits->Remove unused CSS rules

Captura de pantalla:

Actualización: 30 de junio de 2017

Ahora Chrome 59 proporciona cobertura de código CSS y JS . Consulte https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage

A nivel de archivo:

use wget para rastrear agresivamente el sitio y luego procese los registros del servidor http para obtener la lista de archivos a los que se accede, diferencie esto con los archivos en el sitio

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

CSS Redundancy Checker es una herramienta que se ejecuta localmente, a la que se le pasa una hoja de estilo y una lista de URL o un directorio de archivos HTML. Aquí está la descripción dada en el sitio de la herramienta:

Una secuencia de comandos simple que, dada una hoja de estilo CSS y un archivo .txt que enumera las URL de los archivos HTML, o un directorio de archivos HTML, iterará sobre todos ellos y enumerará las declaraciones CSS en la hoja de estilo que nunca se llaman en el HTML.

Básicamente, le ayuda a mantener sus archivos CSS relevantes y compactos. Y es razonablemente preciso.

Como señaló Tim Murtaugh en la publicación del blog A List Apart, " Dos herramientas para mantener limpio su CSS ":

csscss

csscss analizará cualquier archivo CSS que le proporcione y le permitirá saber qué conjuntos de reglas tienen declaraciones duplicadas.

Y lo más relevante para la pregunta:
helio-css

Helium es una herramienta para descubrir CSS no utilizado en muchas páginas de un sitio web.

La herramienta está basada en javascript y se ejecuta desde el navegador.

Helium acepta una lista de URL para diferentes secciones de un sitio, luego carga y analiza cada página para crear una lista de todas las hojas de estilo. Luego visita cada página de la lista de URL y comprueba si los selectores que se encuentran en las hojas de estilo se utilizan en las páginas. Finalmente, genera un informe que detalla cada hoja de estilo y los selectores que no se encontraron para usarse en ninguna de las páginas dadas.

Me parece recordar que Adobe Dreamweaver o Adobe Golive tienen una función para encontrar estilos e imágenes huérfanos; no recuerdo cuál ahora. Posiblemente ambos, pero las características estaban bien ocultas.

TopStyle tiene un conjunto de herramientas para localizar y tratar con clases huérfanas. También le proporcionará informes sobre dónde se utilizan las ID y las clases en el HTML, lo que le permitirá abrir rápidamente y pasar al marcado relevante. Aquí está la propaganda del sitio web con respecto a esta función:

Informes del sitio: vea de un vistazo dónde se utilizan los estilos en su sitio. Descubra dónde ha aplicado clases de estilo que no están definidas en ninguna hoja de estilo, o vea qué clases de estilo ha definido que no se están utilizando.

Muy útil para analizar sitios web desconocidos.

Sin embargo, no encuentra imágenes no utilizadas.

La compilación de Chrome Canary tiene una opción en la barra de herramientas del desarrollador para " Cobertura CSS" como una de las funciones experimentales para desarrolladores. Estas opciones aparecen en la pestaña de la línea de tiempo y se pueden usar para obtener una lista del CSS no utilizado.

Tenga en cuenta que también deberá habilitar esta función en la configuración de la barra de herramientas del desarrollador. Esta característica probablemente debería llegar a la versión oficial de Chrome.

¡Encontré esta herramienta que funciona con todas las versiones de Firefox! Se necesita un poco de tiempo para aprender cómo funciona, pero una vez que comienza, parece bastante bueno. Guardará una nueva versión de CSS con selectores CSS remarcados para que pueda revertir rápidamente si lo necesita.

Uso de CSS - Complemento de Firefox

Esta pequeña herramienta le brinda una lista de las reglas css que usan algunos html.

Aquí está en Code Pen

Haga clic en Run code snippet, luego haga clic en Full pagepara acceder a él. Luego, siga las instrucciones del fragmento. Puede ejecutarlo a página completa para verlo funcionar con su html / css.

Pero es más fácil marcar mi lápiz de código como una herramienta.

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

Todas las herramientas enumeradas aquí son excelentes para CSS. No sé sobre Dreamweaver & Co. Pero hice un pequeño programa hace un tiempo para ayudarme a limpiar los proyectos de mi sitio web.

Buscar archivos no utilizados

No ayuda con CSS y demás, sino con imágenes huérfanas y otros tipos de archivos.

¡Espero eso ayude!

Helium CSS es una gran herramienta para esto. Sin embargo, debe tenerse en cuenta que debe ejecutar esta herramienta en una versión local o de desarrollo de su sitio web. Si ejecuta esto en una versión de producción, sus visitantes podrán ver el entorno de prueba de helio.

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

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

Para responder a su pregunta sobre una herramienta para encontrar archivos de imágenes no utilizados, puede usar Xenu Link Sleuth para rastrear su sitio y encontrar todas las imágenes que usa su sitio. Luego, Xenu le solicita acceso ftp para que pueda rastrear sus directorios para encontrar archivos huérfanos. Todavía no lo he usado en un servidor de producción, pero parece que vale la pena investigarlo.

EDITAR: Solo debe tener cuidado de no eliminar imágenes que utiliza javascript.