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


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

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

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

屏蔽文件后会怎么样

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

怎样屏蔽文件

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

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

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

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

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

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

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

另外,需要暂时不屏蔽某个规则时,可以将Behavior改为Disable。或者也可以直接删除(光标移到某行规则后会有个X)。
Blackbox content scripts是指屏蔽Chrome插件注入页面的脚本(新版Chrome增加的功能,笔者用的39)。

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

Sources面板目录里,或者编辑器里,右键点击“Blackbox Script”,可以将屏蔽该文件,同时也会增加到Setting面板中的匹配规则里。
调试时屏蔽JavaScript库代码 –Chrome DevTools Blackbox功能介绍     调试时屏蔽JavaScript库代码 –Chrome DevTools Blackbox功能介绍

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

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

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

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

 

总结

Blackbox功能配置简单、使用方便,可以在调试时减少无关代码对开发者的干扰,是个很有用的小技巧。
使用时如果有任何建议/意见可以给ChromiumIssue

参考


发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>