Simplest way to extract request body from POST request in chrome dev tools without any plugin

Question

What is the simplest way to extract the JSON from request body in Chrome dev tools with out installing any plugin. I can see the request & response in network tab but how can I extract the JSON from request body.

What I am expecting: In chrome, under dev toolbar when you inspect the request, you see form-data. Under this, there is a view source button. This has the url encoded form data. If we can decode it into JSON and print the stringified result on the console.

Answer 1

You can click on the "Network" tab, this will show you all of your requests and their responses. Click on one, and click on the "Headers" tab. Scroll down until you see "Form Data", you can then copy and paste the info from there.

If this is an ajax call you may be able to use the "Sources" tab to find the part of the client script where the AJAX request is made, and then you can put a break point. Once you hit the break point, you can use the "Console" tab to 'sniff' the xhr request that is about to be made to get the info you want using console.log(myXhrRequest)

Answer 2

1. You can simply go to Network - Headers - view source
2. Then copy your JSON and paste to jsonformater, for example formatter online or your IDE formatter

More detailed answer by @feklee: https://stackoverflow.com/a/9163566/5282202

---

UPDATE: starting Chrome 96 "Payload" moved to separated tab https://developer.chrome.com/blog/new-in-devtools-96/#payload