google-chrome - 如何在 Chrome 调试器中查看 enctype = "multipart/form-data"的表单数据

Question

我正在尝试在 Chrome 调试器中可视化表单数据。数据通过 a 发送，从中加载文件并发送一些文本。像这样的东西:

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

如果我使用开发工具探索 POST 请求的 header ，我看不到表单数据部分，但我只是发现:

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

根据this post是一种用于分隔数据的分隔符。但是，我没有看到有关提交数据的任何其他信息。

如何在 Chrome 调试器中查看有关已归档 some_text 的实际数据。

Answer 1

我在我的平台上进行了测试:Chrome 79.0.3945.130(官方版本)(64 位)、Windows 10。我确认最新版本的 Chrome(截至 2020 年 1 月 22 日)仍然存在此问题。

准确地说，我在 Chrome 79.0.3945.130(以及 Chromium Edge 79.0.309.68)中发现的问题如下:

1. 对于多部分/表单数据 POST 请求，如果我们没有指定任何要上传的文件并点击表单提交按钮，我们会在网络工具的 header 选项卡下看到“表单数据”部分。 “表单数据”部分列出了所有常规表单字段，例如，下图显示了表单字段 <input type="text"name="title"value="hello Chrome"/> ，而文件字段没有显示任何内容因为我没有上传任何文件。

对于 multipart/form-data POST 请求，如果我们实际上传一个文件，无论其大小(例如 0B)如何，整个“表单数据”部分都会消失，包括常规表单字段!请参阅下图，其中我折叠了标题下的所有部分以演示这一点。

我同意出于性能原因隐藏文件内容是很有意义的，如question中所述。还有这个discussion ，但隐藏所有常规表单字段也是没有意义的。我相信这是 Chrome 的一个错误。

在FireFox中，我们可以在F12开发工具>网络>参数下看到所有表单数据和上传的文件内容。在以下示例中，我上传了 file.txt，其内容为:hello Firefox from file.txt。

因此，在 Chrome 解决此问题之前，Firefox 提供了一个临时解决方案。