Analyzing a post request with Chrome DevTools (59)

Chrome is one of the most popular browsers to use currently — especially for devs. You would think it wouldn’t be that hard to find post request data from the network tab but you would be wrong. At least if you are as inexperienced with the network specific tools as I am. I just spent the better part of an hour searching for how to find a data structure containing a post request data payload I was looking for. I knew I needed to find the body of the request object but no matter how I tried I couldn’t see any body fields — only header fields. Then I realized I wasn’t even seeing any post requests at all, only get requests.

I want to help you avoid wasting the time I did. It is not intuitive, but you need to select the ‘preserve log’ option in the network tab and then filter your search of the ‘all’ submenu with ‘method:POST’ before submitting your request. I am not sure why, since filtering should only filter out data that exists already, but the post entries only seem to appear based on filtering. I painstakingly looked through every single request object in the list manually but only found post requests when filtering for post.

Apparently the Firefox dev tool is easier in this regard fyi, but I wanted to stick with Chrome and knew there had to be a way. I hope this helps anyone else running into the issue of not being able to find post request body data.

Like what you read? Give Melissa Schwartz a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.