How to see form data with enctype = "multipart/form-data" in Chrome debugger

Question

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.

Answer 1

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.

2. 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.

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.

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

Answer 2

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.