How can I debug a HTTP POST in Chrome?

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?

Solution 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!

Solution 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.

Solution 3:

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

Solution 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: