Inspecionar atividade de rede

Kayce Basques

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

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

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

Quando usar o painel Network

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

• Certificar-se de que os recursos estão sendo realmente enviados ou baixados.
• a inspeção das propriedades de um recurso individual, como cabeçalhos HTTP, conteúdo, tamanho e assim por diante.

Para encontrar maneiras de melhorar o desempenho do carregamento de página, não comece pelo painel "Network". Há muitos tipos de problemas de desempenho de carregamento que não estão relacionados à atividade da rede. Comece pelo painel do Lighthouse, que oferece sugestões segmentadas sobre como melhorar sua página. Consulte Otimizar a velocidade do site.

Abrir o painel Network

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

1. Abra a Demonstração inicial.

   

   Figura 1. A demonstração

   Talvez você prefira mover a demonstração para uma janela separada.

   

   Figura 2. A demonstração em uma janela e este tutorial em outra

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

   

   Figura 3. O console

   Se preferir, encaixe o DevTools na parte de baixo da janela.

   

   Figura 4. DevTools na parte de baixo da janela

3. Clique na guia Rede. O painel Rede será aberto.

   

   Figura 5. DevTools na parte de baixo da janela

No momento, o painel Network está vazio. Isso ocorre porque o DevTools registra a atividade de rede apenas enquanto ela está aberta e nenhuma atividade de rede ocorreu desde que você o abriu.

Registrar atividade de rede

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

1. Recarregue a página. O painel Network registra toda a atividade de rede no Registro de rede.

   

   Figura 6. O registro de rede

   Cada linha do Registro de rede representa um recurso. Por padrão, os recursos são listados em ordem cronológica. O recurso superior é normalmente o documento HTML principal. O recurso inferior será o que foi solicitado por último.

   Cada coluna representa informações sobre um recurso. A Figura 6 mostra as colunas padrão:

   • Status. O código de resposta HTTP.
   • Tipo. O tipo de recurso.
   • Iniciador. O que fez com que um recurso fosse solicitado. Clique em um link na coluna "Iniciador" para acessar o código-fonte que gerou a solicitação.
   • Horário. Quanto tempo a solicitação demorou.
   • Cascata. Uma representação gráfica dos diferentes estágios da solicitação. Passe o mouse sobre uma Cascata para ver um detalhamento.
   Observação: o gráfico acima do registro de rede é chamado de "Visão geral". Ele não será usado neste tutorial, portanto, você pode ocultá-lo se preferir. Consulte Ocultar o painel "Visão geral".

2. Se o DevTools estiver aberto, ele vai registrar a atividade da rede no Registro de rede. Para demonstrar isso, primeiro confira a parte de baixo do Registro de rede e faça uma anotação mental da última atividade.

3. Clique no botão Get Data na demonstração.

4. Olhe a parte de baixo do Registro de rede novamente. Há um novo recurso chamado getstarted.json. Ao clicar no botão Obter dados, a página solicitou o arquivo.

   

   Figura 7. Um novo recurso no registro de rede

Mostrar mais informações

As colunas do registro de rede são configuráveis. É possível ocultar as colunas que não estão sendo usadas. 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 agora é mostrado.

   

   Figura 8. Como ativar a coluna Domínio

Dica :para acessar o URL completo de um recurso, passe o cursor sobre a 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 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 On-line por padrão.

   

   Figura 9. Como ativar a limitação

2. Selecione 3G lento.

   

   Figura 10. Seleção de 3G lento

3. Toque e mantenha pressionado Recarregar e, em seguida, selecione Esvaziar cache e recarregar.

   

   Figura 11. Esvaziar cache e fazer recarga forçada

   Em acessos repetidos, o navegador geralmente exibe alguns arquivos do cache, o que acelera o carregamento da página. Cache vazio e reinicialização forçada força o navegador a acessar a rede para todos os recursos. Isso é útil quando você quer saber como um visitante novo acessa a página após o carregamento.

   Observação: o fluxo de trabalho Empty Cache and Hard Reload só vai estar disponível quando o DevTools estiver aberto.

Fazer capturas de tela

Com as capturas de tela, é possível conferir a aparência de uma página ao longo do tempo durante o carregamento.

1. Clique em Fazer capturas de tela .

2. Atualize a página novamente com o fluxo de trabalho Empty Cache and Hard Reload. Consulte Simular uma conexão mais lenta se precisar de um lembrete sobre como fazer isso. O painel "Capturas de tela" apresenta miniaturas de como a página aparecia em vários pontos durante o processo de carregamento.

   

   Figura 12. Capturas de tela do carregamento de página

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

   

   Figura 13. A atividade de rede que estava acontecendo durante a primeira captura de tela

4. Clique em Capture Capturas de tela novamente para fechar o painel "Capturas de tela".

5. 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 é exibida. Use esta guia para inspecionar cabeçalhos HTTP.

   

   Figura 14. A guia "Cabeçalhos"

2. Clique na guia Visualização. Será mostrada uma renderização básica do HTML.

   

   Figura 15. A guia "Visualização"

   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 Resposta. O código-fonte HTML é mostrado.

   

   Figura 16. A guia "Resposta"

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

4. Clique na guia Tempo. Um detalhamento da atividade de rede deste recurso é exibido.

   

   Figura 17. A guia "Período"

5. Clique em Fechar para ver o registro de rede novamente.

   

   Figura 18. O botão "Fechar"

Pesquisar cabeçalhos e respostas de rede

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

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

1. Clique em Pesquisar . O painel Pesquisar é aberto à esquerda do registro de rede.

   

   Figura 19. O painel Pesquisar

2. Digite Cache-Control e pressione Enter. O painel de pesquisa lista todas as instâncias de Cache-Control que ele encontra em cabeçalhos de recursos ou conteúdo.

   

   Figura 20. Resultados da pesquisa para "Cache-Control"

3. Clique em um resultado para visualizá-lo. Se a consulta tiver sido encontrada em um cabeçalho, a guia "Cabeçalhos" será aberta. Se a consulta for encontrada no conteúdo, a guia "Resposta" será aberta.

   

   Figura 21. Um resultado da pesquisa destacado na guia "Cabeçalhos"

4. Feche o painel Pesquisar e a guia "Período".

   

   Figura 22. Botões "Fechar"

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.

Figura 23. Barra de ferramentas "Filtros"

A barra de ferramentas Filtros deve estar ativada por padrão. Caso contrário:

1. Clique em Filtrar para mostrar.

Filtrar por string, expressão regular ou propriedade

A caixa de texto Filtro oferece suporte a vários tipos diferentes de filtros.

1. Digite png na caixa de texto Filter. Somente os arquivos que contêm o texto png são exibidos. Nesse caso, os únicos arquivos que correspondem ao filtro são as imagens PNG.

   

   Figura 24. Um filtro de string

2. Digite /.*\.[cj]s+$/. O DevTools filtra todos os recursos com um nome de arquivo que não termine com um j ou um c seguido por um ou mais caracteres s.

   

   Figura 25. Um filtro de expressão regular

3. Digite -main.css. O DevTools filtra main.css. Se qualquer outro arquivo correspondesse ao padrão, ele também seria filtrado.

   

   Figura 26. Um filtro negativo

4. Digite domain:raw.githubusercontent.com na caixa de texto Filter. O DevTools filtra todos os recursos com um URL que não corresponde a esse domínio.

   

   Figura 27. Um filtro de propriedade

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

5. Desmarque qualquer texto na caixa Filtro.

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.

   

   Figura 28. Mostrando apenas arquivos CSS

2. Para ver os scripts, mantenha a tecla Control ou Command (Mac) pressionada e clique em JS.

   

   Figura 29. Mostrando apenas arquivos CSS e JS

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

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

Bloquear solicitações

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

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

   

   Figura 30. O menu de comando

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

   

   Figura 31. Mostrar bloqueio de solicitações

3. Clique em Adicionar padrão .

4. Digite main.css.

   

   Figura 32. Bloqueando main.css

5. Clique em Add.

6. Recarregue a página. Como esperado, o estilo da página está um pouco defeituoso 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 foi bloqueado.

   

   Figura 33. Este contato foi bloqueado: main.css

7. Desmarque a caixa de seleção Ativar o bloqueio de solicitações.

Próximas etapas

Parabéns, você concluiu o tutorial. Clique em Dispense Award para receber o prêmio.

Confira a Referência de rede para descobrir mais recursos do DevTools relacionados à inspeção da atividade da rede.