最近我比平时多花了点时间在chrome开发者工具上。过程中我发现了一些我以前没有遇到过的好的特性(至少我没有主动去研究的;像:blackboxing和asynchronous stacktraces)。因此,我想总结下我认为非常不错的特性给大家。
如果想看到XHRs的请求信息,可以选中“Log XMLHttpRequests”的复选框,在“Setting”频道下的Console部分。在知道这个功能之前,我得设置浏览器代理像Burp来完成这样的功能。当然,使用代理你可以有机会来修改XHRs在真正到达服务器之前,这是一个很好的方式来完成安全测试。类似的更简便的方式是使用“Sources::XHR Breakpoints”并启用“Any XHR”断点。
现在,假设你工作的web应用正在有规律的发送XHR请求(举例子,保持当前页面为最新)并想知道这个定时器在哪里(即什么地方调用setTimeout()或setInterval())。弄明白这些,你需要切换到“Sources”标签,并选中“Async”复选框。这会让你所有的堆栈继续执行当遇到setTimeout()的时候,甚至是多层次的嵌套。对于像requestAnimationFrame()和addEventListener()等同样使用。你可以找到设置的地方如下:
想快速的找到你点击某个特定的按钮或者链接的运行代码,只需要在你点击按钮前启用“Event listener breakpoint” Mouse::Click(另外一个在大型web应用时会用到的杀手级的特性):
当你使用“Event listener breakpoint :: Mouse :: Click”的时候,你很可能会进入到第三方的代码库像jQuery,这时候你就需要花费一些调试的时间来到达真正的事件处理函数。最好的方法是标记“Blackbox Script”避免进入到第三方的脚本。调试时就再不会进入第三方的脚本库了,代码会一直运行到没有标记blackboxed的文件为止。你可以blackbox脚本通过右击调用栈里的第三方库的文件,并从上下文菜单中选择“Blackbox Script”即可:
JSONView 可以转换并高亮JSON结构给你(甚至允许你展开/收起)。它同样可以让URLs有JSON的内容变的可点击。举例子:试着访问 http://omahaproxy.appspot.com/all.json 看看安装前后的对比。
https://api.github.com/ (让URLs变的简单).
JS Error Notifier (non-“spyware” version) 当console打印错误时以弹出框方式提示。不幸的是,这个版本会提交私有数据到第三方服务。但是无论怎样,这个插件帮助我很多。
英文原文