Como usar o depurador de rede do Chrome com redirecionamentos

379

O depurador de rede do Chrome fornece uma excelente visão de todos os recursos HTTP carregados para uma página. Mas limpa a lista sempre que uma nova página HTML de nível superior é carregada. Isso torna muito difícil depurar páginas que são recarregadas automaticamente por um motivo ou outro (script em execução ou 300 respostas).

Posso dizer ao Chrome para não limpar o depurador de rede quando uma nova página de nível superior é carregada? Ou posso voltar e examinar os recursos de rede da página anterior?

Ou posso forçar de alguma forma o Chrome a pausar antes de carregar uma nova página quando não controle a página que estou tentando depurar que está redirecionando? É parte de uma dança do OpenID que está dando errado, então a combinação de SSL e credenciais torna extremamente difícil depurar com ferramentas de linha de comando.

Leopd
fonte
Como essa duplicata obteve mais votos positivos do que a postada 1 mês antes? stackoverflow.com/q/10703944/632951
Pacerier
6
@Pacerier O link que você vinculou não parece ter sido postado por você, mas é provável que o motivo não tenha "Chrome" no título. Quando as pessoas procuram algo relacionado ao Chrome, sua pesquisa geralmente inclui a palavra-chave Chrome. As "Ferramentas do desenvolvedor do Google" são incrivelmente ambíguas.
Joel Mellon

Respostas:

527

Isso foi alterado desde a v32, graças a @Daniel Alexiuc e @Thanatos pelos comentários.


Corrente (≥ v32)

Na parte superior da guia "Rede" do DevTools, há uma caixa de seleção para ativar a funcionalidade "Preservar log". Se estiver marcado, o log da rede é preservado no carregamento da página.

Guia Rede do DevTools do Chrome v33: Preservar log

O pequeno ponto vermelho à esquerda agora tem o objetivo de ativar e desativar completamente o log de rede.


versões mais antigas

Nas versões mais antigas do Chrome (v21 aqui), há um pequeno ponto vermelho clicável no rodapé da guia "Rede".

Guia Rede do DevTools do Chrome v22: preservar o registro na navegação

Se você passar o mouse sobre ele, ele informará que "Preservará o Log On Navigation" quando estiver ativado. Mantém a promessa.

bfncs
fonte
11
Na versão 32 ainda está lá, mas foi para o topo do painel de rede.
Daniel Alexiuc
4
Na verdade, agora está no topo, mas chamado "Preservar log", e é uma caixa de seleção. De maneira confusa, ainda existe um ícone de registro vermelho, mas é apenas se você deseja fazer o logon.
Thanatos 23/03
11
Obrigado por comentar a alteração, atualizei a resposta de acordo.
bfncs
@ruben, a interface, de fato, agora olhar um pouco diferente, mas ainda há uma opção chamada "Preserve log" no topo da guia rede: i.imgur.com/fhSDYSz.png
bfncs
14
@ rubenlop88 Verifique se você não está filtrando documentos , caso contrário eles não persistirão lá. Você pode verificá-los especificamente na guia Outros .
alex
173

Não sei como forçar o Chrome a não limpar o depurador de rede, mas isso pode ser o que você está procurando:

  1. Abra o console js
  2. window.addEventListener("beforeunload", function() { debugger; }, false)

Isso fará uma pausa no chrome antes de carregar a nova página, atingindo um ponto de interrupção.

Matt York
fonte
55
Esta não foi a resposta certa para a pergunta, mas é na verdade o que estou procurando. Obrigado.
Isaaclw
2
Isso é tão liso. Cheguei aqui procurando uma solução "pausa antes de redirecionar" e aqui está. A resposta aceita é mais fácil de lembrar, mas isso é radical.
Joel Mellon
19
Isso é extremamente útil, pois o chrome não mostra o corpo da resposta do servidor, se o navegador redirecionar logo após obter a resposta.
Kristóf Dombi
23

Basta atualizar a resposta @bfncs

Eu acho que no Chrome 43 o comportamento mudou um pouco. Você ainda precisa habilitar a opção Preservar registro para ver, mas agora redirecione mostrado na guia Outros, quando o documento carregado for mostrado em Doc.

Isso sempre me confunde, porque tenho muitas solicitações de rede e a filtre por tipo XHR, Doc, JS etc. Mas, no caso de redirecionar, a guia Doc está vazia, por isso preciso adivinhar.

sf
fonte
11
Você é o herói que eu estava procurando!
Matthew Haworth
23

Outra ótima solução para depurar as chamadas de rede antes de redirecionar para outras páginas é selecionar o beforeunloadponto de interrupção do evento

Dessa forma, você garante interromper o fluxo imediatamente antes de redirecioná-lo para outra página, assim todas as chamadas de rede, dados de rede e logs do console ainda estão lá.

Essa solução é melhor quando você deseja verificar qual é a resposta das chamadas

Ponto de interrupção do evento de Chrome beforeunload

PS: Você também pode usar pontos de interrupção XHR se quiser parar logo antes de uma chamada específica ou qualquer ligação (veja o exemplo da imagem) Ponto de ruptura XHR

Ofear
fonte
2
Isso é ótimo. Com o loadevento, podemos parar no início e definir pontos de interrupção facilmente. Obrigado!
LeOn - Han Li