Wie kann ich einen HTTP-POST in Chrome debuggen?

Ich möchte die in Chrome gesendeten HTTP-POST-Daten anzeigen.

Die Daten sind jetzt im Speicher und ich habe die Möglichkeit, das Formular erneut einzureichen.

Ich weiß, dass bei einer erneuten Übermittlung des Servers ein Fehler ausgegeben wird. Kann ich trotzdem die Daten anzeigen, die sich im Speicher von Chrome befinden?

1. Gehen Sie zu Chrome Developer Tools (Chrome-Menü -> Weitere Tools -> Entwicklertools)
2. Wählen Sie die Registerkarte "Netzwerk"
3. Aktualisieren Sie die Seite, auf der Sie sich befinden
4. Sie erhalten eine Liste der http-Abfragen, die aufgetreten sind, während die Netzwerkkonsole eingeschaltet war. Wählen Sie links eine davon aus
5. Wählen Sie die Registerkarte "Header"

Voila!

Sie können mit den Chrome DevTools nach HTTP-POST-Anforderungen filtern . Gehen Sie einfach wie folgt vor:

1. Öffnen Sie Chrome DevTools ( Cmd+ Opt+ Iunter Mac, Ctrl+ Shift+ Ioder F12unter Windows) und klicken Sie auf die Registerkarte "Netzwerk"
2. Klicken Sie auf das Symbol "Filter"
3. Geben Sie Ihre Filtermethode ein: method:POST
4. Wählen Sie die Anforderung aus, die Sie debuggen möchten
5. Zeigen Sie die Details der Anforderung an, die Sie debuggen möchten

Bildschirmfoto

Getestet mit Chrome Version 53.

Sie können die kanarische Version von Chrome verwenden , um die Anforderungsnutzlast von POST-Anforderungen anzuzeigen.

Eine weitere nützliche Option ist ein dediziertes HTTP-Debugging-Tool. Es gibt einige, ich würde vorschlagen, HTTP Toolkit : ein Open-Source-Projekt, an dem ich gearbeitet habe (ja, ich könnte voreingenommen sein), um dasselbe Problem für mich selbst zu lösen.

Der Hauptunterschied ist Benutzerfreundlichkeit und Leistung. Die Chrome-Entwicklungstools eignen sich gut für einfache Dinge, und ich würde empfehlen, dort anzufangen. Wenn Sie jedoch Schwierigkeiten haben, die Informationen dort zu verstehen, und entweder mehr Erklärungen oder mehr Leistung benötigen, können geeignete Tools hilfreich sein!

In diesem Fall wird Ihnen der gesamte POST-Text angezeigt, den Sie suchen, mit einem benutzerfreundlichen Editor und Hervorhebungen (alle mit VS-Code ), damit Sie sich umsehen können. Es gibt Ihnen natürlich die Anforderungs- und Antwortheader, aber mit zusätzlichen Informationen wie Dokumenten von MDN (dem Mozilla Developer Network ) für jeden Standardheader und Statuscode, den Sie sehen können.

Ein Bild ist tausend StackOverflow-Antworten wert:

Die anderen Leute haben sehr nette Antworten gegeben, aber ich möchte ihre Arbeit mit einem zusätzlichen Entwicklungswerkzeug abschließen. Es heißt Live-HTTP-Header und kann in Ihrem Firefox installiert werden. In Chrome haben wir das gleiche Plug-In wie dieses .

Die Arbeit damit ist sehr einfach.

1. Navigieren Sie mit Ihrem Firefox zu der Website, auf die Sie Ihre Post-Anfrage erhalten möchten.

2. In Ihrem Firefox-Menü Extras-> Live-HTTP-Header

3. Ein neues Fenster wird für Sie angezeigt, und alle Details der http-Methode werden in diesem Fenster für Sie gespeichert. In diesem Schritt müssen Sie nichts tun.

4. Führen Sie auf der Website eine Aktivität aus (melden Sie sich an, senden Sie ein Formular usw.)

5. Schauen Sie sich Ihr Plug-In-Fenster an. Es ist alles aufgezeichnet.

Denken Sie daran, dass Sie die Erfassung überprüfen müssen .

Es hat eine schwierige Situation: Wenn Sie ein Post-Formular senden, öffnet Chrome einen neuen Tab, um die Anfrage zu senden. Es ist bis jetzt richtig, aber wenn es ein Ereignis zum Herunterladen von Dateien auslöst , wird diese Registerkarte sofort geschlossen, sodass Sie diese Anforderung nicht im Dev Tool erfassen können.

Lösung: Bevor Sie das Post-Formular senden , müssen Sie Ihr Netzwerk abschneiden. Dadurch kann die Anfrage nicht erfolgreich gesendet werden , sodass die Registerkarte nicht geschlossen wird. Anschließend können Sie die Anforderungsnachricht im Chrome Devtool erfassen (ggf. die neue Registerkarte aktualisieren).