Inspecionar atividade de rede

Kayce Basques

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

Consulte a Referência de rede se quiser navegar pelos recursos.

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

Quando usar o painel de rede

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

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

Se você está 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 carga que não estão relacionados à atividade de rede. Comece com o painel do Lighthouse, porque ele oferece sugestões direcionadas de como melhorar sua página. Consulte Otimizar a velocidade do site.

Abrir o painel de rede

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

1. Abra a demonstração de início.

   

   Talvez seja melhor mover a demonstração para uma janela separada.

   

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

   

   Talvez você prefira anexar o DevTools à parte inferior da janela.

   

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

   

No momento, o painel Rede está vazio. Isso ocorre 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 conferir a atividade de rede que uma página causa:

1. Recarregue a página. O painel Network registra todas as atividades de rede no Network Log.

   

   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 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.
   • Type: o tipo de recurso.
   • Iniciador: o que fez com que um recurso fosse solicitado. Clicar em um link na coluna "Initiator" leva você ao código-fonte que causou a solicitação.
   • Tamanho: é a quantidade de recursos transferida pela rede.
   • Tempo: o tempo que a solicitação levou.
   Observação: o gráfico acima do registro de rede é chamado de "Visão geral". Você não vai usá-lo neste tutorial, então pode ocultá-lo se preferir. Consulte Ocultar a faixa "Visão geral".

2. Se o DevTools estiver aberto, ele vai registrar a atividade de rede no Network Log. Para demonstrar isso, primeiro olhe para a parte de baixo do Registro de rede e anote a última atividade.

3. Agora, clique no botão Get Data na demonstração.

4. Olhe novamente a parte de baixo do Registro de rede. Há um novo recurso chamado getstarted.json. Ao clicar no botão Receber dados, a página solicitou 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, o que pode ser útil.

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 é 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 usuários. Ao limitar a página, você pode ter uma ideia melhor de quanto tempo uma página leva para ser carregada em um dispositivo móvel.

1. Clique no menu suspenso Limitação, que é definido como Sem limitação por padrão.

   

2. Selecione 3G.

   

3. Toque e pressione Reload refresh e selecione Empty Cache And Hard Reload.

   

   Em visitas repetidas, o navegador geralmente serve alguns arquivos do cache, o que acelera o carregamento da página. Limpar o cache e atualizar forçosamente força o navegador a acessar a rede para todos os recursos. Isso é útil quando você quer saber como um visitante pela primeira vez percebe o carregamento de uma página.

   Observação: o fluxo de trabalho Empty Cache And Hard Reload só está disponível quando as Ferramentas do desenvolvedor estão abertas.

Fazer capturas de tela

As capturas de tela registram a aparência da página em diferentes momentos durante o carregamento e informam quais recursos são carregados em cada intervalo.

Para fazer capturas de tela, siga estas etapas:

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

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

3. Atualize a página novamente usando o fluxo de trabalho Empty Cache and Hard Reload. Consulte Como simular uma conexão mais lenta se precisar de um lembrete sobre como fazer isso. A guia Screenshots mostra miniaturas de como a página ficou em vários pontos durante o processo de carregamento.

   

4. Clique na primeira miniatura. O DevTools mostra a atividade de rede que estava ocorrendo naquele momento.

   

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

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 é mostrada. Use essa guia para inspecionar cabeçalhos HTTP.

   

2. Clique na guia Visualização para ver 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 Response para conferir o código-fonte HTML.

   

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

4. Clique na guia Iniciador para conferir uma árvore que mapeia a cadeia do iniciador da solicitação.

   

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

   

6. Clique em Fechar fechar para acessar o Registro de rede novamente.

   

Cabeçalhos e respostas da rede de pesquisa

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

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

1. Clique em Pesquisar pesquisa. A guia Pesquisar é aberta à esquerda do Registro de rede.

   

2. Digite Cache-Control e pressione Enter. A guia Pesquisa lista todas as instâncias de Cache-Control que ela encontra em cabeçalhos de recursos ou conteúdo.

   

3. Clique em um resultado para conferir. Se a consulta for 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 precisa estar ativada por padrão. Caso contrário:

1. Clique em Filtro 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 Ferramentas do desenvolvedor filtram qualquer recurso com um nome de arquivo que não termine 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 corresponde a esse domínio.

   

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

5. Limpe a caixa de texto Filtrar.

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 pressionado o Control ou Command (Mac) e clique em JS.

   

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

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

Solicitações de bloqueio

Como é a aparência e o comportamento de uma página quando alguns dos recursos dela não estão disponíveis? Ele falha completamente ou ainda é um pouco funcional? Bloqueie solicitações para descobrir:

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

   

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

   

3. Clique no botão Add Pattern.

4. Digite main.css.

   

5. Clique em Adicionar.

6. Recarregue a página. Como esperado, o estilo da página está um pouco confuso porque a folha de estilo principal 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 o bloqueio de solicitações.

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