View Submitted Form Data in Chrome

If you’ve ever needed to inspect the form data after submitting a form on a web page, you should take a look a closer look at the Network panel in Chrome developer tools. You can click on an HTTP request, which for a POST request is typically the first one in the list after a form submission. Once you select the HTTP request, Chrome will reveal more information on that request. Under the ‘Headers’ tab, you will be able to find the ‘Form Data’ section that contains the data that was submitted as part of that request.

chrome-view-post-data

Note, that if the form has an enctype attribute of multipart/form-data, then the data will be under the ‘Request Payload’ section in a slightly different format.

Comments

    1. Your ability to view submitted form data in the browser isn’t a security issue. After all, you provided the data and the browser is local. Password fields have to be submitted in plain text. However, if you are submitting a form on a site that doesn’t use HTTPS… then I’d worry about security.

  1. I have a form that is being submitted that I need to view the header and response information for.. as soon as a submit the page the data in dev tools come up but then immediately redirects. Is there way to stop it with that response information still viewable? hope that makes sense.
    Thanks!

    1. All you need to do is check the Preserve log checkbox in the network panel. This will ensure that all data is saved to the log even after a redirect. This is also helpful when trying to debug redirect issues.

      1. Thanks Micah I actually googled it and found that out but thank you for your reply!

        Can you suggest a comprehensive course on chrome dev tools, do you happen to have one out?

      2. At the moment, I do not. I was supposed to give an hour long presentation on the topic this weekend, which would have been recorded, but have been laid up in bed sick instead. Maybe I can put together a nice little video series when I’m feeling better.

  2. I know this is a way old post, but I keep seeing an issue in a coworker’s Chrome. When he submits a normal form (no multi-part data), with preserve logs checked, the form data section does not appear at all. Everything is submitted, but it is not displayed in the entry. I have found a few people asking the same question but have yet to find an answer. Any thoughts? Thanks. And great post BTW.

    1. I actually found a post saying that Chrome version 61 and 62 had a similar issue to what I reported. And that updating should address it. My coworker’s computer is 61, and his automatic updates are failing. Once he addresses that I will check again and try to follow up with my results.

  3. I have a question. I fill in and submit a form on 27-1-19 at 21:45. Preserve Log was not checked. I close the tab/window, shut the computer down. Then I boot the computer on 28-1-19. How do I access the form data submitted on 27-1-19?
    Secondly, I have the cache file generated at 21:45 on 27-1-19. How do I convert the cache to a readable format such that I am able to access submitted form data?

    1. Unfortunately, if you don’t check the “Preserve log” option in the network panel you won’t be able to see that information. As far as I’m aware, there is no way to recreate it after the fact. However, if you took the appropriate steps and want to save the information from Chrome Dev tools for later viewing, you can right click and select the “Save as HAR with content” option. This will generate an HTTP Archive file (HAR) that you can then view later using a tool like HTTP Archive Viewer (https://chrome.google.com/webstore/detail/http-archive-viewer/ebbdbdmhegaoooipfnjikefdpeoaidml?hl=en).

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.