Inspecionar atividade de rede

Kayce Basques

Este é um tutorial prático de alguns dos recursos do DevTools mais usados relacionados à inspeção da atividade de rede de uma página.

Consulte Referência de rede se preferir navegar pelos recursos.

Leia ou assista a versão em vídeo deste tutorial:

Quando usar o painel Network

Em geral, use o painel Rede quando precisar garantir que os recursos estão sendo baixados ou enviados conforme o esperado. Os casos de uso mais comuns do painel Rede são:

• Verificar se os recursos estão sendo enviados ou baixados.
• Inspeção das propriedades de um recurso individual, como cabeçalhos HTTP, conteúdo, tamanho e assim por diante.

Se você estiver procurando maneiras de melhorar o desempenho de carregamento da página, não comece com o painel Rede. Há muitos tipos de problemas de desempenho de carregamento que não estão relacionados à atividade de rede. Comece com o painel do Lighthouse, porque ele oferece sugestões específicas sobre como melhorar sua página. Consulte Otimizar a velocidade do site.

Abra o painel Network

Para aproveitar ao máximo este tutorial, abra a demonstração e teste os recursos na página.

1. Abra a demonstração de introdução.

   

   Talvez você prefira mover a demonstração para uma janela separada.

   

2. Abra o DevTools pressionando Control+Shift+J ou Command+Option+J (Mac). O painel Console é aberto.

   

   Talvez você prefira encaixar o DevTools na parte de baixo da janela.

   

3. Clique na guia Rede. O painel Rede é aberto.

   

No momento, o painel Rede está vazio. Isso acontece porque o DevTools só registra a atividade de rede enquanto está aberto, e nenhuma atividade de rede ocorreu desde que você abriu o DevTools.

Registrar atividade de rede

Para ver a atividade de rede causada por uma página:

1. Atualize a página. O painel Rede registra toda a atividade de rede no Registro de rede.

   

   Cada linha do Registro de rede representa um recurso. Por padrão, os recursos são listados em ordem cronológica. O recurso principal geralmente é o documento HTML principal. O recurso na parte de baixo é o que foi solicitado por último.

   Cada coluna representa informações sobre um recurso. As colunas padrão são:

   • Status: o código de resposta HTTP.
   • Tipo: o tipo de recurso.
   • Iniciador: o que causou a solicitação de um recurso. Ao clicar em um link na coluna "Iniciador", você acessa o código-fonte que causou a solicitação.
   • Tamanho: quantidade de recursos transferidos pela rede.
   • Tempo: quanto tempo levou a solicitação.
   Observação: o gráfico acima do registro de rede é chamado de "Visão geral". Você não vai usar esse painel neste tutorial, então pode ocultá-lo se preferir. Consulte Ocultar a faixa "Visão geral".

2. Enquanto o DevTools estiver aberto, ele vai registrar a atividade de rede no Registro de rede. Para demonstrar isso, primeiro observe a parte de baixo do registro de rede e anote a última atividade.

3. Agora, clique no botão Receber dados na demonstração.

4. Confira a parte de baixo do Registro de rede novamente. Há um novo recurso chamado getstarted.json. Clicar no botão Receber dados fez com que a página solicitasse esse arquivo.

   

Mostrar mais informações

As colunas do Registro de rede são configuráveis. Você pode ocultar as colunas que não está usando. Há também muitas colunas ocultas por padrão que podem ser úteis.

1. Clique com o botão direito do mouse no cabeçalho da tabela Registro de rede e selecione Domínio. O domínio de cada recurso agora é mostrado.

   

Dica: para ver o URL completo de um recurso, passe o cursor sobre a célula dele na coluna Nome.

Simular uma conexão de rede mais lenta

A conexão de rede do computador que você usa para criar sites provavelmente é mais rápida do que as conexões de rede dos dispositivos móveis dos seus usuários. Ao limitar a página, você tem uma ideia melhor de quanto tempo ela leva para carregar em um dispositivo móvel.

1. Clique no menu suspenso Limitação, que está definido como Nenhuma limitação por padrão.

   

2. Selecione 3G.

   

3. Toque e pressione Recarregar atualizar e selecione Limpar cache e recarga forçada.

   

   Em visitas repetidas, o navegador geralmente veicula alguns arquivos do cache, o que acelera o carregamento da página. A opção Esvaziar cache e recarga forçada força o navegador a acessar a rede para todos os recursos. Isso é útil quando você quer saber como um visitante novo interage com o carregamento de uma página.

   Observação: o fluxo de trabalho Esvaziar cache e recarga forçada só está disponível quando o DevTools está aberto.

Fazer capturas de tela

As capturas de tela mostram como a página aparece em diferentes momentos durante o carregamento e informam quais recursos são carregados em cada intervalo.

Para tirar capturas de tela, siga estas etapas:

1. Clique em Configurações de rede settings.

2. Marque a caixa de seleção Capturas de tela check_box.

3. Atualize a página novamente usando o fluxo de trabalho Esvaziar cache e atualização forçada. Consulte Simular uma conexão mais lenta se precisar relembrar como fazer isso. A guia Capturas de tela mostra miniaturas de como a página apareceu em vários pontos durante o processo de carregamento.

   

