Inspecionar atividade de rede

Kayce Basques
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.

    A demonstração

    Figura 1. A demonstração

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

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

    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.

    O console

    Figura 3. O console

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

    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.

    DevTools na parte de baixo da janela

    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.

    O 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.
  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.

    Um novo recurso no registro de rede

    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.

    Como ativar a coluna Domínio

    Figura 8. Como ativar a coluna Domínio

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.

    Como ativar a limitação

    Figura 9. Como ativar a limitação

  2. Selecione 3G lento.

    Seleção de 3G lento

    Figura 10. Seleção de 3G lento

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

    Esvaziar cache e fazer recarga forçada

    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.

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

    Capturas de tela do carregamento de página

    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.

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

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

  4. Clique em Capture Capturas de tela Fazer 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.

    A guia "Cabeçalhos"

    Figura 14. A guia "Cabeçalhos"

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

    A guia "Visualização"

    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.

    A guia "Resposta"

    Figura 16. A guia "Resposta"

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

    A guia "Período"

    Figura 17. A guia "Período"

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

    O botão "Fechar"

    Figura 18. O botão "Fechar"

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 Pesquisar. O painel Pesquisar é aberto à esquerda do registro de rede.

    O painel Pesquisar

    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.

    Resultados da pesquisa para o Cache-Control

    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.

    Um resultado da pesquisa destacado na guia "Cabeçalhos"

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

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

    Botões "Fechar"

    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.

Barra de ferramentas "Filtros"

Figura 23. Barra de ferramentas "Filtros"

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

  1. Clique em Filtrar 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.

    Um filtro de string

    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.

    Um filtro de expressão regular

    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.

    Um filtro negativo

    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.

    Um filtro de propriedade

    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.

    Mostrando apenas arquivos CSS

    Figura 28. Mostrando apenas arquivos CSS

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

    Mostrando apenas arquivos CSS e 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.

    O menu de comando

    Figura 30. O menu de comando

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

    Mostrar bloqueio de solicitações

    Figura 31. Mostrar bloqueio de solicitações

  3. Clique em Adicionar padrão Adicionar padrão.

  4. Digite main.css.

    Como bloquear o 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.

    main.css 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.