Chrome开发者工具的实用技巧(译)


最近我比平时多花了点时间在chrome开发者工具上。过程中我发现了一些我以前没有遇到过的好的特性(至少我没有主动去研究的;像:blackboxing和asynchronous stacktraces)。因此,我想总结下我认为非常不错的特性给大家。


  • 这个小的放大镜图标指向这个元素的CSS的属性最终是在哪个CSS文件里定义。举例子来说,选择“检查”在页面上的任意DOM元素,并切换到“Computed”的子标签。找到你关心的CSS属性并点击放大镜图标,就会直接进入对应的css文件(当你的项目是个很大的web应用时,这个功能是非常有用的).



  • 如果想看到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”即可:



  • 你可以跳转到特定的文件,通过文件名,使用“ctrl-p”(像atom中一样)



  • 你可以跳转到一个方法,通过方法名(只在当前打开的文件中),使用“ctrl-shift-p”:



  • 你可以全文搜索通过”ctrl-shift-f”:



  • 你可以使用多个选择提示来编辑,选中一些字符并按下“ctrl-d”,会根据你按下的次数来选中相应的字符(就像atom那样).对于像重命名变量非常有用。



  • 网站的代码可以本地存储,并在开发模式编辑然后可以直接存储到本地磁盘。实现这个功能,切换到源码标签,右键点击“Add Folder to Workspace”,并最后选择你工程项目的存储位置即可。此外,右键点击本地映射文件,选择“Map to Network Resource...”就会加载相应的“网络”文件了



其它小贴士:

  • $0 在console的时候,代表你在页面选中的元素。

  • 你可以执行XPath表达式通过$x(“//p”) 这种方式(当你使用selenium 测试用例和CSS选择器时并不总有效的时候会非常有用)




我再推荐两个chrome扩展插件:


总之,我很喜爱开发者者工具,唯一令我不爽的是我不能自定义键盘快捷键:


修改时间 2016-09-23

真诚赞赏,手留余香
赞赏
随机推荐
实现一个属于我们自己的简易MVVM库
入门 Webpack,看这篇就够了
自动构建JavaScript
thinkphp 3.1.3 添加项目分组
PHP的UTF-8中文转拼音处理类(性能已优化至极致)
Sublime常用插件
2018.1.26 Night King
正则表达式变量拼接(未完)
加密解密基础
php判断是手机还是电脑访问