Chrome 中的请求监控
在 Firefox 中,我使用 Firebug,它允许我查看 ajax 调用发出的每个 http 请求。我已经将我的开发切换到 Chrome,并且到目前为止我很喜欢它。然而,我唯一的抱怨是开发人员工具似乎不允许您查看每个 ajax 请求。我曾经遇到过这种情况,资源面板显示对同一资源的多个请求,但只发生了一次,再也没有发生过。
有没有一种方法可以可靠地从 Chrome 中查看页面通过 javascript 发出的每个 http 请求?
[编辑:11/30/09 11:55]
目前,为了解决这个问题,我在 Chrome 旁边运行 Fiddler 来查看我的请求,但如果有办法从浏览器中执行此操作,我更喜欢。
In Firefox, I use Firebug which allows me to view every http request my ajax calls are making. I've switched over my development to Chrome and am liking it so far. My only complaint, however, is that the developer tools don't seem to allow you to view each ajax request. I've had it happen once where the Resources panel showed multiple requests to the same resource, but it's only done it once and never again.
Is there a way to reliably see every http request that a page is making through javascript from within Chrome?
[Edit:11/30/09 11:55]
Currently, to get around this, I'm running Fiddler next to Chrome to view my requests, but if there's a way to do it from within the browser, I'd prefer that.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(9)
我知道这是一个旧线程,但我想我应该插话。Chrome
目前有一个内置的解决方案。
CTRL+SHIFT+I
(或导航到Current Page Control > Developer > ; 开发者工具
在较新版本的 Chrome 中,单击扳手图标 > 开发者工具。)以启用开发者工具。网络
按钮。如果尚未启用,请为会话启用它或始终启用它。“XHR”
子按钮。AJAX 调用
。“资源”
下的左列中。I know this is an old thread but I thought I would chime in.
Chrome currently has a solution built in.
CTRL+SHIFT+I
(or navigate toCurrent Page Control > Developer > Developer Tools
. In the newer versions of Chrome, click the Wrench icon > Tools > Developer Tools.) to enable the Developer Tools.Network
button. If it isn't already, enable it for the session or always."XHR"
sub-button.AJAX call
."Resources"
.对此的最新答案是:它们列在开发人员工具中的“网络”按钮下,不再像以前那样列在“资源”下。
The most up-to-date answer to this is: they are listed under the 'Network' button in the developer tools, no longer under 'Resources' like it used to be.
更新
Chrome 更改了检查请求的方式,并建议现在使用 Catapult Netlog Viewer,其中包含从 chrome://net-export/ 导出的日志
更多信息
旧 Chrome 版本
您还可以在 Chrome 中使用此链接获取比检查员更详细的信息。
这显示了浏览器打开时所有请求的日志
Update
Chrome changed how to inspect requests and suggests now to use the Catapult Netlog Viewer with the logs exported from chrome://net-export/
More Info
Old Chrome Versions
You also may use this link in Chrome for more detailed information than the inspector did it.
This shows the log of all requests of the browser while open
不知道哪个 chrome 版本可用,但我找到了一个设置“控制台 - 记录 XMLHttpRequests”(单击 mac 上 chrome 中开发人员工具右下角的图标)
don't know as of which chrome version this is available, but i found a setting 'Console - Log XMLHttpRequests' (clicking on the icon in the bottom right corner of developer tools in chrome on mac)
打开 DevTools 并按 F1 访问设置。查找控制台部分并选中“Log XMLHttpRequests”复选框。
现在您的所有 ajax 和其他类似请求都将记录在控制台中。
我更喜欢这种方法,因为它通常允许我在控制台中查看我要查找的所有内容,而无需转到网络选项卡。
Open up your DevTools and press F1 to access the settings. Look for the console section and check the checkbox for "Log XMLHttpRequests".
Now all of your ajax and other similar requests will be logged in the console.
I prefer this method because it usually allows me to see everything that I'm looking for in the console without having to go to the network tab.
您可以使用Fiddler,这是一个很好的免费工具。
You could use Fiddler which is a good free tool.
感谢所有试图在这篇文章中提供帮助的人
我有 ubuntu 13.10,我的 chrome 版本是 34.0
对于我的情况,
现在可以使用,您应该在您请求的前面看到一个新面板
Thanks all person who try to help in this post
I have ubuntu 13.10 and my chrome version is 34.0
For my situation this works
now you should see a new Panel in front of you request
Phil的第5步中,“资源”在新版本的Chrome中不再可用。您需要单击底部窗格中列出的 Ajax 页面旁边的页面图标,其中包含名称、方法、状态……列,
然后它将显示更多面板,您可以在其中找到错误消息。
In the step 5 of Phil, "Resources" is no longer available in the new version of the Chrome. You need to click the page icon just beside the Ajax page listed in the bottom pane with the columns of Name, Method, Status, ...
Then it will show you more panels where you will find the error messages.
您还可以在浏览器中右键单击该页面并选择“检查元素”以打开开发人员工具。
https://developer.chrome.com/devtools
You can also just right click on the page in the browser and select "Inspect Element" to bring up the developer tools.
https://developer.chrome.com/devtools