调试时屏蔽JavaScript库代码 –Chrome DevTools Blackbox功能介绍

代码不免会有Bug，每次咱们在Chrome调试代码时，老是会进入各类各样的库代码（好比jQuery、Zepto），但实际上不少时候咱们并不但愿这样，要是能把这些库代码“拉黑”多好啊。

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

屏蔽文件后会怎么样

• 库代码（被屏蔽的文件）里抛出异常时不会暂停（当设置为Pause on exceptions时）
• 调试时Stepping into/out/over都会忽略库代码
• 事件断点也会忽略库代码
• 库代码里设置的任何断点也不会起做用
  最终的结果就是只会调试应用代码而忽略第三方代码（配置了Blackbox的代码）。

怎样屏蔽文件

有两个途径能够屏蔽JS文件：

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

在设置面板能够配置屏蔽文件列表。

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

• 输入文件名称
• 用正则表达式匹配
  • 包含特定名称的文件，好比/backbone\.js$
  • 特定类型的文件，好比\.min\.js$
• 输入整个文件夹，好比bower_components

另外，须要暂时不屏蔽某个规则时，能够将Behavior改成Disable。或者也能够直接删除（光标移到某行规则后会有个X）。
Blackbox content scripts是指屏蔽Chrome插件注入页面的脚本（新版Chrome增长的功能，笔者用的39）。

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

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

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

注意：若是项目对JS文件作了MD5重命名的话，建议在Setting面板用正则设置匹配规则。

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