O Code Coverage testa cada seletor em cada folha de estilo legível na página ativa, para que você possa ver quais regras CSS atualmente não correspondem a nada, quantos bytes cada arquivo desperdiça e quais scripts estão retendo a primeira pintura.
As folhas de estilo só crescem. Um tema chega com regras para páginas que você não possui, uma estrutura envia componentes que você nunca usa e, três reformulações depois, ninguém tem certeza de qual metade do arquivo suporta carga. O resultado é CSS que custa largura de banda de cada visitante e tempo de renderização para entregar regras que a página não pode usar.
A cobertura do código mede isso diretamente. Ele percorre todas as regras em todas as folhas de estilo que o navegador permite ler - incluindo regras aninhadas em consultas de mídia, blocos @supports e @layer - e testa cada seletor em relação ao DOM ativo. Uma regra que não corresponde a nada no momento é relatada como não utilizada, por arquivo, com uma porcentagem, os bytes desperdiçados e a lista completa de seletores que você pode expandir e copiar.
É cuidadoso com as armadilhas óbvias. Pseudoelementos e pseudoclasses de estado são removidos antes da correspondência, portanto, uma regra :hover ou ::before é julgada se seu seletor base existe, em vez de ser descartado incorretamente. As folhas de estilo servidas de origem cruzada sem cabeçalhos CORS não podem ser lidas por nenhum script, portanto, são sinalizadas como ilegíveis em vez de serem contadas silenciosamente como perfeitas. E como a varredura reflete a página como ela está naquele momento, as regras para menus, guias e modais que ainda não estão abertos parecerão não utilizadas – então abra-as e pressione Re-scan antes de excluir qualquer coisa.
A aba JavaScript responde a uma pergunta diferente: peso e bloqueio. Ele inventaria cada script que a página carrega com seu tamanho de transferência, seu tempo de download e se é assíncrono, adiado, um módulo, carregado dinamicamente ou retendo a primeira pintura e, em seguida, totaliza quantos bytes estão bloqueados. Ele deliberadamente não é vendido como cobertura de execução - saber quais linhas JavaScript foram executadas requer a API do depurador do Chrome, que o DevSuite Pro não solicita, portanto, nada aqui finge ser um relatório em nível de linha.
Cada regra em cada folha de estilo legível é testada no DOM ativo, incluindo regras dentro de consultas de mídia, blocos @supports e @layer — não estimados a partir de nomes ou tamanhos de arquivos.
Cada folha de estilo obtém uma porcentagem não utilizada, uma contagem de regras usadas versus não utilizadas e o número de bytes desperdiçados, classificados de forma que o pior infrator fique no topo.
Expanda qualquer arquivo para ler os seletores que não correspondem a nada e copie-os como um bloco CSS para trabalhar em seu editor ou entregá-los a um colega de equipe.
Pseudoelementos e pseudoclasses de estado, como :hover e :focus-within, são removidos antes da correspondência, de modo que as regras interativas são julgadas de forma justa, em vez de serem descartadas.
Cada script listado com seu tamanho, tempo de download e se é assíncrono, adiado, um módulo, carregado dinamicamente ou bloqueando a primeira pintura - além do total de bytes de bloqueio.
Folhas de estilo de origem cruzada ilegíveis são sinalizadas em vez de pontuadas, e a guia JS diz claramente que mede o peso, não quais linhas são executadas. Não há números inventados.
Um tema adquirido envia CSS para dezenas de layouts de demonstração. Veja quanto seu site nunca usa e reduza o arquivo com evidências, em vez de suposições.
Verifique quanto de uma estrutura CSS sobrevive em um modelo real e se sua configuração de eliminação ou agitação de árvore está fazendo o que você pensa que está.
Liste os scripts que estão impedindo a renderização, com seus tamanhos, e decida o que adiar, dividir ou descartar para exibir o conteúdo na tela mais rapidamente.
Entre com números: quais arquivos desperdiçam mais bytes, quanto JavaScript está bloqueando e onde a primeira hora de trabalho compensa mais.
Assumindo o controle de um site que você não construiu, faça uma leitura rápida sobre quanto de seu CSS e JavaScript ainda merece seu lugar.
Clique no ícone Code Coverage no dock do DevSuite Pro. A verificação é executada imediatamente e informa quantas regras foram verificadas e qual parcela delas não foi utilizada.
A linha superior fornece a contagem de folhas de estilo, o total de regras, a porcentagem não utilizada e os bytes desperdiçados. Os arquivos abaixo estão ordenados por quanto desperdiçam.
Clique em mostrar seletores não utilizados em qualquer arquivo para ler exatamente quais regras não correspondem a nada nesta página.
Abra menus, guias, acordeões e modais e pressione Digitalizar novamente. As regras cujos elementos só existem nesses estados passarão de não utilizadas para usadas — sempre faça isso antes de excluir.
Copiar seletores não utilizados fornece um bloco CSS para trabalhar; Exportar JSON copia o relatório completo, incluindo o inventário JavaScript, para um ticket ou documento de auditoria.
Instale o DevSuite Pro gratuitamente e desbloqueie mais de 71 ferramentas de desenvolvedor para seu navegador.
