如何在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

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

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

Answer 1

我在以下平台上进行了测试：Chrome 79.0.3945.130（官方内部版本）（64位），Windows10。我确认此问题仍然存在于最新版本的Chrome（截至2020年12月22日）上。

确切地说，我在Chrome 79.0.3945.130（以及Chromium Edge 79.0.309.68）中发现的问题如下：

1. 对于多部分/表单数据POST请求，如果我们未指定要上传的任何文件并点击表单提交按钮，则会在网络工具的标题标签下看到“表单数据”部分。 “表单数据”部分列出了所有常规表单字段，例如，下图显示了表单字段，文件字段未显示任何内容因为我没有上传任何文件。

1. 对于多部分/表单数据POST请求，如果我们实际上传文件，则无论文件大小（例如0B）如何，整个“表单数据”部分都会消失，包括常规表单字段！请参见下图，其中我折叠了标题下的所有部分以说明要点。

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

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

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

Answer 2

只需查看chrome开发工具中“网络”标签中的“标题”标签，即可向我显示输入的数据（Chrome版本73）：

请记住，为了使请求显示在“网络”标签中，您必须在请求发生之前打开chrome devtools。

Answer 3

请参阅以下问题的答案：Should a "multipart/form-data" POST request actually contain a string with the data of an uploaded image?

他们建议使用Fiddler。 Chrome开发者工具出于性能原因不显示数据。