Como posso encontrar imagens não utilizadas e estilos CSS em um site? [fechadas]

Existe um método (diferente de tentativa e erro) que posso usar para localizar arquivos de imagem não utilizados? Que tal declarações de 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.

HáHavia uma extensão do Firefox que encontraencontrados seletores CSS não utilizados em uma página. istotemteve a opção de rastrear todo o site. Versão 3.01devemos pode funcionar com versões mais recentes do Firefox.

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

E aqui está outra opção:

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

Você não precisa pagar nenhum serviço da web ou procurar um complemento, você já tem isso no Google Chrome em F12 (Inspector)->Audits->Remove unused CSS rules

Captura de tela:

Atualização: 30 de junho de 2017

Agora o Chrome 59 oferece cobertura de código CSS e JS . Consulte https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage

No nível do arquivo:

use o wget para spider agressivamente o site e, em seguida, processe os logs do servidor http para obter a lista de arquivos acessados, diferencie-a com os arquivos do site

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

O CSS Redundancy Checker é uma ferramenta executada 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, dada uma folha de estilo CSS e um arquivo .txt listando URLs de arquivos HTML ou um diretório de arquivos HTML, irá iterar sobre todos eles e listar as instruções CSS na folha de estilo que nunca são chamadas no HTML.

Basicamente, ajuda você a manter seus arquivos CSS relevantes e compactos. E é razoavelmente preciso.

Conforme observado por Tim Murtaugh na postagem do blog A List Apart, " Duas ferramentas para manter seu CSS limpo ":

csscss

csscss irá analisar quaisquer arquivos CSS fornecidos e informá-lo sobre quais conjuntos de regras têm declarações duplicadas.

E o mais relevante para a questão:
hélio-css

Helium é uma ferramenta para descobrir CSS não utilizado em muitas páginas de um site.

A ferramenta é baseada em javascript e funciona a partir do navegador.

Helium aceita uma lista de URLs para diferentes seções de um site e então carrega e analisa cada página para construir uma lista de todas as folhas de estilo. Em seguida, ele visita cada página na lista de URLs e verifica se os seletores encontrados nas folhas de estilo são usados ​​nas páginas. Finalmente, ele gera um relatório que detalha cada folha de estilo e os seletores que não foram 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 me lembrar qual agora. Possivelmente ambos, mas as características estavam bem escondidas.

TopStyle 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 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 classes de estilo que não estã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.

Ele não encontra imagens não utilizadas, no entanto.

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. Essa opção aparece na guia da linha do tempo e pode ser usada para obter uma lista de CSS não usado.

Observe que você também precisa habilitar 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 assim que começa parece muito bom. Ele salvará uma nova versão do CSS com seletores de CSS destacados para que você possa reverter rapidamente se precisar.

Uso de CSS - Firefox Addon

Esta pequena ferramenta fornece uma lista das regras de css em uso por alguns html.

Aqui está na Code Pen

Clique em e Run code snippet, a seguir, clique em Full pagepara acessar. Em seguida, siga as instruções no snippet. Você pode executá-lo na página inteira para ver o funcionamento com o seu html / css.

Mas é mais fácil apenas marcar minha caneta de código como uma 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 o Dreamweaver & Co. Mas fiz um pequeno programa há algum tempo para me ajudar a limpar os projetos do meu site

Localizar arquivos não usados

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 notar, porém, que você deve executar essa ferramenta em uma versão de desenvolvimento ou local 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.

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

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

Para responder à sua pergunta sobre uma ferramenta para encontrar arquivos de imagem não utilizados, você pode usar Xenu Link Sleuth 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: Você só precisa ter cuidado para não deletar imagens que são usadas por javascript.