How can I debug a HTTP POST in Chrome?

Question

I would like to view HTTP POST data that was sent in Chrome.

The data is in memory now, and I have the ability to resubmit the form.

I know that if I resubmit the server will throw an error. Is there anyway I can view the data that is in Chrome's memory?

Palmar

There's a nice video-giff example on how to ge to the network tab here: wpza.net/using-google-chrome-to-capture-post-data-in-wordpress – Worthy

You can't view POST data if you have submitted a file (no matter how small) https://mcmap.net/q/110808/-how-to-see-form-data-with-enctype-quot-multipart-form-data-quot-in-chrome-debugger – Medical

Answer 1

1. Go to Chrome Developer Tools (Chrome Menu -> More Tools -> Developer Tools)
2. Choose "Network" tab
3. Refresh the page you're on
4. You'll get list of http queries that happened, while the network console was on. Select one of them in the left
5. Choose "Headers" tab

Voila!

Bibelot

google must have updated it or i am a moron - "You'll get list of http queries that happened" where? is my laptop screen too small? I am trying to find it... update: looks like my display is too small, i need to have devloper tools take over the screen to see it! – Medicaid

This is GET, not POST – Mainmast

It captures both GET and POST requests, @Mainmast – Romilda

Note: To actually see a post request that reloads your page, you need to check "Preserve Log". – Canonry

I am missing the request body here? :-( – Syringa

In Chrome 71, the body (ie. POST-ed data) shows up at the bottom of the Headers tab under the "Request Payload" heading. – Unquiet

So this doesn't show the post data, it only shows the request headers. – Borrell

No header section is showing up after selecting network ? – Bicolor

I cant find my Authorization token Here in headers, it shows Provisional headers are shown with User-Agent only – Duckling

@BryceGuinta Man, you're my hero. I was looking for this the whole day. Thanks ;D – Balcony

Doesn't this completely fail the requirement of not resubmitting the form? "I know that if I resubmit the server will throw an error. Is there anyway I can view the data that is in Chrome's memory?" – Bootlace

This does not apply to multipart POST requests if a file was submitted: https://mcmap.net/q/110808/-how-to-see-form-data-with-enctype-quot-multipart-form-data-quot-in-chrome-debugger – Levenson

Answer 2

You can filter for HTTP POST requests with the Chrome DevTools. Just do the following:

1. Open Chrome DevTools (Cmd+Opt+I on Mac, Ctrl+Shift+I or F12 on Windows) and click on the "Network" tab
2. Click on the "Filter" icon
3. Enter your filter method: method:POST
4. Select the request you want to debug
5. View the details of the request you want to debug

Screenshot

Tested with Chrome Version 53.

Morgan

Worked on Chrome 70. Filtering using method:POST is very useful – Houselights

I am trying to do the same. But it is still showing Get method.. Not converting to POST method In the Name: It 's showing nothing. In response I am getting only {"stat":"fail","desc":"Service Unavailable"} – Corybantic

This does not apply to multipart POST requests if a file was submitted: https://mcmap.net/q/110808/-how-to-see-form-data-with-enctype-quot-multipart-form-data-quot-in-chrome-debugger – Levenson

Answer 3

You can use Canary version of Chrome to see request payload of POST requests.

Ruthie

Are there any links for more details on this or when it changed? EDIT: Answered my own question. If you're using the Fetch API, Chrome wasn't capturing these requests to show in the tab. Apparently Canary is or will be soon. – Approve

Now it's available in standard builds of chrome itself! – Litchi

Answer 4

Another option that may be useful is a dedicated HTTP debugging tool. There's a few available, I'd suggest HTTP Toolkit: an open-source project I've been working on (yeah, I might be biased) to solve this same problem for myself.

The main difference is usability & power. The Chrome dev tools are good for simple things, and I'd recommend starting there, but if you're struggling to understand the information there, and you need either more explanation or more power then proper focused tools can be useful!

For this case, it'll show you the full POST body you're looking for, with a friendly editor and highlighting (all powered by VS Code) so you can dig around. It'll give you the request & response headers of course, but with extra info like docs from MDN (the Mozilla Developer Network) for every standard header and status code you can see.

A picture is worth a thousand StackOverflow answers:

Acescent

Looks very promising, but there are some issues on my machine, posted them on GitHub. – Operon

open-source? It's a paid application. No possibility to generate cURL request like in Chrome Dev Tools, you need to pay for this – Discus

It is 100% open-source. All source for everything is in the repos at github.com/httptoolkit under a mix of AGPLv3 & Apache 2 licenses. Some advanced settings & features (like export-request-as-code) are paid to fund development, but they're open-source too - you're welcome to fork, disable that, and use absolutely everything entirely for free if you prefer. More background here: httptoolkit.com/blog/free-as-in-beer – Acescent

Answer 5

On Chrome 96 DevTools Network Tab;

After clicking the request, there is a "Payload" tab that shows the Form Data:

You can view the data as url encoded / decoded:

You can view the data as source / parsed:

Even if the method is GET you can see the Payload as Query String Parameters:

Numbing

It's great that they moved the payload to a new tab. However, if you're inspecting the payload of different requests, every time you move (click or arrow key) to a new request, the default tab is Headers. Thus you have to click on Payload again and again. A bit cumbersome for this use case. – Jurisprudence

Answer 6

It has a tricky situation: If you submit a post form, then Chrome will open a new tab to send the request. It's right until now, but if it triggers an event to download file(s), this tab will close immediately so that you cannot capture this request in the Dev Tool.

Solution: Before submitting the post form, you need to cut off your network, which makes the request cannot send successfully so that the tab will not be closed. And then you can capture the request message in the Chrome Devtool(Refreshing the new tab if necessary)

Liberec

The network disconnect idea worked great in my situation, thank you. – Volsung

Answer 7

The Network tab is all you need...

Caldarium

Answer 8

The other people made very nice answers, but I would like to complete their work with an extra development tool. It is called Live HTTP Headers and you can install it into your Firefox, and in Chrome we have the same plug in like this.

Working with it is queit easy.

1. Using your Firefox, navigate to the website which you want to get your post request to it.

2. In your Firefox menu Tools->Live Http Headers

3. A new window pop ups for you, and all the http method details would be saved in this window for you. You don't need to do anything in this step.

4. In the website, do an activity(log in, submit a form, etc.)

5. Look at your plug in window. It is all recorded.

Just remember you need to check the Capture.

Senarmontite