Inspecionar atividade de rede

Utilize a Ferramenta de rede para garantir que os recursos que a sua página Web precisa de executar são transferidos conforme esperado e que os pedidos às APIs do lado do servidor são enviados corretamente. Inspecione as propriedades de pedidos e respostas HTTP individuais, como os cabeçalhos HTTP, o conteúdo ou o tamanho.

Trata-se de instruções passo a passo do tutorial da ferramenta Rede para inspecionar a atividade de rede de uma página.

Para obter uma descrição geral das funcionalidades de DevTools relacionadas com a rede, veja Referência de funcionalidades de rede.

Vídeo: Saiba como Utilizar a Ferramenta de Rede

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

Quando utilizar a Ferramenta de rede

Em geral, utilize a Ferramenta de rede quando precisar de se certificar de que os recursos estão a ser transferidos corretamente e que os pedidos para as APIs do lado do servidor estão a ser enviados conforme esperado. Os casos de utilização mais comuns para a Ferramenta de rede são:

• Certificar-se de que os recursos estão realmente a ser transferidos.

• Verificar os parâmetros do pedido e as respostas das chamadas à API do lado do servidor.

Se estiver à procura de formas de melhorar o desempenho do carregamento de páginas, a Ferramenta de rede pode ajudar a compreender a quantidade de dados que estão a ser transferidos e quanto tempo demora a transferi-lo, mas existem muitos outros tipos de problemas de desempenho de carga que não estão relacionados com a atividade de rede. Para investigar mais aprofundadamente problemas de desempenho de carregamento de páginas, pode utilizar:

• A Ferramenta de desempenho. Veja Ferramenta de desempenho: Analisar o desempenho do seu site.
• A ferramenta Problemas . Veja Localizar e corrigir problemas com a ferramenta Problemas.
• A ferramenta Lighthouse , que lhe dá sugestões direcionadas sobre como melhorar a sua página. Por exemplo, veja Otimizar a velocidade do site com o Lighthouse.

Abrir a ferramenta Rede

Para tirar o máximo partido deste tutorial, abra a demonstração e experimente as funcionalidades na página de demonstração.

1. Abra a Demonstração de Atividade de Rede inspecionada num novo separador ou janela:

   

2. Clique com o botão direito do rato na página Web e, em seguida, selecione Inspecionar. Em alternativa, prima Ctrl+Shift+J (Windows, Linux) ou Comando+Opção+J (macOS).

   O DevTools é aberto.

3. Em DevTools, na Barra de Atividade, selecione o separador Rede . Se esse separador não estiver visível, clique no botão Mais ferramentas ().

4. Opcionalmente, ancore DevTools na parte inferior da janela. Consulte Dock DevTools na parte inferior do browser em Change DevTools placement (Undock, Dock to bottom, Dock to left).

   

A ferramenta Rede está inicialmente vazia. O DevTools apenas regista a atividade de rede depois de a abrir e não ocorreu nenhuma atividade de rede desde que abriu o DevTools.

Compreender a interface de utilizador da Ferramenta de rede

A ferramenta Rede está dividida em três partes main:

• A barra de ferramentas superior contém opções para personalizar a ferramenta e filtrar pedidos de rede.

• Abaixo da barra de ferramentas superior, o gráfico Descrição Geral fornece uma descrição geral de alto nível do tráfego de rede ao longo do tempo e permite filtrar pedidos de rede.

• Abaixo do gráfico Descrição Geral , a secção Registo de Rede mostra a atividade de rede e permite inspecionar pedidos individuais.

Atividade de rede de registo

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

