25

I'm trying to visualize form data in Chrome Debugger. Data are sent through a from which loads a file and sends some text. Something like this one:

<form action="url" enctype="multipart/form-data" method="post">
     <input type="file" name="file"> <br>
     <input type="text" name="some_text">
</form>

If I explore the headers of the POST request with dev tools, I do not see form data section but I just find:

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryXGBFWL5ab6g5XoFN

that, according to this post is a kind of separator used to segregate data. However, I do not see anything else about submitted data.

How can I see actual data about the filed some_text in Chrome Debugger.

floatingpurr
  • 5,024
  • 5
  • 30
  • 79
  • Possible duplicate of [Should a "multipart/form-data" POST request actually contain a string with the data of an uploaded image?](https://stackoverflow.com/questions/34174658/should-a-multipart-form-data-post-request-actually-contain-a-string-with-the-d) – Étienne Oct 24 '19 at 15:52
  • Are you sure it is the same problem? I wouldn't like to mark this question as solved if it is a different issue. Can you explain more about this? – floatingpurr Oct 24 '19 at 16:58
  • I am pretty confident it is the same problem. Did you follow the link in the answer with 2 upvotes? Google Chrome's engineers acknowledge that this is by design: https://groups.google.com/forum/#!topic/google-chrome-developer-tools/FaInquBDhU0 "8/9/15 Andrey Kosyakov Please file this on crbug.com -- this is due to limitations of current design, as we send post data instantly to the front-end and don't want huge file uploads to thrash the front-end." – Étienne Oct 24 '19 at 22:31
  • Already read this 4-year-old response but I’m not sure that it is still valid respect to the current Chrome version. Besides, If I remeber well, also other small values are not displayed in the request tab. If you had other details to help us figure this out, please extend your answer below. – floatingpurr Oct 24 '19 at 22:47
  • I am sure the problem still exists with current chrome version 77 and 78, since I am having the problem right now, which is the reason why I found your question. Also yesterday I confirmed that Fiddler is showing the body of the post request correctly. There is no realistic way I will find an updated statement of a Chrome engineer stating that this is still current design. I can confirm that showing the content of an entire 800 KB file in Fiddler's GUI makes it lag like hell (at least on my PC), so it is logical that this is still the reason why Chrome does not display it. – Étienne Oct 25 '19 at 08:13
  • What about the rest of the form? – floatingpurr Oct 25 '19 at 08:21
  • The rest of the form is hidden by chrome, for the reason already mentioned. You can report it as a bug to Chrome if you want. – Étienne Oct 25 '19 at 08:32

3 Answers3

19

I tested on my platform: Chrome 79.0.3945.130 (Official Build) (64-bit), Windows 10. I confirm that this problem remains on the up to date version of Chrome (as of 1/22/2020).

To be precise, the problem I found in Chrome 79.0.3945.130 (and Chromium Edge 79.0.309.68 as well) is as follows:

  1. For a multipart/form-data POST request, if we don't specify any file to upload and hit the form submit button, we do see the "Form Data" section under Network tool's headers tab. The "Form Data" section lists all regular form fields, e.g., a form field <input type="text" name="title" value="hello Chrome"/> is shown in the following pic, and the file field shows nothing because I didn't upload any file.

enter image description here

  1. For a multipart/form-data POST request, if we actually upload a file, regardless of its size (such as 0B), the entire "Form Data" section disappears, including regular form fields! See the following pic in which I collapsed all sections under Headers to demonstrate the point.

enter image description here

I agree it makes good sense to hide the file content for performance reasons as described in this question and this discussion, but it makes no sense to hide all regular form fields as well. I believe this is a Chrome bug.

In FireFox, we see all Form Data and uploaded file content under F12 dev tools > Network > Params. In the following example, I uploaded file.txt with the content: hello Firefox from file.txt.

enter image description here

So Firefox offers a temporary solution before Chrome addresses this issue.

Peng
  • 694
  • 7
  • 14
1

The problem still exists with chrome versions 77 and 78. It is working with tools like Fiddler.

See the answers to this question: Should a "multipart/form-data" POST request actually contain a string with the data of an uploaded image?

They suggest to use Fiddler. Chrome developer tools do not show the data, because the developers chose not to for performance reason and acknowledge this is a limitation of current design.

See also this Chrome bug report.

Étienne
  • 4,131
  • 2
  • 27
  • 49
-3

Just looking at the Headers tab in the Network tab in chrome dev tools shows me the entered data (Chrome Version 73):

Picture of the request with headers in chrome dev tools

Keep in mind that in order for requests to show up in the Network tab you have to open the chrome devtools before the request happens.

Schokokuchen Bäcker
  • 370
  • 1
  • 10
  • 17
    I do not see the form data section in my case – floatingpurr Apr 22 '19 at 14:39
  • You see the "Form Data" section only when you don't submit a file at all, if you are using multipart/form-data enctype. See my answer for more details. – Peng Jan 23 '20 at 13:45