Use o painel Network para analisar o carregamento de página e inspecionar os recursos de rede.
Visão geral
O painel Network permite:
- Gravar atividade de rede
- Inspecionar solicitações de rede
- Filtrar e classificar solicitações de rede
- Pesquisar cabeçalhos e respostas de rede
- 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
- Substituir 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 Network.
Abrir o painel Network
Para abrir o painel Network, abra o DevTools e clique em Network, localizado na barra de ações na parte de cima.
Como alternativa, para abrir o painel Network pelo menu de comando , siga estas etapas:
- Abra o DevTools.
- Abra o menu de comando pressionando:
- macOS: Command+Shift+P
- Windows, Linux, ChromeOS: Control+Shift+P
- Comece a digitar
Network, selecione 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 Network, desde que o DevTools esteja aberto.
Além da gravação, você pode fazer o seguinte:
- Parar a gravação de solicitações de rede.
- Limpar todas as solicitações da tabela Requests.
- Salvar solicitações em carregamentos de página.
- Emular uma experiência off-line.
- Simular conexões de rede mais lentas.
Inspecionar solicitações de rede
Todas as solicitações de rede são registradas na tabela Requests no centro do painel.
Para saber mais sobre as colunas exibidas por padrão e outras que podem ser adicionadas, consulte Visualizar um registro de solicitações.
Clique no nome de uma solicitação para ver guias com mais informações sobre ela, incluindo o seguinte:
- Cabeçalhos: os cabeçalhos HTTP da solicitação selecionada.
- Payload: os parâmetros da string de consulta e os dados do formulário de uma solicitação.
- Preview: uma renderização básica do HTML.
- Resposta: o código-fonte HTML da solicitação.
- Iniciador: o que causou a solicitação.
- Timing: um detalhamento da atividade da rede para a solicitação selecionada.
- Cookies: cookies da solicitação e da resposta.
- Sessões vinculadas ao dispositivo: o status de adiamento e atualização das sessões ativas vinculadas ao dispositivo.
Filtrar e classificar solicitações de rede
O painel Network oferece duas maneiras de classificar as solicitações na tabela Requests:
Confira algumas maneiras de filtrar solicitações na tabela Requests:
- 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
Pesquisar cabeçalhos e respostas de rede
Para saber como pesquisar os cabeçalhos e respostas HTTP de todos os recursos de 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 Network.
Usando o painel Network , você pode fazer o seguinte:
- Emular um visitante novo desativando o cache do navegador
- Limpar manualmente o cache do navegador
- Limpar manualmente os cookies do navegador
- 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 o seguinte: