Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the ultimate-addons-for-gutenberg domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /sites/danielkossmann.com/files/wp-includes/functions.php on line 6114

Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the hustle domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /sites/danielkossmann.com/files/wp-includes/functions.php on line 6114
Como descobrir a origem da requisição de um arquivo (ex: JavaScript) no Google Chrome - Daniel Kossmann

Daniel Kossmann

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

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

—

by

Daniel Kossmann
in

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!

Daniel Kossmann

Sou apaixonado por aprendizado contínuo e compartilhamento de conhecimento, por isso defendo o código aberto e o Creative Commons. Acredito que compartilhar conhecimento pode impulsionar a inovação e melhorar o mundo.

Comments

Deixe um comentário

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