Agora finalmente chegando no tópico que motivou essa série vamos falar sobre a aba de rede do chrome devtools. A aba de rede é onde nós vamos verificar os detalhes para todas as requisições feitas no navegador, sejam requisições disparadas pelo JavaScript ou requisições a recursos externos (imagens, fontes, arquivos css e etc).

Para demonstrarmos os exemplos do artigo de hoje, vamos visitar a página de exemplo para a aba de rede do devtools fornecida pelo próprio Google: https://devtools.glitch.me/network/getstarted.html.

Ao entrar nela, você vai se deparar com algo semelhante a está tela aqui:

E como de costume vamos acessar o devtools através de algum dos meios a baixo:

• ctrl + shift + i
• crtl + shift + j
• f12
• Clique com o botão direito do mouse → insepecionar elemento

E então selecionar a aba Rede (ou Network se o seu navegador estiver em inglês) e então verá uma tela semelhante a está:

E agora estamos prontos para explorar essa ferramenta de desenvolvedor.

Primeiros passos

Ainda com a aba de rede aberta no navegador, aperte f5 e verá que a página irá recarregar, e junto a isso a aba de rede irá capturar todas as requisições feitas e então mostrar elas abaixo da timeline:

Você pode notar que ele mostra:

• O carregamento da página em si (o arquivo getstarted.html);
• O CSS dela (o arquivo main.css);
• O JavaScript dela (o arquivo getstarted.js);
• E duas imagens que não puderam ser carregadas (os arquivos 96.png e 48.png);

Agora entrando em detalhes do que é cada coisa, vamos começar pela parte de cima, onde temos uma linha do tempo mostrando as requisições ao longo do tempo, assim podemos ter uma noção de como a página carregou.

Abaixo onde aparecem as requisições, elas são listadas com os seguintes items:

• O nome do recurso sendo requisitado (pode ser o nome do arquivo ou uma rota do seu back-end por exemplo);
• O status da resposta para essa requisição, assim podemos verificar como o servidor lidou com ela (muito útil para saber se o caminho para importar um arquivo estava errado, uma vez que vai ser retornado um 404, ou para fazer o debug de uma API, assim podemos análisar qual código ela retornou para o nosso front-end ao utilizar ela, e ter uma noção melhor de qual erro ocorreu com base no código);
• O tipo do recurso requisitado;
• Quem gerou essa requisição (se foi a página, ou alguma API do JS como o fetch ou o XMLHttpRequest por exemplo) ;
• A quantidade de dados que foram transportados na requisição;
• O tempo que levou para receber uma resposta;
• E a parte de waterfall é uma representação visual das diferentes etapas da requisição, o qual podemos ver ao passar o mouse em cima;

Visualizando os detalhes da requisição

Aba cabeçalhos (Headers)

Podemos clicar em qualquer uma das requisições listadas, e os detalhes daquela requisição irão aparecer na tela. Para verificarmos isso, vamos clicar no botão “Get Data” e então vamos clicar na requisição pelo devtools para que possamos análisar os detalhes dela:

Os cabeçalhos da requisição vão ser mostrado sendo sub-dividos em:

• Informações gerais da resposta da requisição (General);
• Cabeçalhos da resposta;
• Cabeçalhos da requisição;

Abas Preview e Response

Partindo para a aba Preview, lá podemos ver de forma formatada (ou rendenizada no caso de HTML ou imagens, etc), o conteúdo presente na resposta da requisição. E se existe uma versão formatada, significa que existe uma versão não formatada, e nesse caso podemos checa-la na aba Response:

Aba Initiator

A explicação sobre essa aba aqui será tão breve quanto o conteúdo dela, basicamente ela mostra quem iniciou a requisição que trouxe essa resposta e detalha quais requisições foram necessárias para chegar nela.

Aba Timing

E a última aba que nós temos, a timing, demonstra dados relativos a performance dessa requisição, como o tempo que demorou para ela ser realizada, quanto tempo levou para processar e etc.

Pesquisando por requisições em específico

Vamos falar sobre como encontrar uma requisição em específico no devtools. Nessa aba, tem uma barra de filtragem, assim você pode pesquisar por texto ou por expressões regulares.

Fora isso você pode filtrar por tipo, por exemplo, só requisições que trazem arquivos css, só as requisições vindas do JavaScript (Fetch/XHR).

Controlando a velocidade da requisição

E para fechar vamos falar de um truque legal que podemos fazer através da aba network: emular a velocidade de conexão.

As opções disponíveis são:

• No throttiling (nenhuma interferencia do devtools);
• Fast 3G;
• Slow 3G;
• Offline;
• Opções customizadas;

Ao selecionarmos alguma dessas opções, nós podemos emular velocidades diferentes de conexão e verificarmos como nosso site se comporta em situações excepcionais. Inclusive, limitar a velocidades mais baixas pode ser um jeito legal de testar se os seus loaders estão funcionando quando você está criando uma SPA por exemplo.

Conclusão

Eai já conhecia esses aspectos da aba de rede? Compartilha com a gente aqui nos comentários.