O painel Coverage ajuda a encontrar códigos JavaScript e CSS não usados. A remoção de códigos não usados pode acelerar o carregamento de página e economizar os dados móveis dos usuários.
Visão geral
O envio de JavaScript ou CSS não usados é um problema comum no desenvolvimento da Web. Por exemplo, suponha que você queira usar o componente de botão do Bootstrap na sua página. Para usar o componente de botão, adicione um link à folha de estilo do Bootstrap no HTML, assim:
...
<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>
...
Essa folha de estilo não inclui apenas o código do componente de botão. Ela contém o CSS de todos os componentes do Bootstrap. Mas você não está usando nenhum dos outros componentes do Bootstrap. Portanto, sua página está fazendo o download de um monte de CSS que não precisa. Esse CSS extra é um problema pelos seguintes motivos:
- O código extra deixa o carregamento de página mais lento. Consulte CSS de bloqueio 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.
O painel Coverage permite gravar sua página e conferir um relatório do total de bytes usados e não usados de recursos CSS e JavaScript, além de rastrear o código no painel Sources.
Abrir o painel Coverage
- Abra o DevTools.
- Abra o Command Menu (link em inglês).
Comece a digitar
coverage, selecione o comando Show Coverage e então pressione Enter para executar o comando. O painel Coverage é aberto na Drawer.
Como alternativa, no canto superior direito, selecione more_vert Mais opções > Mais ferramentas > Coverage.
Gravar a 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 Coverage, selecione Per function ou Per block na lista suspensa.
Para iniciar a gravação, clique no botão Reload no centro do painel. O painel Coverage recarrega a página, captura o código necessário para carregar a página e continua a gravação enquanto você interage com ela.
Para interromper a gravação da cobertura de código, clique em Parar a cobertura de instrumentação e mostrar resultados na barra de ações do painel.
Analisar a cobertura de código
A tabela no painel Coverage mostra quais recursos foram analisados e quanto código é usado em cada recurso.
Clique em uma linha para abrir esse recurso no painel Sources e conferir uma detalhamento linha por linha do código usado e não usado. Todas as linhas de código não usadas são marcadas com linhas verticais cinzas ao lado da coluna com números de linha à esquerda.
- A coluna URL é o URL do recurso que foi analisado.
- A coluna Type informa se o recurso contém CSS, JavaScript ou ambos.
- A coluna Total Bytes é o tamanho total do recurso em bytes.
- A coluna Unused Bytes é o número de bytes que não foram usados.
- A coluna Usage Visualization é uma visualização das colunas Total Bytes e Unused Bytes. A seção cinza da barra é de bytes não usados. A seção verde é de bytes usados.
Para filtrar o relatório por URL, especifique-o no filtro na barra de ações.
A barra de status na parte de baixo do painel Coverage mostra a porcentagem de código usado. A barra de status considera a filtragem.
Ao lado da barra de filtro, na lista suspensa, você pode selecionar All ou apenas CSS ou JavaScript para mostrar no relatório.
Para incluir o código de extensão no relatório, ative Scripts de conteúdo.
Para exportar o relatório, clique em Export coverage.