如何在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_textChrome调试器中归档文件的实际数据。

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），整个“表单数据”部分都会消失，包括常规表单字段！请参阅下图，其中我折叠了标题下的所有部分以证明这一点。

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

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

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

Answer 2

chrome 版本 77 和 78 仍然存在该问题。它正在使用 Fiddler 等工具。

请参阅此问题的答案：“multipart/form-data”POST 请求实际上应该包含包含上传图像数据的字符串吗？

他们建议使用 Fiddler。Chrome 开发者工具不显示数据，因为开发者出于性能原因选择不显示数据，并承认这是当前设计的限制。

另请参阅此 Chrome 错误报告。

Answer 3

只需查看 Chrome 开发工具中“网络”选项卡中的“标头”选项卡即可显示输入的数据（Chrome 版本 73）：

请记住，为了使请求显示在“网络”选项卡中，您必须在请求发生之前打开 chrome 开发工具。