Menu
# New Payload tab in the Network panelUse the new Payload tab in the Network panel when you inspect a network request with payload. Previously, the payload information is available under the Headers tab.
If you want to debug it, you should press F12 on Chrome to open the developer mode. You can see that the JS code of the current page is under the Source menu, you can set a breakpoint directly at the beginning of the script. Then you can click on the UI button or menu to start debugging(both js and backend activity ).
Voila!
You can filter for HTTP POST requests with the Chrome DevTools. Just do the following:
method:POST
Screenshot
Tested with Chrome Version 53.
You can use Canary version of Chrome to see request payload of POST requests.
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:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With