4. Clique na primeira miniatura. As DevTools mostram qual atividade de rede estava ocorrendo naquele momento.

   

5. Marque ou desmarque a caixa de seleção Capturas de tela para fechar a guia.

6. Atualize a página novamente.

Inspecionar os detalhes de um recurso

Clique em um recurso para saber mais sobre ele. Experimente agora:

1. Clique em getstarted.html. A guia Cabeçalhos é exibida. Use essa guia para inspecionar cabeçalhos HTTP.

   

2. Clique na guia Visualização para conferir uma renderização HTML básica.

   

   Essa guia é útil quando uma API retorna um código de erro em HTML e é mais fácil ler o HTML renderizado do que o código-fonte HTML ou ao inspecionar imagens.

3. Clique na guia Resposta para conferir o código-fonte HTML.

   

   Dica: quando um arquivo é minimizado, clicar no botão Formatar data_object na parte de baixo da guia Resposta reformata o conteúdo do arquivo para facilitar a leitura.

4. Clique na guia Iniciador para ver uma árvore que mapeia a cadeia de iniciadores de solicitação.

   

5. Clique na guia Tempo para ver um detalhamento da atividade de rede desse recurso.

   

6. Clique em Fechar close para ver o Registro de rede novamente.

   

Cabeçalhos e respostas da rede de pesquisa

Use a guia Pesquisar quando precisar pesquisar os cabeçalhos e respostas HTTP de todos os recursos por uma determinada string ou expressão regular.

Por exemplo, suponha que você queira verificar se os recursos estão usando políticas de cache razoáveis.

1. Clique em Pesquisar search na barra de ações do painel ou pressione Command + F (macOS) ou Control + F (Windows / Linux).

   A guia Pesquisar é aberta à esquerda do Registro de rede.

   

2. Digite Cache-Control e pressione Enter. A guia Pesquisar lista todas as instâncias de Cache-Control encontradas nos cabeçalhos ou no conteúdo dos recursos.

   

3. Clique em um resultado para conferir. Se a consulta foi encontrada em um cabeçalho, a guia "Cabeçalhos" será aberta. Se a consulta for encontrada no conteúdo, a guia Resposta será aberta.

   

4. Feche as guias Pesquisar e Cabeçalhos.

   

Filtrar recursos

O DevTools oferece vários fluxos de trabalho para filtrar recursos que não são relevantes para a tarefa em questão.

A barra de ferramentas Filtros fica ativada por padrão. Caso contrário, siga estas etapas:

1. Clique em Filtrar filter_alt para mostrar.

Filtrar por string, expressão regular ou propriedade

A caixa de entrada Filtrar é compatível com vários tipos de filtragem.

1. Digite png na caixa de entrada Filtro. Somente os arquivos que contêm o texto png são mostrados. Nesse caso, os únicos arquivos que correspondem ao filtro são as imagens PNG.

   

2. Digite /.*\.[cj]s+$/. As DevTools filtram qualquer recurso com um nome de arquivo que não termina com um j ou um c seguido por um ou mais caracteres s.

   

3. Digite -main.css. O DevTools filtra main.css. Se qualquer outro arquivo correspondesse ao padrão, ele também seria filtrado.

   

4. Digite domain:raw.githubusercontent.com na caixa de texto Filtro. O DevTools filtra qualquer recurso com um URL que não corresponda a esse domínio.

   

   Consulte Filtrar solicitações por propriedades para ver a lista completa de propriedades filtráveis.

5. Limpe a caixa de entrada Filtro de qualquer texto.

Filtrar por tipo de recurso

Para se concentrar em um determinado tipo de arquivo, como folhas de estilo:

1. Clique em CSS. Todos os outros tipos de arquivo são filtrados.

   

2. Para ver também os scripts, mantenha pressionada a tecla Control ou Command (Mac) e clique em JS.

   

3. Clique em Todos para remover os filtros e ver todos os recursos novamente.

Consulte Filtrar solicitações para outros fluxos de trabalho de filtragem.

Bloquear solicitações

Como uma página aparece e se comporta quando alguns dos recursos dela não estão disponíveis? Ele falha completamente ou ainda está um pouco funcional? Bloqueie solicitações para descobrir:

1. Pressione Control+Shift+P ou Command+Shift+P (Mac) para abrir o menu de comandos.

   

2. Digite block, selecione Mostrar bloqueio de solicitações e pressione Enter.

   

3. Clique no botão Adicionar padrão.

4. Digite main.css.

   

5. Clique em Adicionar.

6. Atualize a página. Como esperado, o estilo da página fica um pouco bagunçado porque a principal folha de estilo foi bloqueada. Observe a linha main.css no registro de rede. O texto em vermelho significa que o recurso está bloqueado.

   

7. Desmarque a caixa de seleção Ativar bloqueio de solicitação.

Para descobrir mais recursos do DevTools relacionados à inspeção de atividades de rede, confira a Referência de rede.