Use o painel Rede para analisar o carregamento de página e inspecionar os recursos de rede.
Visão geral
Com o painel Rede, é possível:
- Gravar 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 de vários URLs com 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 mais usados do painel Rede.
Abra o painel Network
Para abrir o painel Rede, abra o DevTools e clique em Rede na barra de ações na parte de cima.
Como alternativa, para abrir o painel Rede pelo Menu de comandos, siga estas etapas:
- Abra o DevTools.
- Abra o menu de comandos pressionando:
- macOS: Command+Shift+P
- Windows, Linux, ChromeOS: Control+Shift+P
- Comece a digitar
Network, selecione Mostrar painel Network e pressione Enter.
Gravar atividade de rede
Quando você abre o DevTools, as solicitações de rede são gravadas automaticamente no painel Rede enquanto o DevTools está aberto.
Além de gravar, você pode fazer o seguinte:
- Pare de gravar solicitações de rede.
- Limpe todas as solicitações na tabela Solicitações.
- Salvar solicitações em carregamentos de página.
- Emule 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 mostradas por padrão e outras que podem ser adicionadas, consulte Ver um registro de solicitações.
Clique no nome de uma solicitação para ver guias com mais informações sobre ela, incluindo:
- Cabeçalhos: os cabeçalhos HTTP do recurso selecionado.
- Payload: os parâmetros de string de consulta e os dados de 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 solicitações na tabela Solicitações:
Confira algumas maneiras de filtrar solicitações na tabela Solicitações:
- Filtrar solicitações por propriedades
- Filtrar solicitações por tipo
- Filtrar solicitações por hora
- 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 os cabeçalhos e respostas HTTP de todos os recursos por uma determinada string ou expressão regular, consulte Pesquisar cabeçalhos e respostas de rede.
Mudar o comportamento de carregamento
Teste a experiência do usuário da sua página mudando o comportamento de carregamento no painel Rede.
Com o painel Rede, é possível 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: