Inspecionar atividade de rede

Use a ferramenta Rede para garantir que os recursos que sua página da Web precisa executar sejam baixados conforme o esperado e que as solicitações para APIs do lado do servidor sejam enviadas corretamente. Inspecione as propriedades de solicitações e respostas HTTP individuais, como cabeçalhos HTTP, conteúdo ou tamanho.

Este é um passo a passo do tutorial passo a passo da ferramenta Rede , para inspecionar a atividade de rede de uma página.

Para obter uma visão geral dos recursos de DevTools relacionados à rede, consulte Referência de recursos de rede.

Para obter uma versão em vídeo deste tutorial, exiba o seguinte vídeo:

Quando usar a ferramenta Rede

Em geral, use a ferramenta Rede quando precisar verificar se os recursos estão sendo baixados corretamente e as solicitações para APIs do lado do servidor estão sendo enviadas conforme o esperado. Os casos de uso mais comuns para a ferramenta Rede são:

• Certificando-se de que os recursos estão realmente sendo baixados.

• Verificando os parâmetros de solicitação e as respostas das chamadas de API do lado do servidor.

Se você estiver procurando maneiras de melhorar o desempenho de carga de página, a ferramenta Rede pode ajudar a entender a quantidade de dados que está sendo baixada e quanto tempo leva para baixá-los, mas há muitos outros tipos de problemas de desempenho de carga que não estão relacionados à atividade de rede. Para investigar ainda mais os problemas de desempenho de carga de página, você pode usar a ferramenta Desempenho, a ferramenta Problemas e a ferramenta Lighthouse , pois ela fornece sugestões direcionadas sobre como melhorar sua página. Por exemplo, consulte Otimizar a velocidade do site usando o Lighthouse.

Abrir a ferramenta Rede

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

1. Abra a Demonstração de Atividade de Rede de Inspeção em uma nova guia ou janela:

   

2. Para abrir o DevTools, clique com o botão direito do mouse na página da Web e selecione Inspecionar. Ou pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS). O DevTools é aberto.

3. Em DevTools, na Barra de Atividades, selecione a guia Rede . Se essa guia não estiver visível, clique no botão Mais ferramentas ():

   Talvez você prefira encaixar DevTools na parte inferior da janela:

   

A ferramenta Rede está inicialmente vazia. O DevTools só registra a atividade de rede depois de abri-la e nenhuma atividade de rede ocorreu desde que você abriu o DevTools.

Entender a interface do usuário da ferramenta de rede

A ferramenta Rede é dividida em três partes main:

• A barra de ferramentas superior contém opções para personalizar a ferramenta e filtrar solicitações de rede.
• Abaixo da barra de ferramentas superior, o gráfico visão geral fornece uma visão geral de alto nível do tráfego de rede ao longo do tempo e permite filtrar solicitações de rede.
• Abaixo do grafo Visão geral , a seção Log de Rede mostra a atividade de rede e permite inspecionar solicitações individuais.

Atividade de rede de log

Para exibir a atividade de rede que uma página causa:

1. Atualize a página da Web. A ferramenta Rede registra todas as atividades de rede no Log de Rede:

   

   Cada linha do Log de Rede representa um recurso. Por padrão, os recursos são listados cronologicamente. O recurso superior geralmente é o documento HTML main. O recurso inferior é o que foi solicitado por último.

   Cada coluna representa informações sobre um recurso. Na figura anterior, as colunas padrão são exibidas.

   • Status. O código HTTP status para resposta.

   • Tipo. O tipo de recurso.

   • Iniciador. A causa da solicitação de recurso. Clicar em um link na coluna Iniciador leva você ao código-fonte que causou a solicitação.

   • Hora. A duração da solicitação.

   • Cachoeira. Uma representação gráfica dos diferentes estágios da solicitação. Para exibir uma quebra, passe o mouse sobre uma Cascata.

   Observe que o grafo visão geral também mostra a atividade de rede. Você não usará o grafo visão geral neste tutorial, para que possa escondê-lo. Consulte Ocultar o painel Visão geral.

   Depois de abrir o DevTools, ele registra a atividade de rede no Log de Rede.

2. Para demonstrar isso, primeiro examine a parte inferior do Log de Rede e faça uma observação mental da última atividade.

3. Agora, clique no botão Obter Dados na demonstração.

4. Olhe para a parte inferior do Log de Rede novamente. Um novo recurso chamado getstarted.json é exibido:

   

Mostrar mais informações

As colunas do Log de Rede são configuráveis. Você pode ocultar colunas que não está usando. Há também muitas colunas ocultas por padrão que você pode achar úteis.

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

   

2. Para ver a URL completa de um recurso, passe o mouse sobre sua célula 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 de seus usuários. Limitando a página, você tem uma ideia melhor de quanto tempo uma página leva para carregar em um dispositivo móvel.

1. Selecione a lista suspensa Limitação na barra de ferramentas superior. Ele é definido como Sem limitação por padrão.

2. Selecione 3G lento:

   

3. Pressione recarga longa () (ou clique com o botão direito do mouse em Atualizar) e selecione Cache vazio e atualização dura:

   

Em visitas repetidas, o navegador geralmente atende alguns arquivos do cache, o que acelera a carga da página. O cache vazio e a atualização dura forçam o navegador a ir para a rede para todos os recursos. Use-o para exibir como um visitante pela primeira vez experimenta uma carga de página.

O cache vazio e o fluxo de trabalho de atualização dura só estão disponíveis quando o DevTools está aberto.

Consulte também Emular conexões de rede lentas na referência de recursos de rede.

Capturar capturas de tela

As capturas de tela exibem a aparência de uma página da Web ao longo do tempo enquanto ela é carregada.

1. Clique no botão () e selecione a caixa de seleção Capturar capturas de tela :

   

2. Atualize a página novamente usando o cache vazio e o fluxo de trabalho de atualização. Consulte Simular uma conexão mais lenta acima se você precisar de um lembrete sobre como fazer isso.

   O painel Capturas de tela fornece miniaturas de como a página analisou vários pontos durante o processo de carregamento:

   

3. Clique na primeira miniatura. DevTools mostra qual atividade de rede estava ocorrendo naquele momento:

   

4. Clique novamente em ( de rede) e desative a caixa de seleção Capturar capturas de tela para fechar o painel Capturas de tela .

5. Atualize a página novamente.

Inspecionar os detalhes do recurso

Selecione um recurso para saber mais sobre ele.

1. Selecione network-tutorial/. O painel Cabeçalhos é mostrado. Use este painel para inspecionar cabeçalhos HTTP:

   

2. Selecione o painel Visualização . Uma renderização básica do HTML é mostrada:

   

   O painel é útil quando uma API retorna um código de erro em HTML. Você pode achar mais fácil ler o HTML renderizado do que o código-fonte HTML ou ao inspecionar imagens.

3. Selecione o painel Resposta . O código-fonte HTML é mostrado:

   

   Dica: quando um arquivo for extraído, selecione o botão Formatar () na parte inferior do painel Resposta para formatar novamente o conteúdo do arquivo para legibilidade.

   Por exemplo, se a resposta contiver dados JSON extraídos, clique no botão Formatar para formatar novamente a sintaxe JSON para que cada propriedade de objeto esteja em sua própria linha. Você também pode usar o visualizador JSON para exibir respostas JSON formatadas e realçadas em uma guia do navegador. Consulte Exibir JSON formatado.

4. Selecione o painel Tempo . Uma divisão da atividade de rede para o recurso é exibida:

   

5. Clique em Fechar () para exibir o Log de Rede novamente:

   

Pesquisar cabeçalhos e respostas de rede

Use o painel Pesquisar quando precisar pesquisar os cabeçalhos HTTP e as respostas de todos os recursos para uma determinada cadeia de caracteres ou expressão regular.

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

1. Selecione Pesquisar (). O painel Pesquisar é aberto à esquerda do log de rede:

   

2. Digite no-cache e pressione Enter. O painel Pesquisa lista todas as instâncias que no-cache ele encontra em cabeçalhos de recurso ou conteúdo:

   

3. Clique em um resultado para exibir o recurso no qual o resultado foi encontrado. Se você estiver analisando os detalhes do recurso, selecione um resultado para ir diretamente a ele. Por exemplo, se a consulta foi encontrada em um cabeçalho, o painel Cabeçalhos será aberto. Se a consulta foi encontrada no conteúdo, o painel Resposta será aberto:

   

4. Feche o painel Pesquisa e o painel Cabeçalhos .

Filtrar recursos

O DevTools fornece 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 deve ser ativada por padrão. Se a barra de ferramentas Filtros não estiver ativada, clique em Filtrar () para mostrá-la:

Filtrar por cadeia de caracteres, expressão regular ou propriedade

A caixa de texto Filtrar dá suporte a muitos tipos diferentes de filtragem.

1. Digite png na caixa de texto Filtrar . 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+$/, que é uma expressão regular JavaScript. O DevTools filtra qualquer recurso com um nome de arquivo que não termina com um j ou um c seguido por 1 ou mais s caracteres.

3. Digite -main.css. O DevTools filtra main.css. Se algum arquivo corresponder a esse padrão, ele também será filtrado.

4. Digite larger-than:1000 na caixa de texto Filtrar . O DevTools filtra qualquer recurso com respostas menores que 1000 bytes.

   Para obter a lista completa de propriedades filtradas, consulte Filtrar solicitações por propriedades.

5. Desmarque a caixa de texto Filtrar de qualquer texto.

Filtrar por tipo de recurso

Para se concentrar em um determinado tipo de arquivo, como planilhas de estilos:

1. Selecione CSS. Todos os outros tipos de arquivo são filtrados:

   

2. Para também exibir scripts, pressione e segure Ctrl (Windows, Linux) ou Comando (macOS) e clique em JS.

3. Para remover os filtros e exibir todos os recursos novamente, selecione Todos.

Para outros fluxos de trabalho de filtragem, consulte Filtrar solicitações.

Bloquear solicitações

Como uma página parece e se comporta quando alguns dos recursos de página não estão disponíveis? Falha completamente ou ainda é um pouco funcional? Bloquear solicitações para descobrir:

1. Pressione Ctrl+Shift+P (Windows, Linux) ou Command+Shift+P (macOS) para abrir o Menu de Comando.

2. Digite block, selecione Mostrar bloqueio de solicitação de rede e pressione Enter:

   

3. Clique em Adicionar Padrão (), digite main.csse clique em Adicionar:

   

4. Atualize a página. Como esperado, o estilo da página está um pouco confuso, pois a folha de estilos main foi bloqueada.

   main.css Na linha no Log de Rede, o texto vermelho significa que o recurso foi bloqueado:

   

5. Desmarque a caixa de seleção Habilitar solicitação de rede bloqueando .

Conclusão

Parabéns, você concluiu o tutorial! Agora você sabe como usar a ferramenta Rede no Microsoft Edge DevTools.

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

Observação

Partes desta página são modificações baseadas no trabalho criado e compartilhado pelo Google e usadas de acordo com os termos descritos na Licença Pública Creative Commons Atribuição 4.0 Internacional. A página original é encontrada aqui e é de autoria de Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

Este trabalho é licenciado sob uma Licença Internacional de Atribuição do Creative Commons 4.0.