Localizar código JavaScript e CSS não utilizado com a ferramenta Cobertura
A ferramenta Cobertura ajuda-o a encontrar código JavaScript e CSS não utilizados. Remover código não utilizado pode acelerar o carregamento da página e guardar os dados via rede móvel dos utilizadores móveis.
Este guia aborda como localizar código não utilizado com a ferramenta Cobertura . Este guia não abrange como refatorizar uma base de código para evitar código não utilizado, uma vez que a refatorização do código depende da pilha de tecnologia.
Visão geral
O envio de JavaScript ou CSS não utilizados é um problema comum no desenvolvimento Web. Por exemplo, suponha que pretende utilizar o componente de botão Bootstrap na sua página. Para utilizar o componente de botão, tem de adicionar uma ligação para a folha de estilos Bootstrap no seu HTML, da seguinte forma:
<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 estilos não inclui apenas o código para o componente do botão Bootstrap; contém o CSS para todos os componentes do Bootstrap. Uma vez que a sua página utiliza apenas o componente de botão, está a fazer com que os utilizadores transfiram código adicional de que não precisam. A ferramenta Cobertura ajuda-o a encontrar código não utilizado, como este.
Abrir a ferramenta Cobertura
Para localizar código não utilizado na sua página, utilize a ferramenta Cobertura :
Para abrir o DevTools, clique com o botão direito do mouse na página da Web e selecione Inspecionar. Em alternativa, prima Ctrl+Shift+I (Windows, Linux) ou Comando+Opção+I (macOS). O DevTools é aberto.
Em DevTools, abra o Menu de Comandos. Para abrir o Menu de Comandos, prima Ctrl+Shift+P (Windows, Linux) ou Comando+Shift+P (macOS).
Comece a escrever cobertura, prima a tecla Seta Para Baixo para realçar o comando Mostrar Cobertura e, em seguida, prima Enter:
A ferramenta Cobertura é aberta no painel Vista Rápida na parte inferior das DevTools:
Cobertura do código de registo
Clique num dos seguintes botões na ferramenta Cobertura :
Para ver que código é necessário para carregar a página, clique no botão Começar a instrumentar a cobertura e atualize a página (
).Para ver que código é utilizado depois de interagir com a página, clique no botão Cobertura do instrumento (
).
Para parar a gravação da cobertura do código, clique no botão Parar a cobertura da instrumentação e mostrar resultados (
Analisar a cobertura do código
A tabela na ferramenta Cobertura apresenta os recursos analisados e a quantidade de código utilizada em cada recurso. Clique numa linha para abrir esse recurso na ferramenta Origens e apresentar um relatório de cobertura de código que fornece uma discriminação linha a linha do código utilizado e do código não utilizado:
Colunas no relatório de cobertura do código:
| Coluna | Descrição |
|---|---|
| URL | O 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 utilizados. |
| Visualização de Utilização | Uma visualização das colunas Total bytes e Bytes Não Utilizados . A secção verde da barra é utilizada bytes. A secção vermelha da barra é 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 encontra-se aqui e é criada por Kayce Bascos (Technical Writer, Chrome DevTools & Lighthouse).
Este trabalho é licenciado ao abrigo de uma Licença Internacional creative Commons Attribution 4.0.