Use o painel Rede para analisar o carregamento de página e inspecionar os recursos da rede.
Visão geral
No painel Rede, é possível:
- Registrar atividade de rede
- Inspecionar solicitações de rede
- Filtrar e classificar solicitações de rede
- Pesquisar cabeçalhos e respostas da rede
- Mudar o comportamento de carregamento
- Bloquear solicitações de rede
- Mudar as condições da rede
- Depurar regras de especulação de
prefetch - Substituir cabeçalhos de resposta HTTP
- Substitua os cabeçalhos de vários URLs por caracteres curinga.
- Salvar e exportar dados de solicitação de rede
Confira Inspecionar atividade de rede para um tutorial guiado que explora alguns dos recursos do painel Rede mais usados.
Abrir o painel Network
Para abrir o painel Network, abra o DevTools e clique em Rede na barra de ações na parte de cima.
Como alternativa, para abrir o painel Rede no 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 Show Network panel e pressione Enter.
Registrar atividade de rede
Quando você abre o DevTools, as solicitações de rede são registradas automaticamente no painel Network, desde que ele esteja aberto.
Além de gravar, você pode fazer o seguinte:
- Parar de gravar solicitações de rede.
- Limpa todas as solicitações da tabela Solicitações.
- Salvar solicitações nos carregamentos de página.
- Emular 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 Ver um registro de solicitações.
Clique no nome de uma solicitação para ver guias com mais informações sobre ela, incluindo as seguintes:
- 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 fez com que um recurso fosse solicitado.
- Tempo: um detalhamento da atividade de rede para o recurso selecionado.
- Cookies: os cookies de uma solicitação e a resposta dela.
Filtrar e classificar solicitações de rede
O painel Network oferece duas maneiras de classificar solicitações na tabela Requests:
Veja a seguir várias maneiras de filtrar solicitações na tabela Solicitações:
- Filtrar solicitações por propriedade
- Filtrar solicitações por tipo
- Filtrar solicitações por horário
- 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
Pesquisar cabeçalhos e respostas de rede
Para saber como pesquisar uma determinada string ou expressão regular nos cabeçalhos HTTP e nas respostas de todos os recursos, consulte Pesquisar cabeçalhos e respostas da rede.
Alterar o comportamento de carregamento
Para testar a experiência do usuário na página, altere o comportamento de carregamento no painel Rede.
No painel Rede, você pode fazer o seguinte:
- Emular um visitante novo desativando o cache do navegador
- Limpar manualmente o cache do navegador
- Limpar cookies do navegador manualmente
- Emular 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ção de rede
Para salvar e exportar dados de solicitação de rede, consulte: