调试时屏蔽js库代码– Chrome DevTools Blackbox功能介绍_前端开发者

前端开发者丨JavaScript

调试时屏蔽JavaScript库代码– Chrome DevTools Blackbox功能介绍代码难免会有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展开显示完整。