How can I debug a HTTP POST in Chrome?

221
votes

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?

7
google-chromedebuggingpost
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 – WPZA
You can't view POST data if you have submitted a file (no matter how small) stackoverflow.com/a/59871612/929999 – mjaggard

7 Answers

253
votes
  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!

enter image description here

159
votes

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

Chrome DevTools

Tested with Chrome Version 53.

14
votes

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

Request payload

8
votes

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:

A screenshot of HTTP Toolkit showing a POST request and its body

1
votes

The Network tab is all you need...

enter image description here

0
votes

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.

enter image description here

0
votes

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)