1. Atualize a página Web. A ferramenta Rede regista toda a atividade de rede no Registo de Rede:

   

   Cada linha do Registo de Rede representa um recurso. Por predefinição, os recursos são listados cronologicamente. Normalmente, o recurso superior é o main documento HTML. O recurso inferior é o último pedido.

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

   • Estado. O código http status para resposta.

   • Tipo. O tipo de recurso.

   • Iniciador. A causa do pedido de recurso. Clicar numa ligação na coluna Iniciador direciona-o para o código fonte que causou o pedido.

   • Hora. A duração do pedido.

   • Cascata. Uma representação gráfica das diferentes fases do pedido. Para apresentar uma divisão, paire o cursor sobre uma Cascata.

   Tenha em atenção que o gráfico Descrição Geral também mostra a atividade de rede. Não irá utilizar o gráfico Descrição Geral neste tutorial, pelo que pode ocultá-lo. Consulte Ocultar o painel Descrição Geral.

   Depois de abrir o DevTools, regista a atividade de rede no Registo de Rede.

2. Para demonstrar isto, observe primeiro a parte inferior do Registo de Rede e tome nota mental da última atividade.

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

4. Observe novamente a parte inferior do Registo de Rede . É apresentado um novo recurso com o nome getstarted.json :

   

Mostrar mais informações

As colunas do Registo de Rede são configuráveis. Pode ocultar colunas que não está a utilizar. Também existem muitas colunas que estão ocultas por predefinição, o que poderá considerar útil.

1. Clique com o botão direito do rato no cabeçalho da tabela Registo de Rede e, em seguida, selecione Domínio. O domínio de cada recurso é agora apresentado:

   

2. Para ver o URL completo de um recurso, paire o cursor sobre a respetiva célula na coluna Nome .

Simular uma ligação de rede mais lenta

A ligação de rede do computador que utiliza para criar sites é provavelmente mais rápida do que as ligações de rede dos dispositivos móveis dos seus utilizadores. Ao limitar a página, tem uma ideia melhor do tempo que uma página demora a carregar num dispositivo móvel.

1. Clique na lista pendente Limitação na barra de ferramentas superior. Por predefinição, não está selecionada qualquer limitação.

   

2. Selecione 3G:

   

   É apresentado um ícone de aviso no separador Ferramenta de rede para lembrá-lo de que a limitação está ativada.

3. Prima novamente a tecla Recarga () (ou clique com o botão direito do rato em Atualizar) e, em seguida, selecione Esvaziar cache e atualização fixa:

   

Nas visitas repetidas, o browser costuma servir alguns ficheiros da cache, o que acelera o carregamento da página. A cache vazia e a atualização forçada forçam o browser a aceder à rede para todos os recursos. Utilize-o para mostrar como um visitante pela primeira vez experimenta um carregamento de página.

A cache vazia e o fluxo de trabalho de atualização fixa só estão disponíveis quando o DevTools está aberto.

Veja também Emular ligações de rede lentas na Referência de funcionalidades de rede.

Captura de ecrã

As capturas de ecrã mostram o aspeto de uma página Web ao longo do tempo enquanto esta é carregada.

1. Clique no botão () e, em seguida, selecione a caixa de verificação Capturar capturas de ecrã:

   

2. Atualize a página novamente com a cache vazia e o fluxo de trabalho de atualização. Veja Simular uma ligação mais lenta acima se precisar de um lembrete sobre como fazê-lo.

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

   

3. Clique na primeira miniatura. As DevTools mostram-lhe que atividade de rede estava a ocorrer naquele momento:

   

4. Clique novamente em (Definições de rede) e a caixa de verificação Captura de ecrã para fechar o painel Capturas de Ecrã.

5. Atualize a página novamente.

Inspecionar os detalhes do recurso

Selecione um recurso para obter mais informações sobre o mesmo.

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

   

2. Selecione o painel Pré-visualizar . É apresentada uma composição básica do HTML:

   

   O painel é útil quando uma API devolve um código de erro em HTML. Poderá ser mais fácil ler o HTML composto do que o código fonte HTML ou quando inspeciona imagens.

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

   

   Sugestão: quando um ficheiro é minimizado, selecione o botão Formatar () na parte inferior do painel Resposta para voltar a formatar os conteúdos do ficheiro para legibilidade.

   Por exemplo, se a resposta contiver dados JSON minificados, clique no botão Formatar para voltar a formatar a sintaxe JSON para que cada propriedade de objeto esteja na sua própria linha. Também pode utilizar o visualizador JSON para ver respostas JSON formatadas e realçadas num separador do browser. Veja Ver um ficheiro JSON ou resposta do servidor com formatação.

