¿Cómo puedo encontrar sin usar las imágenes y los estilos CSS en un sitio web?[cerrado]
https://stackoverflow.com/questions/33242
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Es allí método (aparte de ensayo y error) que puede utilizar para encontrar sin usar archivos de imagen?Cómo acerca de las declaraciones CSS para ID y Clases que no existen en el sitio?
Parece que podría ser una forma de escribir un script que busca en el sitio, el perfil, y ver qué imágenes y estilos nunca se cargan.
Solución
Hay una extensión de Firefox que se encuentra sin usar los selectores de CSS en una página.Tiene una opción para la araña de todo el sitio.La versión 3.01 debe trabajar con las versiones más recientes de Firefox.
https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/
Y aquí es otra opción.
Otros consejos
Usted no tiene que pagar cualquier servicio web o la búsqueda de un complemento, que ya esta en Google Chrome bajo F12 (Inspector)->Audits->Remove unused CSS rules
Captura de pantalla:
Actualización:30 de Junio de 2017
Ahora Chrome 59 proporciona CSS y JS de cobertura de código.Ver https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage
A nivel de archivo:
usar wget para agresivamente araña el sitio y, a continuación, el proceso de http registros del servidor para obtener la lista de archivos de acceso, diff esta con los archivos en el sitio
diff \
<(sed some_rules httpd_log | sort -u) \
<(ls /var/www/whatever | sort -u) \
| grep something
CSS Redundancia Corrector es una herramienta que se ejecuta de forma local, el que se pasa una hoja de estilos y una lista de direcciones Url o un directorio de archivos HTML.He aquí la descripción dada en la herramienta del sitio:
Un simple script que, dada una hoja de estilo CSS y un .archivo txt listado de direcciones Url de los archivos HTML, o un directorio de archivos HTML, se repite sobre todos ellos y la lista de CSS declaraciones en la hoja de estilos que se nunca se llama en el HTML.
Básicamente, te ayuda a mantener tus archivos CSS relevante y compacto.Y es razonablemente precisa.
Trate de WARI - Web de Recursos de la Aplicación Inspector.
Se encuentra sin usar imágenes, no usado y duplicado de CSS/JS.
Enlace: wari.konem.net
Como señaló Tim Murtaugh en Una Lista Aparte blog "Dos Herramientas para Mantener Tu CSS Limpio":
csscss se analiza los archivos CSS y hacerle saber que las reglas han duplicado las declaraciones.
Y la más relevante a la pregunta:
helio-css
El helio es una herramienta para descubrir sin usar CSS a través de muchas páginas en una web sitio.
La herramienta está basada en javascript y se ejecuta desde el navegador.
Helio acepta una lista de direcciones Url para las diferentes secciones de un sitio, a continuación, carga y analiza cada página para crear una lista de todas las hojas de estilo.Es luego de las visitas de cada página en la lista de URL y verifica si los selectores se encuentra en las hojas de estilo se utilizan en las páginas.Por último, se genera un informe en el que se detalla cada una de las hojas de estilos y de los selectores que no fueron encontrado para ser utilizado en cualquiera de esas páginas.
Me parece recordar Adobe Dreamweaver o Adobe Golive tener una función para encontrar ambos huérfanos de los estilos y las imágenes;no puede recordar que ahora.Posiblemente ambos, pero las características estaban bien escondidos.
TopStyle tiene una suite de herramientas para localizar y tratar con los huérfanos de clases.También se le dará informes en donde IDs y clases que se usan en el código HTML, que permite abrir rápidamente y pasar a la correspondiente marcado.Aquí está la propaganda de la página web sobre esta función:
Informes De Sitios:Ver de un vistazo dónde los estilos se utilizan en su sitio.Averiguar donde se haya aplicado el estilo de las clases que no están definidos en cualquier estilo las hojas, o ver lo que las clases de estilo usted ha definido y que no están siendo utilizadas.
Muy útil para la disección de los sitios web desconocidos.
No la encuentra sin usar imágenes, aunque.
Chrome canary build tiene una opción en la barra de herramientas de desarrollo para "CSS Cobertura" como uno de los experimentales características de desarrollo.Esta opción aparece en la ficha línea del tiempo y pueden ser utilizados para obtener una lista de los sin usar CSS.
Por favor, tenga en cuenta que usted necesita para activar esta función en la configuración de la barra de herramientas de desarrollo también.Esta característica debe probablemente a oficial de chrome versión.
He encontrado esta herramienta que funciona con todas las versiones de Firefox!Toma un poco de tiempo para aprender cómo funciona, pero una vez que comienza parece bastante buena.Se guardará una nueva versión de la CSS con observó los selectores de CSS, de modo que usted puede regresar rápidamente si es necesario.
Esta pequeña herramienta te da una lista de las reglas css en uso por algunos de html.
Aquí es en Código De La Pluma
Haga clic en Ejecutar fragmento de código, a continuación, haga clic en Página completa para llegar a ella.A continuación, siga las instrucciones que aparecen en el fragmento.Se puede ejecutar de página completa para ver que funcione con tu html / css.
Pero es más fácil sólo para marcar mi código lápiz como herramienta de trabajo.
/* 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 mencionadas aquí son grandes para la CSS.Yo no sé acerca de Dreamweaver & Co.Pero he hecho un pequeño programa un tiempo para que me ayude a limpiar mi sitio web proyectos
No ayuda con CSS & cosas, sino con huérfanos imágenes y otros tipos de archivos.
Espero que ayude!
Helio CSS es una gran herramienta para esto.Cabe señalar sin embargo que usted debe ejecutar esta herramienta en el desarrollo o la versión local de su sitio web.Si ejecuta esta en una versión de producción, los visitantes podrán ver el Helio entorno de prueba.
Para responder a su pregunta acerca de una herramienta para encontrar sin usar archivos de imagen, puede utilizar Xenu Link Sleuth a la araña de su sitio para encontrar todas las imágenes que el sitio utiliza.A continuación, Xenu le pide acceso ftp para que pueda rastrear sus directorios para encontrar archivos huérfanos.Aún no la he usado en un servidor de producción, pero suena digno de mirar en.
EDITAR:Simplemente hay que tener cuidado de no borrar las imágenes que se utilizan por javascript.
