O painel Cobertura do Chrome DevTools pode ajudar você a encontrar códigos JavaScript e CSS não utilizados. A remoção de códigos não utilizados pode acelerar o carregamento da página e economizar os dados móveis dos usuários.
Visão geral
O envio de JavaScript ou CSS não utilizados é um problema comum no desenvolvimento da Web. Por exemplo, suponha que você queira usar o componente do botão de inicialização na sua página. Para usar o componente do botão, é preciso adicionar um link para a folha de estilo do Bootstrap em seu HTML, desta forma:
...
<head>
...
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
...
</head>
...
Esta folha de estilo não inclui apenas o código do componente do botão. Ela contém o CSS para todos os componentes do Bootstrap. Mas você não está usando nenhum dos outros componentes do Bootstrap. Sua página está fazendo o download de vários CSSs desnecessários. Esse CSS extra é um problema pelos seguintes motivos:
- O código extra deixa o carregamento da página mais lento. Consulte CSS bloqueador de renderização.
- Se um usuário acessar a página em um dispositivo móvel, o código extra vai consumir os dados móveis dele.
Abrir o painel "Cobertura"
- Abra o menu de comandos.
Comece a digitar
coverage, selecione o comando Show Coverage e pressione Enter para executar o comando. O painel Cobertura será aberto na gaveta.
Gravar cobertura de código
Para capturar a cobertura de código:
Para definir o escopo da cobertura, na barra de ações na parte de cima do painel Cobertura, selecione Por função ou Por bloco na lista suspensa.
Para iniciar a gravação, clique em Atualizar Começar a cobertura de instrumentação e atualizar a página. O painel Cobertura atualiza a página, captura o código necessário para carregar e continua a gravação enquanto você interage com ela.
Para interromper a gravação da cobertura do código, clique em stop_circle Parar cobertura de instrumentação e mostrar resultados.
Analisar a cobertura do código
A tabela no painel Cobertura mostra quais recursos foram analisados e a quantidade de código usada em cada recurso.
Clique em uma linha para abrir o recurso no painel Fontes e ver um detalhamento linha por linha do código usado e do não utilizado. Todas as linhas de código não utilizadas são marcadas com linhas vermelhas ao lado da coluna com números de linha à esquerda.
- A coluna URL é o URL do recurso analisado.
- A coluna Tipo indica se o recurso contém CSS, JavaScript ou ambos.
- A coluna Total de bytes é o tamanho total do recurso em bytes.
- A coluna Unused Bytes é o número de bytes que não foram usados.
- A última coluna sem nome é uma visualização das colunas Total Bytes e Unused Bytes. A seção vermelha da barra são bytes não utilizados. A seção cinza é usada em bytes.
Para filtrar o relatório por URL, especifique-o no filtro da barra de ações.
A barra de status na parte inferior do painel Cobertura mostra a porcentagem de código usada. A barra de status considera o filtro.
Ao lado da barra de filtro, na lista suspensa, você pode selecionar Todos ou apenas CSS ou JavaScript para exibir no relatório.
Para incluir o código da extensão no seu relatório, ative check_box Scripts de conteúdo.
Para exportar o relatório, clique em fazer o download da cobertura da exportação.