4. Selecione o painel Temporização . É apresentada uma discriminação da atividade de rede do recurso:

   

5. Clique em Fechar () para ver novamente o Registo de Rede:

   

Procurar cabeçalhos e respostas de rede

Utilize o painel Pesquisa quando precisar de procurar nos cabeçalhos HTTP e respostas de todos os recursos uma determinada cadeia ou expressão regular.

Por exemplo, utilize o painel Pesquisa para verificar se os seus recursos estão a utilizar as políticas de cache corretas, da seguinte forma:

1. Clique no botão Procurar (). O painel Pesquisa é aberto à esquerda do Registo de rede:

   

2. Escreva no-cache e prima Enter. O painel Pesquisa lista todas as instâncias que no-cache encontra nos cabeçalhos de recursos ou no conteúdo:

   

3. Clique num resultado para ver o recurso no qual o resultado foi encontrado. Se estiver a ver os detalhes do recurso, selecione um resultado para aceder diretamente ao mesmo. Por exemplo, se a consulta tiver sido encontrada num cabeçalho, o separador Cabeçalhos é aberto:

   

   Se a consulta tiver sido encontrada no conteúdo, o separador Resposta é aberto.

4. Feche o painel Pesquisa ao clicar no botão Fechar (X) à direita.

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

Consulte também:

• Colocação em cache HTTP na 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 predefinição. Se a barra de ferramentas Filtros não estiver ativada, clique em Filtro () para mostrá-la:

Filtrar por cadeia, expressão regular ou propriedade

A caixa de texto Filtrar suporta muitos tipos diferentes de filtragem.

1. Escreva png na caixa de texto Filtro . Apenas os ficheiros que contêm o texto png são apresentados. Neste caso, os únicos ficheiros que correspondem ao filtro são as imagens PNG.

2. Escreva /.*\.[cj]s+$/, que é uma expressão regular javaScript. O DevTools filtra qualquer recurso com um nome de ficheiro que não termine com um j ou um c seguido de 1 ou mais s carateres.

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

4. Escreva larger-than:1000 na caixa de texto Filtro . O DevTools filtra qualquer recurso com respostas inferiores a 1000 bytes.

   Para obter a lista completa de propriedades filtráveis, veja Filtrar pedidos por propriedades.

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

Filtrar por tipo de recurso

Para se concentrar num determinado tipo de ficheiro, como folhas de estilo:

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

   

2. Para também apresentar scripts, prima sem soltar Ctrl (Windows, Linux) ou Comando (macOS) e, em seguida, clique em JS.

3. Para remover os filtros e apresentar todos os recursos novamente, selecione Tudo.

Para outros fluxos de trabalho de filtragem, veja Filtrar pedidos.

Bloquear pedidos

Qual é o aspeto e comportamento de uma página quando alguns dos recursos da página não estão disponíveis? Falha completamente ou ainda está um pouco funcional? Bloquear pedidos para descobrir:

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

2. Escreva block, selecione Mostrar Bloqueio de pedidos de rede e, em seguida, prima Enter:

   

   A ferramenta de bloqueio de pedidos de rede é aberta no painel Vista Rápida na parte inferior de DevTools.

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

   

4. Atualize a página. Conforme esperado, o estilo da página está ligeiramente confuso, porque a folha de estilos main foi bloqueada.

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

   

5. Desmarque a caixa de verificação Ativar bloqueio de pedidos de rede .

Consulte também:

• Bloquear um pedido de rede na ferramenta de bloqueio de pedidos de rede.

Conclusão

Parabéns, concluiu o tutorial! Agora já sabe como utilizar a Ferramenta de rede nas DevTools do Microsoft Edge.

Para descobrir mais funcionalidades de DevTools relacionadas com a inspeção da atividade de rede, veja Referência de funcionalidades 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 é da autoria de Kayce Bascos.

Este trabalho é licenciado ao abrigo de uma Licença Internacional creative Commons Attribution 4.0.