Observação
O acesso a essa página exige autorização. Você pode tentar entrar ou alterar diretórios.
O acesso a essa página exige autorização. Você pode tentar alterar os diretórios.
A ferramenta Coverage ajuda você a encontrar códigos JavaScript e CSS não utilizados. A remoção de código não utilizado pode acelerar o carregamento da página e salvar os dados celulares dos usuários móveis.
Este guia aborda como localizar código não utilizado usando a ferramenta Cobertura . Este guia não aborda como refatorar uma base de código para evitar código não utilizado, pois a refatoração de código depende da sua pilha de tecnologia.
Visão geral
O envio de JavaScript ou CSS não utilizado é um problema comum no desenvolvimento na Web. Por exemplo, suponha que você queira usar o componente do botão Bootstrap em sua página. Para usar o componente de botão, você precisa adicionar um link para a folha de estilo do Bootstrap em seu HTML, assim:
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
</head>
<body>
<button class="btn btn-primary">Button</button>
</body>
</html>
Esta folha de estilo não inclui apenas o código para o componente do botão Bootstrap; ele contém o CSS para todos os componentes do Bootstrap. Como sua página usa apenas o componente de botão, você está fazendo com que os usuários baixem o código extra de que eles não precisam. A ferramenta Cobertura ajuda você a encontrar código não utilizado como este.
Abrir a ferramenta Cobertura
Para localizar o código não utilizado em sua página, use a ferramenta Cobertura :
Para abrir o DevTools, clique com o botão direito do mouse na página da Web e selecione Inspecionar. Ou pressione Ctrl+Shift+I (Windows, Linux) ou Command+Option+I (macOS). O DevTools é aberto.
No DevTools, abra o Menu de Comando. Para abrir o Menu de Comando, pressione Ctrl+Shift+P (Windows, Linux) ou Command+Shift+P (macOS).
Comece a digitar cobertura, pressione a tecla Seta para baixo para realçar o comando Mostrar cobertura e pressione Enter:
A ferramenta Cobertura é aberta no painel Visualização Rápida na parte inferior do DevTools:
Cobertura de código de registro
Clique em um dos seguintes botões na ferramenta Cobertura :
Para ver qual código é necessário para carregar a página, clique no botão Iniciar cobertura de instrumentação e atualizar a página (
).Para ver qual código é usado após interagir com a página, clique no botão Cobertura do instrumento (
).
Para interromper a gravação da cobertura de código, clique no botão Parar cobertura de instrumentação e mostrar resultados (
).
Analisar a cobertura de código
A tabela na ferramenta Cobertura exibe os recursos que foram analisados e quanto código é usado em cada recurso. Clique em uma linha para abrir esse recurso na ferramenta Fontes e exibir um relatório de cobertura de código que fornece uma divisão linha por linha do código usado e do código não utilizado:
Colunas no relatório de cobertura de código:
| Coluna | Descrição |
|---|---|
| URL | A URL do recurso que foi analisado. |
| Tipo | Se o recurso contém CSS, JavaScript ou ambos. |
| Total Bytes | O tamanho total do recurso em bytes. |
| Bytes não utilizados | O número de bytes que não foram usados. |
| Visualização de Uso | Uma visualização das colunas Total de Bytes e Bytes Não Utilizados . A seção verde da barra é usada em bytes. A seção vermelha da barra é de bytes não utilizados. |
Observação
Partes desta página são modificações baseadas no trabalho criado e compartilhado pelo Google e usadas de acordo com os termos descritos na Licença Pública Creative Commons Atribuição 4.0 Internacional. A página original é encontrada aqui e é de autoria de Kayce Basques.
Este trabalho está licenciado sob uma Licença Creative Commons Atribuição 4.0 Internacional.