Cobertura: encontre JavaScript e CSS não utilizados

Kayce Basques
Kayce Basques
Sofia Emelianova
Sofia Emelianova

O painel Cobertura no Chrome DevTools pode ajudar a encontrar JavaScript não usado e código CSS. 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.

Analisar a cobertura de código.

Visão geral

O envio de JavaScript ou CSS não utilizado é 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, você precisa adicionar um link Folha de estilo de inicialização no seu HTML, como esta:

...
<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 qualquer um dos outros componentes de inicialização. Sua página está fazendo o download de vários CSS desnecessário. Esse CSS extra é um problema para os 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 usará até usando os dados móveis.

Abrir o painel "Cobertura"

  1. Abra o menu de comando.
  2. Comece a digitar coverage, selecione o comando Show Coverage e depois pressione Enter para executar o comando. O painel Cobertura é aberto em a Gaveta.

    O painel &quot;Cobertura&quot;.

Gravar cobertura de código

Para capturar a cobertura de código:

  1. Para definir o escopo da cobertura, selecione Por função ou Por bloco na lista suspensa na barra de ações na parte de cima do painel Cobertura.

  2. Para iniciar a gravação, clique em refresh Iniciar cobertura de instrumentação e atualizar a página. O painel Cobertura recarrega a página, captura o código necessário para carregar a página e continua a gravação enquanto você interage com a página.

  3. Para interromper a gravação da cobertura do código, clique em stop_circle Parar a cobertura de instrumentação e mostrar resultados.

Analisar a cobertura de 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 Origens e conferir 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.

Um relatório de cobertura de código.

  • A coluna URL é o URL do recurso que foi analisado.
  • A coluna Tipo 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 última coluna sem nome é uma visualização dos dados Total Bytes e Colunas Unused Bytes. A seção vermelha da barra mostra os bytes não utilizados. A cinza é usada.

Para filtrar o relatório por URL, especifique no filtro da barra de ações.

A barra de status na parte de baixo do painel Cobertura mostra a porcentagem de código usado. A barra de status considera a filtragem.

Ao lado da barra de filtro, na lista suspensa, selecione Todos ou somente CSS ou JavaScript para mostrar no relatório.

Para incluir o código de extensão no seu relatório, marque check_box scripts de conteúdo.

Para exportar seu relatório, clique em Fazer download da seção Cobertura da exportação.