Como posso encontrar imagens e estilos CSS não utilizados em um site?[fechado]
https://stackoverflow.com/questions/33242
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Existe algum método (além de tentativa e erro) que posso usar para localizar arquivos de imagem não utilizados?Que tal declarações CSS para ID's e Classes que nem existem no site?
Parece que pode haver uma maneira de escrever um script que escaneie o site, crie um perfil dele e veja quais imagens e estilos nunca são carregados.
Solução
Existe uma extensão do Firefox que encontra seletores CSS não utilizados em uma página.Tem a opção de rastrear todo o site.A versão 3.01 deve funcionar com versões mais recentes do Firefox.
https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/
E aqui está outra opção.
Outras dicas
Você não precisa pagar nenhum serviço web ou procurar um addon, você já tem isso no Google Chrome em F12 (Inspector)->Audits->Remove unused CSS rules
Captura de tela:
Atualizar:30 de junho de 2017
Agora o Chrome 59 oferece Cobertura de código CSS e JS.Ver https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage
No nível do arquivo:
use o wget para rastrear agressivamente o site e, em seguida, processe os logs do servidor http para obter a lista de arquivos acessados, compare isso com os arquivos do site
diff \
<(sed some_rules httpd_log | sort -u) \
<(ls /var/www/whatever | sort -u) \
| grep something
Verificador de redundância CSS é uma ferramenta que você executa localmente, à qual você passa uma folha de estilo e uma lista de URLs ou um diretório de arquivos HTML.Aqui está a descrição fornecida no site da ferramenta:
Um script simples que, dado uma folha de estilo CSS e um arquivo .txt Listagem de URLs de arquivos HTML ou um diretório de arquivos HTML, irá itera sobre todos eles e listará as instruções CSS na folha de estilo que nunca são chamadas no HTML.
Basicamente, ajuda a manter seus arquivos CSS relevantes e compactos.E é razoavelmente preciso.
Experimente o WARI - Inspetor de recursos de aplicativos da Web.
Ele encontra imagens não utilizadas, CSS/JS não utilizados e duplicados.
Link: wari.konem.net
Conforme observado por Tim Murtaugh na postagem do blog A List Apart, "Duas ferramentas para manter seu CSS limpo":
O CSSCSS analisará todos os arquivos CSS que você fornecer e informará quais conjuntos de regras terem declarações duplicadas.
E o mais relevante para a questão:
hélio-css
O hélio é uma ferramenta para descobrir CSS não utilizados em muitas páginas em um site.
A ferramenta é baseada em javascript e roda no navegador.
O Helium aceita uma lista de URLs para diferentes seções de um site e carrega e analisa cada página para criar uma lista de todas as folhas de estilo.Em seguida, ele visita cada página na lista de URL e verifica se os seletores encontrados nas folhas de estilo são usados nas páginas.Por fim, gera um relatório que detalha cada folha de estilo e os seletores que não foram encontrados para serem usados em nenhuma das páginas fornecidas.
Parece que me lembro do Adobe Dreamweaver ou do Adobe Golive com um recurso para localizar estilos e imagens órfãos;não consigo lembrar qual agora.Possivelmente ambos, mas os recursos estavam bem escondidos.
O melhor estilo possui um conjunto de ferramentas para localizar e lidar com classes órfãs.Ele também fornecerá relatórios sobre onde IDs e classes são usados no HTML, permitindo que você abra e pule rapidamente para a marcação relevante.Aqui está a sinopse do site sobre esse recurso:
Relatórios do site:Veja rapidamente, onde os estilos são usados em seu site.Descubra onde você aplicou aulas de estilo que não são definidas em nenhuma folha de estilo ou veja quais classes de estilo você definiu que não estão sendo usadas.
Muito útil para dissecar sites desconhecidos.
No entanto, ele não encontra imagens não utilizadas.
A versão canário do Chrome tem uma opção na barra de ferramentas do desenvolvedor para "Cobertura CSS" como um dos recursos experimentais do desenvolvedor.Esta opção aparece na aba da linha do tempo e pode ser usada para obter uma lista do CSS não utilizado.
Observe que você também precisará ativar esse recurso nas configurações da barra de ferramentas do desenvolvedor.Este recurso provavelmente deve chegar ao lançamento oficial do Chrome.
Encontrei esta ferramenta que funciona com todas as versões do Firefox!Demora um pouco para aprender como funciona, mas depois de iniciado parece muito bom.Ele salvará uma nova versão do CSS com seletores CSS comentados para que você possa reverter rapidamente se precisar.
Esta pequena ferramenta fornece uma lista das regras CSS usadas por alguns HTML.
Aqui está Caneta de código
Clique em Execute o trecho de código, e clique em Página inteira para entrar nisso.Em seguida, siga as instruções no trecho.Você pode executá-lo em página inteira para ver como funciona com seu html/css.
Mas é mais fácil marcar minha caneta de código como ferramenta.
/* 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 as ferramentas listadas aqui são ótimas para CSS.Não sei sobre Dreamweaver & Co.Mas eu fiz um pequeno programa há algum tempo para me ajudar a limpar os projetos do meu site
Localizar arquivos não utilizados
Não ajuda com CSS e outras coisas, mas sim com imagens órfãs e outros tipos de arquivos.
Espero que ajude!
Helium CSS é uma ótima ferramenta para isso.Deve-se observar, porém, que você deve executar esta ferramenta em uma versão local ou de desenvolvimento do seu site.Se você executar isso em uma versão de produção, seus visitantes poderão ver o ambiente de teste do Helium.
Para responder à sua pergunta sobre uma ferramenta para localizar arquivos de imagem não utilizados, você pode usar Detetive Link Xenu para rastrear seu site para encontrar todas as imagens que ele usa.Em seguida, o Xenu solicita acesso FTP para que ele possa rastrear seus diretórios para encontrar arquivos órfãos.Ainda não o usei em um servidor de produção, mas parece valer a pena dar uma olhada.
EDITAR:Basta ter cuidado para não deletar imagens que são utilizadas por javascript.
