如何在 Chrome 中调试 HTTP POST？

Posted 2023-02-19

【中文标题】如何在 Chrome 中调试 HTTP POST？

【英文标题】：How can I debug a HTTP POST in Chrome?

【发布时间】：2013-03-14 06:29:29

【问题描述】：

我想查看在 Chrome 中发送的 HTTP POST 数据。

数据现在在内存中，我可以重新提交表单。

我知道如果我重新提交服务器会抛出一个错误。无论如何我可以查看 Chrome 内存中的数据吗？

【问题讨论】：

这里有一个很好的视频-giff 示例，说明如何访问网络选项卡：wpza.net/using-google-chrome-to-capture-post-data-in-wordpress

如果你提交了一个文件（无论多么小），你就无法查看POST数据***.com/a/59871612/929999

【参考方案1】：

转到 Chrome 开发者工具（Chrome 菜单 -> 更多工具 -> 开发者工具） 选择“网络”标签 刷新您所在的页面 您将获得在网络控制台打开时发生的 http 查询的列表。在左侧选择其中一个 选择“标题”标签

瞧！

【讨论】：

这是 GET，而不是 POST

它同时捕获 GET 和 POST 请求，@QkiZ

注意：要真正看到重新加载页面的发布请求，您需要检查“保留日志”。

我在这里缺少请求正文？ :-(

在 Chrome 71 中，正文（即 POST-ed 数据）显示在“请求有效负载”标题下的“标题”选项卡底部。

【参考方案2】：

您可以使用Canary version of Chrome 来查看 POST 请求的请求负载。

【讨论】：

是否有任何链接可以了解有关此内容或更改时间的更多详细信息？编辑：回答了我自己的问题。如果您使用的是 Fetch API，Chrome wasn't capturing these requests to show in the tab。显然 Canary 即将或即将推出。

现在它可以在 chrome 本身的标准版本中使用！

【参考方案3】：

您可以使用 Chrome DevTools 过滤 HTTP POST 请求。只需执行以下操作：

在 Mac 上打开 Chrome DevTools（Cmd+Opt+I，Ctrl+Shift+I 或 F12 开启 Windows），然后点击“网络”标签 点击“过滤器”图标 输入您的过滤方法：method:POST 选择要调试的请求 查看您要调试的请求的详细信息

截图

使用 Chrome 版本 53 测试。

【讨论】：

在 Chrome 70 上工作。使用method:POST 过滤非常有用

我也在尝试这样做。但它仍然显示 Get 方法.. 没有转换为 POST 方法 在名称中：它什么也没显示。作为回应，我只得到 "stat":"fail","desc":"Service Unavailable"

如果提交了文件，这不适用于多部分 POST 请求：***.com/a/59871612/929999

【参考方案4】：

其他人的回答非常好，但我想用一个额外的开发工具来完成他们的工作。它被称为 Live HTTP Headers，您可以将其安装到您的 Firefox 中，并且在 Chrome 中，我们拥有与 @987654322 相同的插件@。

使用它非常容易。

使用您的 Firefox，导航到您想要向其发送帖子请求的网站。

在您的 Firefox 菜单中Tools->Live Http Headers

会为您弹出一个新窗口，所有 http 方法的详细信息都会为您保存在此窗口中。在此步骤中您无需执行任何操作。

在网站中，做一个活动（登录、提交表单等）

查看您的插件窗口。都记录下来了。

请记住您需要检查 Capture。

【参考方案5】：

它有一个棘手的情况：如果您提交一个帖子表单，那么 Chrome 将打开一个新标签页来发送请求。直到现在，但如果它触发了下载文件的事件，此选项卡将立即关闭，因此您无法在开发工具中捕获此请求。

解决方案： 提交post表单前，需要断网，导致请求无法发送成功，标签页也不会关闭。然后您可以在 Chrome Devtool 中捕获请求消息（如果需要刷新新标签）

【参考方案6】：

另一个可能有用的选项是专用的 HTTP 调试工具。有一些可用的，我建议HTTP Toolkit：我一直在从事的一个开源项目（是的，我可能有偏见）来为自己解决同样的问题。

主要区别在于可用性和功能。 Chrome 开发工具适用于简单的事情，我建议从那里开始，但如果您难以理解那里的信息，并且需要更多解释或更多功能，那么适当的专注工具可能会很有用！

对于这种情况，它将向您显示您正在寻找的完整 POST 正文，并带有友好的编辑器和突出显示（全部由 VS Code 提供支持），以便您可以四处挖掘。它当然会为您提供请求和响应标头，但是对于您可以看到的每个标准标头和状态代码，它都会提供额外的信息，例如来自 MDN（Mozilla Developer Network）的文档。

一张图片值一千个 *** 答案：

【讨论】：

看起来很有希望，但是我的机器上有些问题，在 GitHub 上发布了。

【参考方案7】：

“网络”选项卡就是您所需要的...

【参考方案8】：

在 Chrome 96 上 DevTools 网络选项卡；

点击请求后，有一个显示表单数据的“Payload”选项卡：

您可以将数据视为 url 编码/解码：

您可以将数据视为源/已解析：

即使方法是 GET，您也可以将 Payload 视为查询字符串参数：

【讨论】：

很高兴他们将有效负载移动到了一个新选项卡。但是，如果您正在检查不同请求的负载，则每次移动（单击或箭头键）到新请求时，默认选项卡都是 Headers。因此，您必须一次又一次地点击Payload。这个用例有点麻烦。