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?

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
– WPZA, Commented Sep 7, 2019 at 13:23
You can't view POST data if you have submitted a file (no matter how small) stackoverflow.com/a/59871612/929999 — mjaggard
– mjaggard, Commented Jul 28, 2021 at 10:24

Georg Plaz · Accepted Answer · 2019-01-08 03:06:46Z

289

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!

edited Jan 8, 2019 at 3:06

Georg Plaz

6,0185 gold badges43 silver badges66 bronze badges

answered Mar 24, 2013 at 20:55

mrówa

5,8013 gold badges29 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

QkiZ Over a year ago

This is GET, not POST

almulo Over a year ago

It captures both GET and POST requests, @QkiZ

Bryce Guinta Over a year ago

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

Timo Ernst Over a year ago

I am missing the request body here? :-(

MSC Over a year ago

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

|

Georg Plaz · Accepted Answer · 2019-01-08 03:08:59Z

201

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

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

Screenshot

Tested with Chrome Version 53.

edited Jan 8, 2019 at 3:08

Georg Plaz

6,0185 gold badges43 silver badges66 bronze badges

answered Sep 23, 2016 at 13:05

Benny Neugebauer

55.4k31 gold badges250 silver badges209 bronze badges

4 Comments

user1071847 Over a year ago

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

Shakti Pravesh Over a year ago

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"}

Torxed Over a year ago

This does not apply to multipart POST requests if a file was submitted: stackoverflow.com/a/59871612/929999

weberc2 Over a year ago

Where is the request body?

mihijs · Accepted Answer · 2015-08-25 08:51:26Z

17

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

answered Aug 25, 2015 at 8:51

mihijs

6267 silver badges16 bronze badges

2 Comments

virtualandy Over a year ago

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.

Nachiketha Over a year ago

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

Adem Tepe · Accepted Answer · 2021-11-21 11:33:56Z

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:

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.

Tim Perry · Accepted Answer · 2023-09-06 08:37:59Z

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:

Looks very promising, but there are some issues on my machine, posted them on GitHub.
open-source? It's a paid application. No possibility to generate cURL request like in Chrome Dev Tools, you need to pay for this
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

周左左 · Accepted Answer · 2020-06-02 15:58:24Z

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)

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

dev mamba · Accepted Answer · 2021-03-27 01:47:22Z

2

The Network tab is all you need...

answered Mar 27, 2021 at 1:47

dev mamba

8049 silver badges10 bronze badges

Comments

Sal-laS · Accepted Answer · 2017-11-05 15:12:01Z

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.

Using your Firefox, navigate to the website which you want to get your post request to it.
In your Firefox menu Tools->Live Http Headers
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.
In the website, do an activity(log in, submit a form, etc.)
Look at your plug in window. It is all recorded.

Just remember you need to check the Capture.

Collectives™ on Stack Overflow

How can I debug a HTTP POST in Chrome?

8 Answers 8

12 Comments

4 Comments

2 Comments

1 Comment

3 Comments

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

12 Comments

4 Comments

2 Comments

1 Comment

3 Comments

1 Comment

Comments

Comments

Linked

Related