Come utilizzare il debugger di rete di Chrome con i reindirizzamenti

379

Il debugger di rete di Chrome mi offre un'ottima vista di tutte le risorse HTTP caricate per una pagina. Ma cancella l'elenco ogni volta che viene caricata una nuova pagina HTML di livello superiore. Ciò rende molto difficile il debug di pagine che si ricaricano automaticamente per un motivo o per l'altro (esecuzione di script o 300 risposte).

Posso dire a Chrome di non cancellare il debugger di rete quando viene caricata una nuova pagina di livello superiore? O posso tornare indietro e guardare le risorse di rete della pagina precedente?

Oppure posso forzare in qualche modo Chrome a mettere in pausa prima di caricare una nuova pagina quando non controllo la pagina che sto provando a eseguire il debug che sta eseguendo il reindirizzamento? Fa parte di una danza OpenID che sta andando male, quindi la combinazione di SSL e credenziali rende estremamente difficile il debug con strumenti da riga di comando.

http google-chrome google-chrome-devtools

— Leopd
fonte

In che modo questo duplicato ha ottenuto più voti rispetto a quello pubblicato 1 mese prima? stackoverflow.com/q/10703944/632951

— Pacerier

6

@Pacerier Quello che hai collegato non sembra essere pubblicato da te, ma è probabile che il ragionamento non abbia "Chrome" nel titolo. Quando le persone sono alla ricerca di qualcosa correlato a Chrome, la loro ricerca di solito include la parola chiave Chrome. "Strumenti per sviluppatori Google" è incredibilmente ambiguo.

— Joel Mellon,

gist.github.com/InstanceOfMichael/f6a509b84fe82a718816

— diosney

527

Questo è stato modificato dalla v32, grazie a @Daniel Alexiuc e @Thanatos per i loro commenti.

Corrente (≥ v32)

Nella parte superiore della scheda "Rete" di DevTools, c'è una casella di controllo per attivare la funzionalità "Conserva registro". Se è selezionato, il registro di rete viene conservato al caricamento della pagina.

Scheda di rete DevTools Chrome v33: Conserva registro

Il puntino rosso a sinistra ora ha lo scopo di attivare e disattivare completamente la registrazione in rete.

Versioni precedenti

Nelle versioni precedenti di Chrome (qui v21), c'è un piccolo punto rosso cliccabile nel piè di pagina della scheda "Rete".

Scheda di rete DevTools Chrome v22: Mantieni registro durante la navigazione

Se ci passi sopra, ti dirà che, quando viene attivato, "Preserverà il registro durante la navigazione". Mantiene la promessa.

— bfncs
fonte

1

Nella versione 32 è ancora lì, ma si è spostato nella parte superiore del pannello di rete.

— Daniel Alexiuc,

4

In realtà, ora è nella parte superiore, ma chiamato "Conserva registro", ed è una casella di controllo. Confusamente, c'è ancora un'icona di registrazione rossa, ma è solo se accedere affatto.

— Thanatos,

1

Grazie per aver commentato la modifica, ho appena aggiornato la risposta di conseguenza.

— bfncs,

@ruben, l'interfaccia ora sembra davvero un po 'diversa, ma c'è ancora una casella di controllo etichettata "Conserva registro" nella parte superiore della scheda di rete: i.imgur.com/fhSDYSz.png

— bfncs,

14

@ rubenlop88 Assicurati di non filtrare su Documenti , altrimenti non persisteranno lì. Puoi verificarli specificamente nella scheda Altro .

— alex,

173

Non conosco un modo per forzare Chrome a non cancellare il debugger di rete, ma questo potrebbe realizzare ciò che stai cercando:

Apri la console js
window.addEventListener("beforeunload", function() { debugger; }, false)

Questo metterà in pausa Chrome prima di caricare la nuova pagina colpendo un punto di interruzione.

— Matt York
fonte

55

Questa non era la risposta giusta alla domanda, ma in realtà è quello che sto cercando. Grazie.

— Isaaclw,

2

Questo è così liscio. Sono arrivato qui alla ricerca di una soluzione "Pausa prima del reindirizzamento" ed eccola qui. La risposta accettata è più facile da ricordare ma questa è rad.

— Joel Mellon,

19

Ciò è estremamente utile, poiché Chrome non mostra il corpo della risposta del server, se il browser reindirizza subito dopo aver ottenuto la risposta.

— Kristóf Dombi,

23

Basta aggiornare la risposta di @bfncs

Penso che intorno a Chrome 43 il comportamento sia stato leggermente modificato. È ancora necessario abilitare Conserva registro per vedere, ma ora il reindirizzamento è mostrato nella scheda Altro, quando il documento caricato è mostrato in Doc.

Questo mi confonde sempre, perché ho molte richieste di rete e lo filtra per tipo XHR, Doc, JS ecc. Ma in caso di reindirizzamento la scheda Doc è vuota, quindi devo indovinare.

— sf
fonte

1

Sei l'eroe che stavo cercando!

— Matthew Haworth,

23

Un'altra ottima soluzione per eseguire il debug delle chiamate di rete prima di reindirizzare ad altre pagine è selezionare il beforeunloadpunto di interruzione dell'evento

In questo modo si assicura di interrompere il flusso appena prima di reindirizzarlo a un'altra pagina, in questo modo tutte le chiamate di rete, i dati di rete e i registri della console sono ancora lì.

Questa soluzione è la migliore quando vuoi controllare qual è la risposta delle chiamate

PS: puoi anche usare i punti di interruzione XHR se vuoi fermarti prima di una chiamata specifica o qualsiasi chiamata (vedi esempio di immagine)

— Ofear
fonte

2

Questo è fantastico Con l' loadevento, possiamo fermarci all'inizio e impostare facilmente il punto di interruzione. Grazie!

— LeOn - Han Li