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, conteúdo ou tamanho HTTP.

Este é um 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 do DevTools relacionados à rede, consulte Referência de recursos de rede.

Vídeo: Saiba como usar a ferramenta Rede

Para ver uma versão em vídeo deste tutorial, veja o vídeo a seguir:

Quando usar a ferramenta Rede

Em geral, use a ferramenta Rede quando precisar verificar se os recursos estão sendo baixados corretamente e se 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 de chamadas à API do lado do servidor.

Se você estiver procurando maneiras de melhorar o desempenho do carregamento da página, a ferramenta Rede pode ajudar a entender quantos dados estão sendo baixados e quanto tempo leva para baixá-los, mas há muitos outros tipos de problemas de desempenho de carregamento que não estão relacionados à atividade da rede. Para investigar ainda mais os problemas de desempenho do carregamento da página, você pode usar:

• A ferramenta Desempenho. Consulte Ferramenta Desempenho: Analise o desempenho do seu site.
• A ferramenta Problemas . Consulte Localizar e corrigir problemas usando a ferramenta Problemas.
• A ferramenta Lighthouse , que fornece sugestões direcionadas sobre como melhorar sua página. Por exemplo, consulte Otimizar a velocidade do site usando o Lighthouse.

Abra 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 Inspecionar atividade de rede em uma nova guia ou janela:

   

2. 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. No DevTools, na Barra de Atividades, selecione a guia Rede . Se essa guia não estiver visível, clique no botão Mais ferramentas ().

4. Opcionalmente, encaixe o DevTools na parte inferior da janela. Confira Encaixar DevTools na parte inferior do navegador em Alterar posicionamento do DevTools (Desencaixar, Encaixar na parte inferior, Encaixar à esquerda).

   

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

Compreender a interface do usuário da ferramenta Rede

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

• 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 gráfico de Visão geral , a seção Log de Rede mostra a atividade de rede e permite inspecionar solicitações individuais.

Registrar atividade de rede

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

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 principal geralmente é o documento HTML principal. O recurso inferior é o que tiver sido 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 de status HTTP 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 um detalhamento, passe o mouse sobre uma cachoeira.

   Observe que o gráfico Visão geral também mostra a atividade da rede. Você não usará o gráfico Visão geral neste tutorial, portanto, poderá ocultá-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 olhe para a parte inferior do Log de Rede e faça uma anotação mental da última atividade.

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

4. Examine 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 estiver usando. Também há muitas colunas ocultas por padrão que podem ser ú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 usado 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ê tem uma ideia melhor de quanto tempo uma página leva para carregar em um dispositivo móvel.

1. Clique na lista suspensa Limitação na barra de ferramentas superior. Nenhuma limitação é selecionada por padrão.

   

2. Selecione 3G:

   

   Um ícone de aviso é exibido na guia da ferramenta Rede para lembrá-lo de que a limitação está habilitada.

3. Pressione e segure Recarregar () (ou clique com o botão direito do mouse em Atualizar) e selecione Esvaziar cache e fazer atualização forçada:

   

Em visitas repetidas, o navegador geralmente serve alguns arquivos do cache, o que acelera o carregamento da página. O cache vazio e a atualização forçada forçam o navegador a acessar a rede para todos os recursos. Use-a para exibir como um visitante de primeira viagem experimenta um carregamento de página.

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

Consulte também Emular conexões de rede lentas em Referência de recursos de rede.

Captura 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 marque a caixa de seleção Capturar capturas de tela:

   

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

   O painel Capturas de tela fornece miniaturas da aparência da página em vários pontos durante o processo de carregamento:

   

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

   

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

5. Atualize a página novamente.

Inspecione os detalhes do recurso

Selecione um recurso para saber mais sobre ele.

1. Selecione network-tutorial/. O painel Cabeçalhos é exibido. 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 de resposta . O código-fonte HTML é mostrado:

   

   Dica: Quando um arquivo for minificado, selecione o botão Formatar () na parte inferior do painel Resposta para reformatar o conteúdo do arquivo para facilitar a leitura.

   Por exemplo, se a resposta contiver dados JSON minificados, clique no botão Formatar para reformatar 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 destacadas em uma guia do navegador. Consulte Exibir um arquivo JSON ou resposta do servidor com formatação.

4. Selecione o painel Tempo . Um detalhamento da atividade de rede do recurso é exibido:

   

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, use o painel Pesquisar para verificar se os recursos estão usando as políticas de cache corretas, da seguinte maneira:

1. Clique no botão Pesquisar (). O painel de pesquisa é aberto à esquerda do log de rede:

   

2. Digite no-cache e pressione Enter. O painel de Pesquisa lista todas as instâncias encontradas nos cabeçalhos ou no conteúdo dos no-cache recursos:

   

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

   

   Se a consulta foi encontrada no conteúdo, a guia Resposta é aberta.

4. Feche o painel Pesquisar clicando no botão Fechar (X) à direita.

5. Feche o painel Cabeçalhos clicando no botão Fechar (X) à esquerda.

Consulte também:

• Cache HTTP no MDN.

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 estar 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 Filtro dá suporte a muitos tipos diferentes de filtragem.

1. Digite png na caixa de texto 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+$/, que é uma expressão regular do JavaScript. O DevTools filtra qualquer recurso com um nome de arquivo que não termina com a j ou a 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 Filtro . O DevTools filtra qualquer recurso com respostas menores que 1000 bytes.

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

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

Filtrar por tipo de recurso

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

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 Command (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

Qual é a aparência e o comportamento de uma página quando alguns recursos da página não estão disponíveis? Ele falha completamente ou ainda é um pouco funcional? Bloqueie 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:

   

   A ferramenta de bloqueio de solicitação de rede é aberta no painel Visualização Rápida na parte inferior do DevTools.

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

   

4. Atualize a página. Como esperado, o estilo da página está um pouco bagunçado, porque a folha de estilo principal foi bloqueada.

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

   

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

Consulte também:

• Bloquear uma solicitação de rede na ferramenta de bloqueio de solicitação de rede.

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.

Este trabalho está licenciado sob uma Licença Creative Commons Atribuição 4.0 Internacional.