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

Question

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

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

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

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

根据这篇文章，这是一种用于分隔数据的分隔符。但是，我没有看到有关提交数据的任何其他内容。

如何some_text在 Chrome 调试器中查看有关该文件的实际数据。

标签： google-chromehttp-postgoogle-chrome-devtools

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. 对于 multipart/form-data POST 请求，如果我们没有指定要上传的任何文件并点击表单提交按钮，我们会看到网络工具标题选项卡下的“表单数据”部分。“表单数据”部分列出了所有常规表单字段，例如，一个表单字段 <input type="text" name="title" value="hello Chrome"/> 如下图所示，而文件字段不显示因为我没有上传任何文件。

2. 对于一个 multipart/form-data POST 请求，如果我们真的上传一个文件，不管它的大小（例如 0B），整个“Form Data”部分都会消失，包括常规的表单字段！请参阅下面的图片，其中我折叠了标题下的所有部分以证明这一点。

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

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

所以 Firefox 在 Chrome 解决这个问题之前提供了一个临时解决方案。