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 Desempenho, a ferramenta Problemas e a ferramenta Lighthouse , uma vez que lhe fornece 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. Para abrir o DevTools, clique com o botão direito do mouse na página da Web e 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 ():

   Pode preferir ancorar DevTools na parte inferior da janela:

   

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 principais:

• 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 documento HTML principal. 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 de estado HTTP 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. Selecione a lista pendente Limitação na barra de ferramentas superior. Está definido como Sem limitação por predefinição.

2. Selecione Lento 3G:

   

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 JSON formatado.

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, suponha que pretende verificar se os seus recursos estão a utilizar políticas de cache razoáveis.

1. Selecione 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 painel Cabeçalhos é aberto. Se a consulta tiver sido encontrada no conteúdo, o painel Resposta é 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 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:

   

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

   

4. Atualize a página. Conforme esperado, o estilo da página está ligeiramente confuso, porque a folha de estilos principal 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 encontra-se aqui e é criada por Kayce Bascos (Technical Writer, Chrome DevTools & Lighthouse).

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