微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

调试时屏蔽 JS 库代码:Chrome DevTools Blackbox 功能介绍

2015-08-26 11:57 前端大全

(点击上方,可快速关注)


作者:AlloyTeam

网址:http://www.alloyteam.com/2015/01/chrome-devtools-blackbox/#prettyPhoto


代码难免会有Bug,每次我们在Chrome调试代码时,总是会进入各种各样的库代码(比如jQuery、Zepto),但实际上很多时候我们并不希望这样,要是能把这些库代码“拉黑”多好啊。


广大码农喜闻乐见的事情,隔壁家火狐已经实现了的功能,而且也有人给Chromium提了Issue-407024。自然Chrome最终也提供了这个功能–Blackbox。Blackbox允许屏蔽指定的JS文件,这样调试的时候就会绕过它们了。




屏蔽文件后会怎么样


  • 库代码(被屏蔽的文件)里抛出异常时不会暂停(当设置为Pause on exceptions时)

  • 调试时Stepping into/out/over都会忽略库代码

  • 事件断点也会忽略库代码

  • 库代码里设置的任何断点也不会起作用

  • 最终的结果就是只会调试应用代码而忽略第三方代码(配置了Blackbox的代码)。


怎样屏蔽文件


有两个途径可以屏蔽JS文件:


1、开发人员工具的Settings面板


在设置面板可以配置屏蔽文件列表。



打开开发人员工具的配置面板,在Sources下点击Manage framework blackboxing,打开新窗口后,有如下集中方式配置:


  • 输入文件名称

  • 用正则表达式匹配

    • 包含特定名称的文件,比如/backbone\.js$

    • 特定类型的文件,比如\.min\.js$

  • 输入整个文件夹,比如bower_components



另外,需要暂时不屏蔽某个规则时,可以将Behavior改为Disable。或者也可以直接删除(光标移到某行规则后会有个X)。

Blackbox content scripts是指屏蔽Chrome插件注入页面的脚本(新版Chrome增加的功能,笔者用的39)。


2、在Sources面板上右键某个文件


在Sources面板目录里,或者编辑器里,右键点击“Blackbox Script”,可以将屏蔽该文件,同时也会增加到Setting面板中的匹配规则里。



屏蔽某个文件后,会在编辑器里看到黄色的提示信息,点开More,有功能说明,直接点击“Unblackbox this script”,也能方便的取消屏蔽(这样会在匹配规则里直接删除,而不是Disable掉)



注意:如果项目对JS文件做了MD5重命名的话,建议在Setting面板用正则设置匹配规则。


调试时,在调用堆栈时可以看到已经屏蔽的文件数量,默认是隐藏具体文件信息的,当然也可以点击Show展开显示完整。






前端大全

微信号:FrontDev

打造东半球最好的 前端技术 微信号

--------------------------------------

商务合作QQ:2302462408

投稿网址:top.jobbole.com


 
前端大全 更多文章 5个典型的JavaScript面试题(上) Limu:JavaScript的那些书 Web开发:我希望得到的编程学习路线图 JavaScript基础工具清单 常用排序算法之JavaScript实现
猜您喜欢 眼动追踪技术,揭秘男女看点差异 《Think Python 2e》第十一章:字典 容器化ICT融合初体验 能让程序员更有干劲的10个技巧 分布式系统里session同步的那些事儿