How can I debug a HTTP POST in Chrome?

Question

I would like to view the 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?

Answer 1

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

Answer 2

1.F12

2.Click "Network" Tab. EnsureCapture is start before Login

3.Start Login

4. After Login. Stop Capture. Scroll Up. Click The First Link.

5.Scroll Down and you will see the POST Data

Answer 3

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

Answer 4

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.

Answer 5

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.