Use o painel Network para analisar a carga da página e inspecionar os recursos de rede.
Visão geral
No painel Rede, você pode:
- Gravar a atividade de rede
- Inspecionar solicitações de rede
- Filtrar e classificar solicitações de rede
- Cabeçalhos e respostas da rede de pesquisa
- Mudar o comportamento de carregamento
- Bloquear solicitações de rede
- Mudar as condições de rede
- Depurar regras de especulação
prefetch - Substituir cabeçalhos de resposta HTTP
- Substitua cabeçalhos para vários URLs com caracteres curinga.
- Salvar e exportar dados de solicitação de rede
Confira Inspecionar atividade de rede para conferir um tutorial guiado que mostra alguns dos recursos mais usados do painel Rede.
Abrir o painel "Rede"
Para abrir o painel Rede, abra as Ferramentas do desenvolvedor e clique em Rede na barra de ação na parte de cima.
Como alternativa, para abrir o painel Rede pelo menu de comando, siga estas etapas:
- Abra o DevTools.
- Abra o menu de comando pressionando:
- macOS: Command+Shift+P
- Windows, Linux e ChromeOS: Control+Shift+P
- Comece a digitar
Network, selecione Mostrar painel de rede e pressione Enter.
Gravar atividade de rede
Quando você abre o DevTools, as solicitações de rede são gravadas automaticamente no painel Network, desde que o DevTools esteja aberto.
Além de gravar, você pode fazer o seguinte:
- Parar de gravar solicitações de rede.
- Limpar todas as solicitações na tabela Solicitações.
- Salve as solicitações nos carregamentos de página.
- Emulem uma experiência off-line.
- Simule conexões de rede mais lentas.
Inspecionar solicitações de rede
Todas as solicitações de rede são registradas na tabela Solicitações, no centro do painel.
Para saber mais sobre as colunas exibidas por padrão e outras que você pode adicionar, consulte Consultar um registro de solicitações.
Clique no nome de uma solicitação para ver guias com mais informações, incluindo:
- Cabeçalhos: os cabeçalhos HTTP do recurso selecionado.
- Payload: os parâmetros da string de consulta e os dados do formulário de uma solicitação.
- Visualização: uma renderização básica do HTML.
- Resposta: o código-fonte HTML do recurso selecionado.
- Iniciador: o que causou a solicitação de um recurso.
- Tempo: um detalhamento da atividade de rede do recurso selecionado.
- Cookies: cookies de uma solicitação e da resposta dela.
Filtrar e classificar solicitações de rede
O painel Rede oferece duas maneiras de classificar as solicitações na tabela Solicitações:
Confira a seguir várias maneiras de filtrar solicitações na tabela Solicitações:
- Filtrar solicitações por propriedades
- Filtrar solicitações por tipo
- Filtrar solicitações por tempo
- Ocultar URLs de dados
- Ocultar URLs de extensão
- Mostrar apenas as solicitações com cookies de resposta bloqueados
- Mostrar apenas solicitações bloqueadas
- Mostrar apenas solicitações de terceiros
Cabeçalhos e respostas da rede de pesquisa
Para saber como pesquisar cabeçalhos e respostas HTTP de todos os recursos para uma determinada string ou expressão regular, consulte Pesquisar cabeçalhos e respostas da rede.
Mudar o comportamento de carregamento
Teste a experiência do usuário na sua página mudando o comportamento de carregamento no painel Rede.
Usando o painel Rede, você pode:
- Como simular um visitante novo desativando o cache do navegador
- Limpar o cache do navegador manualmente
- Limpar manualmente os cookies do navegador
- Emulação off-line
- Simular uma conexão de rede lenta
- Substituir cabeçalhos de resposta HTTP
- Substituir o user agent
Salvar e exportar dados de solicitações de rede
Para salvar e exportar dados de solicitação de rede, consulte: