Como descobrir a origem da requisição de um arquivo (ex: JavaScript) no Google Chrome1 min leitura

Aprenda a identificar quem está fazendo a chamada de um arquivo em um site.

Para fazer a otimização de velocidade de carregamento em um site, um dos desafios é a redução de requisições. Mas nem sempre a origem desta requisição é clara. Recentemente me deparei com o problema de não saber quem estava adicionando um JavaScript em um site. Enquanto procurava uma ferramenta específica para esta identificação, descobri é possível fazer isto diretamente pelo DevTools do navegador Google Chrome (desde a versão 80).

Passos para descobrir a origem de uma requisição no Google Chrome
Passos para descobrir a origem de uma requisição no Google Chrome

Para fazer isso, abra o DevTools no Chrome (F12) em um site e siga os passos abaixo:

  1. Selecione a aba Network e recarregue a página;
  2. Busque pelo nome do arquivo desejado, no meu caso digitei emoji;
  3. Selecione o arquivo para ver os detalhes dele;
  4. Clique na aba Initiator;
  5. Veja as informações do item Request initiator chain. Na imagem acima, o arquivo wp-emoji-release.min.js foi iniciado pelo script breeze_1016b7ff87b2ca4ff53966b2012892b8.js.

Este é um exemplo bem simples e pode não parecer muito útil, mas quando você está trabalhando em um site que utiliza um ou mais gerenciadores de scripts (como o Google Tag Manager ou o Segment), fica difícil manter o controle de onde está sendo sendo feito a requisição de um arquivo.

Obrigado ao meu xará Daniel Nass por me ensinar esta dica!

Posts Similares

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *