logo标签列表

Chrome中的请求监控

ajaxgoogle-chromehttprequest
224
在Firefox中，我使用Firebug工具来查看每个ajax调用所产生的http请求。现在我已经转到Chrome来进行开发并且非常喜欢它。但是，唯一让我不太满意的是Chrome的开发者工具似乎无法查看每个ajax请求。有一次我在资源面板中看到了多个请求同一个资源的情况，但只出现过一次。请问，有没有一种可靠的方法可以从Chrome内部查看通过JavaScript生成的页面所有http请求呢？
[编辑：11/30/09 11:55]
目前，为了解决这个问题，我在Chrome旁边运行Fiddler来查看我的请求，但如果有一种在浏览器内部解决的方法，那我更喜欢使用它。
2
我也遇到了同样的问题 - 已经尝试过这里所有的解决方案。在开发工具中的XHR窗口的响应部分中没有任何内容显示。只显示"This request has no response data available"。如果我使用Firebug运行相同的代码，它可以正常显示。在cog dev tools设置中，我尝试了勾选"Log XMLHttpRequest"但是这并没有帮助(响应类型是application/json)。我必须在Firebug中进行所有调试。Firebug还可以很好地格式化JSON，而Chrome开发工具则不能，除非您可以通过不使用ajax来显示响应。 - John Little
9个回答
381

我知道这是一个古老的帖子，但我想插一嘴。

目前，Chrome浏览器内置了一个解决方案。

  1. 使用 CTRL+SHIFT+I （或导航到 当前页面控制 > 开发者 > 开发者工具。在较新版本的Chrome浏览器中，点击扳手图标 > 工具 > 开发者工具）启用开发者工具。
  2. 在开发者工具中，点击 Network 按钮。如果还没有启用，可以为会话或始终启用。
  3. 点击 "XHR" 子按钮。
  4. 发起 AJAX调用。
  5. 您将看到左侧列下面的项目开始显示在 "Resources" 下。
  6. 单击资源，有两个选项卡显示头文件和返回内容。
2
谢谢Phil！我已经把这个放在一边，主要依赖Fiddler。但是那个XHR按钮正是我正在寻找的:D - Wes P
3
大家好，我正在尝试寻找“XHR子按钮”，我认为我可能错过了它，请问有人知道它在哪里吗？这是我的检查器的样子http://imgur.com/9e6yDcB - David Williams
2
这似乎只会在 AJAX 调用得到响应时发生，但它不会显示出可能不期望响应的传出请求。有人知道如何启用它吗？ - MoMo
1
如果页面在同一窗口上重定向，您可以在网络选项卡选项的顶部使用“保留日志”复选框（如果不是，则可以通过设置target='_self'将该链接更改为在同一窗口中打开）。然后，例如，您可以查看提交表单后重定向您的响应。请确保还注意过滤器，因为响应会在新页面加载时堆积起来。 - JeremyS
@DavidWilliams XHR的“订阅按钮”在过滤器下面。它是其中一个过滤器。XHR请求已经出现在网络选项卡中，只是混杂在所有其他调用中。 - M. Herold
显示剩余9条评论
59
最新的回答是：它们列在开发者工具中的“网络”按钮下，不再像过去那样列在“资源”下。
5
确实是在那里，升级后我在Stack Overflow上搜索才找到它。 - Kzqai
45

更新

Chrome 更改了检查请求的方式，现在建议使用从 chrome://net-export/ 导出的日志，并使用 Catapult Netlog Viewer 进行查看。

chrome://net-export/

更多信息

旧版Chrome

您也可以在Chrome中使用此链接以获得比检查器提供的更详细的信息。

chrome://net-internals/#events

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

你能导出那个吗？ - Pacerier
15

我不知道从哪个Chrome版本开始可以使用此功能，但我发现有一个设置选项“控制台-记录XMLHttpRequests”（在Mac上的Chrome开发者工具右下角图标上单击）。

3
这是监控XHR请求最简单、最好的方法。 - CourtDemone
6

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

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

我更喜欢这种方法，因为通常可以在控制台中看到我正在寻找的所有内容，而无需转到网络标签页。

4
您可以使用免费工具Fiddler，它是一个很好的选择。
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
1
在Phil的第五步中，Chrome的新版本中已经没有“资源”选项了。您需要点击底部面板中列出的Ajax页面旁边的页面图标，该面板包括名称、方法、状态等列。然后它会显示更多的面板，您可以在其中找到错误信息。
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接