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.

Cataplasia

It might be possible to semi-automate via devtools-for-devtools, but do you have a demo URL for me to test first? – Micrometer

@wOxxOm I do not have a demo URL :( – Cataplasia

Well, then try yourself: open devtools-for-devtools and run in the console something like UI.panels.network._networkLogView._dataGrid._rootNode._flatNodes.map(n => new URLSearchParams(n._request._parsedURL.queryParams).get('_')) – Micrometer

Damn, StackOverflow mangles code by inserting invisible characters, here's the original one - don't forget to adapt the parameter name _ to the correct one. – Micrometer

Answer 1

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://mcmap.net/q/242689/-chrome-source-of-post-data

---

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

Margiemargin

Answer 2

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)

Abysmal

I know I can see the request and response in network tab. Question is how can I extract the json sent in the request body. Copy pasting can be error prone and can be lot of work when the request body has a complex object with lot of properties. I know how to get the data manually but I think there should be a simpler way to get the desired result – Cataplasia

correct me if I am wrong. using source tab will only work when the code is not minified. – Cataplasia

You are wrong, you can view minified client script with the source tab. It will just be a lot harder for you to figure out what the code is doing. There is no functional difference between minified JS and regular javascript. Minified JS is only an obfuscated version that takes up less space by removing long variable names and unnecessary white space. – Abysmal

That is what I meant. and its even tougher when you are debugging someone else's code and in my case, I am using webpack where everything in bundled into one big JS file. – Cataplasia

Do you feel I have incorrectly answered your original question? I agree that it isn't easy, but sometimes things aren't easy. I still feel like copying and pasting the form data from Network tab, is pretty easy, and shouldn't cause you many problems – Abysmal

I appreciate your time & I do not feel you gave a false answer. I just feel your answer is not what I am expecting. The json I am expecting has over 30 properties. some of the properties have nested properties and there are several arrays which may contain 20-30 objects. Some of the values have special characters which needs to be properly encoded. I have tried whatever you have suggested without much luck. – Cataplasia

In what way do you want to "extract" the data? When someone says extract, I assume they mean, get a copy of the raw isolated value. So I am not seeing how being able to copy the exact form data from the request doesn't meet this goal.... If the issue after that is it is just a blob of json data that is not much use to you. That, IMO, is a different problem, One that could be solved a couple different ways. Which I am happy to help with too, but I feel it is out of scope of the original question. – Abysmal

Let us continue this discussion in chat. – Cataplasia

Updated the question with what I am thinking. What I am suggesting is just one way. I am looking at extracting request body as valid JSON. – Cataplasia