Come posso eseguire il debug di un POST HTTP in Chrome?

Vorrei visualizzare i dati POST HTTP inviati in Chrome.

I dati sono ora in memoria e ho la possibilità di inviare nuovamente il modulo.

So che se reinvio il server genererà un errore, posso comunque visualizzare i dati presenti nella memoria di Chrome?

1. Vai a Strumenti per sviluppatori Chrome (menu Chrome -> Altri strumenti -> Strumenti per sviluppatori)
2. Scegli la scheda "Rete"
3. Aggiorna la pagina in cui ti trovi
4. Otterrai un elenco di query http verificatesi mentre la console di rete era attiva. Selezionane uno a sinistra
5. Scegli la scheda "Intestazioni"

Ecco!

È possibile filtrare le richieste POST HTTP con Chrome DevTools . Basta fare quanto segue:

1. Apri Chrome DevTools ( Cmd+ Opt+ Isu Mac, Ctrl+ Shift+ Io F12su Windows) e fai clic sulla scheda "Rete"
2. Fai clic sull'icona "Filtro"
3. Inserisci il tuo metodo di filtro: method:POST
4. Seleziona la richiesta di cui desideri eseguire il debug
5. Visualizza i dettagli della richiesta di cui desideri eseguire il debug

Immagine dello schermo

Testato con Chrome versione 53.

Puoi utilizzare la versione Canary di Chrome per visualizzare il payload delle richieste POST.

Un'altra opzione che può essere utile è uno strumento di debug HTTP dedicato. Ce ne sono alcuni disponibili, suggerirei HTTP Toolkit : un progetto open source su cui sto lavorando (sì, potrei essere parziale) per risolvere questo stesso problema per me stesso.

La differenza principale è usabilità e potenza. Gli strumenti di sviluppo di Chrome sono utili per cose semplici, e consiglierei di iniziare da lì, ma se stai lottando per capire le informazioni lì, e hai bisogno di più spiegazione o più potenza, possono essere utili strumenti mirati!

In questo caso, ti mostrerà l'intero corpo POST che stai cercando, con un editor amichevole e l'evidenziazione (tutto alimentato da VS Code ) in modo da poter scavare. Ti fornirà ovviamente le intestazioni di richiesta e risposta, ma con informazioni extra come i documenti di MDN ( Mozilla Developer Network ) per ogni intestazione standard e codice di stato che puoi vedere.

Un'immagine vale mille risposte StackOverflow:

Le altre persone hanno dato risposte molto belle, ma vorrei completare il loro lavoro con uno strumento di sviluppo aggiuntivo. Si chiama Live HTTP Headers e puoi installarlo nel tuo Firefox , e in Chrome abbiamo lo stesso plug-in in questo modo .

Lavorare con esso è semplicissimo.

1. Utilizzando Firefox, accedi al sito Web a cui desideri ricevere la tua richiesta di post.

2. Nel menu di Firefox Strumenti-> Intestazioni HTTP in tempo reale

3. Verrà visualizzata una nuova finestra e tutti i dettagli del metodo http verranno salvati in questa finestra. Non è necessario fare nulla in questo passaggio.

4. Nel sito Web, svolgere un'attività (accedere, inviare un modulo, ecc.)

5. Guarda la finestra del plug-in. È tutto registrato.

Basta ricordare è necessario controllare la cattura .

Ha una situazione difficile: se invii un modulo di post, Chrome aprirà una nuova scheda per inviare la richiesta. È giusto fino ad ora, ma se innesca un evento per scaricare i file , questa scheda si chiuderà immediatamente in modo da non poter acquisire questa richiesta nello strumento Dev.

Soluzione: prima di inviare il modulo di posta, è necessario interrompere la rete , il che rende impossibile inviare correttamente la richiesta in modo che la scheda non venga chiusa. Quindi puoi catturare il messaggio di richiesta in Chrome Devtool (aggiornamento della nuova scheda se necessario)