在 Chrome 中请求监控

Posted 2023-02-15

【中文标题】在 Chrome 中请求监控

【英文标题】：Request Monitoring in Chrome

【发布时间】：2010-12-21 17:05:36

【问题描述】：

在 Firefox 中，我使用 Firebug，它允许我查看我的 ajax 调用发出的每个 http 请求。我已经将我的开发切换到 Chrome 并且到目前为止我很喜欢它。然而，我唯一的抱怨是开发人员工具似乎不允许您查看每个 ajax 请求。我曾经在资源面板显示对同一资源的多个请求时发生过这种情况，但它只完成了一次，并且再也没有发生过。

有没有办法可靠地查看页面在 Chrome 中通过 javascript 发出的每个 http 请求？

[编辑：11/30/09 11:55]

目前，为了解决这个问题，我在 Chrome 旁边运行 Fiddler 来查看我的请求，但如果有办法在浏览器中执行此操作，我更愿意这样做。

【问题讨论】：

我有同样的问题 - 在这里尝试了所有的解决方案。开发工具中 XHR 窗口的响应部分中没有任何内容。它只显示“此请求没有可用的响应数据”。如果我使用 firebug 运行相同的代码，它会显示得很好。在 cog 开发工具设置中，我尝试勾选“Log XMLHttpRequest”，但这没有帮助（响应类型是 application/json）。我必须在 firebug 中进行所有调试。 Firebug 还可以很好地格式化 JSON，如果你可以让它显示响应（例如不使用 ajax），chrome 开发工具不会。

【参考方案1】：

更新

Chrome 更改了检查请求的方式并建议现在将 Catapult Netlog Viewer 与从 chrome://net-export/ 导出的日志一起使用

chrome://net-export/

More Info

旧 Chrome 版本

您也可以在 Chrome 中使用此链接获取比检查员所做的更详细的信息。

chrome://net-internals/#events

这显示了浏览器打开时所有请求的日志

【讨论】：

你能导出那个吗？

【参考方案2】：

打开您的 DevTools 并按 F1 访问设置。查找控制台部分并选中“Log XMLHttpRequests”复选框。

现在您的所有 ajax 和其他类似请求都将记录在控制台中。

我更喜欢这种方法，因为它通常允许我在控制台中查看我正在寻找的所有内容，而无需转到网络选项卡。

【参考方案3】：

我知道这是一个旧线程，但我想我会插话。

Chrome 目前内置了一个解决方案。

使用CTRL+SHIFT+I（或导航至Current Page Control > Developer > Developer Tools。在较新版本的Chrome 中，单击扳手图标> 工具> 开发者工具。）启用开发者工具。 在开发人员工具中单击Network 按钮。如果还没有，请为会话启用它或始终启用它。 点击"XHR"子按钮。 发起AJAX call。 您将看到项目开始显示在"Resources" 下的左列中。 点击资源，有 2 个标签显示标题和返回内容。

【讨论】：

谢谢菲尔！我已经把它放在一边，主要依赖 Fiddler。但是那个 XHR 按钮正是我想要的：D

就在昨天，我还在谈论如果 chrome 工具可以做到这一点，那就太完美了，谢谢。

大家好，试图找到“XHR 子按钮”，我想我可能找不到它，有人能告诉我那在哪里吗？这就是我的检查员的样子imgur.com/9e6yDcB

这似乎只有在 AJAX 调用得到响应时才会发生，但它不会向您显示可能不期望响应的传出请求。有人知道如何启用它吗？

如果页面在同一窗口重定向，您可以使用网络选项卡选项顶部的“保留日志”复选框（如果不是，您可以通过设置 @ 更改该链接以在同一窗口中打开987654328@）。然后，例如，您可以看到在重定向您后提交的表单的响应。当响应堆积在新页面加载时，请务必注意过滤器。

【参考方案4】：

在 Phil 的第 5 步中，“资源”在新版 Chrome 中不再可用。您需要单击底部窗格中列出的 Ajax 页面旁边的页面图标，其中包含名称、方法、状态等列...

然后它将显示更多面板，您可以在其中找到错误消息。

【参考方案5】：

您也可以在浏览器中右键单击页面并选择“检查元素”以调出开发人员工具。

https://developer.chrome.com/devtools

【参考方案6】：

感谢所有试图在这篇文章中提供帮助的人

我有 ubuntu 13.10，我的 chrome 版本是 34.0

对于我的情况，这是可行的

1.open developer tools in chrome(or use right click on your page and then select inspect element)
2.go to "Network" tab
3.find your ajax request in "Name Path" column 
4.click on the specific ajax link

现在您应该在您的请求面前看到一个新面板

in this panel select "Response" tab

【参考方案7】：

不知道哪个 chrome 版本可用，但我找到了一个设置“控制台 - 记录 XMLHttpRequests”（在 mac 上的 chrome 中单击开发人员工具右下角的图标）

【讨论】：

这是监控 XHR 请求的最简单和最好的方法。

【参考方案8】：

对此的最新回答是：它们列在开发者工具的“网络”按钮下，不再像以前那样在“资源”下。

【讨论】：

确实是现在的位置，升级后带我搜索堆栈溢出找到它。

【参考方案9】：

您可以使用Fiddler，这是一个很好的免费工具。

【讨论】：

是的，我有 Fiddler，我正在使用它来执行此操作。只是在浏览器中寻找一种方法，因为它更方便一些。