在Chrome中请求监控

208

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

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

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

目前，要解决此问题，我正在Chrome旁边运行Fiddler来查看我的请求，但是如果可以在浏览器中执行此操作，则我更愿意这样做。

ajax google-chrome httprequest

— 韦斯
source

2

我有同样的问题-在这里尝试了所有解决方案。在开发工具的XHR窗口的“响应”部分中什么也没有显示。它仅显示“此请求没有可用的响应数据”。如果我使用萤火虫运行相同的代码，它将显示正常。在齿轮开发工具设置中，我尝试勾选“ Log XMLHttpRequest”，但这没有帮助（响应类型为application / json）。我必须在firebug中进行所有调试。Firebug还可以很好地格式化JSON，但如果您能够通过chrome开发工具显示响应（例如，不使用Ajax），则chrome dev工具不会。

— John Little

359

我知道这是一个旧线程，但我想我会发出声音。

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

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

— 菲尔
source

2

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

— Wes P 2010年

就在昨天，我在说，如果chrome工具可以做到这一点，那就太好了，谢谢。

— 赫尔曼罗德里格斯

3

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

— David Williams

2

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

— MoMo 2014年

1

如果页面在同一窗口上重定向，则可以使用“网络”选项卡选项顶部的“保留日志”复选框（如果没有，则可以通过设置将该链接更改为在同一窗口中打开target='_self'）。然后，例如，您可以看到重定向后提交的表单的响应。确保响应也随着新页面加载而堆积，注意过滤器。

— JeremyS

57

关于此问题的最新答案是：它们在开发人员工具的“网络”按钮下列出，不再像以前那样在“资源”下列出。

— 伍特
source

5

确实就是现在的情况，升级后我带我搜索堆栈溢出来查找它。

— Kzqai 2011年

42

更新资料

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

chrome://net-export/

更多信息

旧的Chrome版本

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

chrome://net-internals/#events

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

— 卡尔·阿德勒
source

你可以出口吗？

— Pacerier's

14

不知道从哪个chrome版本开始可用，但是我找到了一个设置'Console-Log XMLHttpRequests'（单击Mac上chrome中开发人员工具右下角的图标）

— 谢尔马克斯
source

3

这是监视XHR请求的最简单，最好的方法。

— CourtDemone

6

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

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

我更喜欢这种方法，因为它通常使我可以在控制台中查看所需的所有内容，而不必转到“网络”选项卡。

— 肖恩·多蒂
source

4

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

— 乔什·伯克
source

1

是的，我要使用Fiddler。只是在浏览器中寻找一种实现方法，因为它更加方便。

— Wes P

3

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

我有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

— masoud2011
source

1

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

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

— wcb1
source

0

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

https://developer.chrome.com/devtools

— 位字节狗
source