Cobertura: encontre JavaScript e CSS não utilizados

Kayce Basco
Kayce Basques

A guia "Cobertura" no 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 de dispositivos móveis.

Como analisar a cobertura de código.
Figura 1. Como analisar a cobertura de código.

Informações gerais

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 página. Para usar o componente do botão, é preciso adicionar um link para a folha de estilo do Inicializar no 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>
...

Essa folha de estilo não inclui apenas o código do componente do botão. Ele contém o CSS para 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 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 consumirá os dados móveis dele.

Abra a guia "Cobertura"

  1. Abra o menu de comando.
  2. Comece a digitar coverage, selecione o comando Show Coverage e pressione Enter para executá-lo. A guia Cobertura é aberta na Gaveta.
A guia Cobertura
Figura 2. A guia Cobertura.

Gravar cobertura de código

  1. Clique em um dos seguintes botões na guia Cobertura:
    • Clique em Começar a instrumentar a cobertura e atualizar a página Atualizar se quiser ver qual código é necessário para carregar a página.
    • Clique em Cobertura do instrumento Gravar se quiser ver qual código é usado depois da interação com a página.
  2. Clique em Stop Instrumenting Coverage And Show Results Parar quando quiser parar de gravar a cobertura do código.

Analisar a cobertura do código

A tabela na guia 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 código não utilizado. Todas as linhas de código não utilizadas terão uma linha vermelha no início.

Um relatório de cobertura de código.
Figura 3. Um relatório de cobertura de código.
  • A coluna URL é o URL do recurso que foi analisado.
  • A coluna Tipo indica 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 não 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 verde é o de bytes usados.