调试时屏蔽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展开显示完整。
调试时屏蔽JavaScript库代码 –Chrome DevTools Blackbox功能介绍的更多相关文章
- [MSDN] 使用 SharePoint 2013 中的 JavaScript 库代码完成基本操作
MSDN:http://msdn.microsoft.com/zh-cn/library/jj163201.aspx 了解如何编写代码以在 SharePoint 2013 中使用 JavaScript ...
- Chrome DevTools 代码覆盖率功能详解
共 1812 字,读完需 3 分钟.工欲善其事必先利其器,前端周刊本周起每周会加餐 1 篇工具技巧,里面辅以动图,让大家看完就能学会,并上手使用.本文会介绍 Chrome Canary 新增的代码覆盖 ...
- Chrome DevTools 调研笔记
1 说明 此篇文章针对Chrome DevTools常用功能进行调研分析.描述了每个功能点能实现的功能.应用场景和详细操作. 2 Elements 2.1 功能 检查和实时更新页面的HTML与C ...
- Chrome DevTools的使用
一.Chrome DevTools 简介 Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具,可用来对网站进行迭代.调试和分析 手册:Chrome 开发者工具中文手 ...
- 第一百二十九节,JavaScript,理解JavaScript库
JavaScript,理解JavaScript库 学习要点: 1.项目介绍 2.理解JavaScript库 3.创建基础库 从本章,我们来用之前的基础知识来写一个项目,用以巩固之前所学.那么,每个项目 ...
- .net使用cefsharp开源库开发chrome
.net使用cefsharp开源库开发chrome 离上篇写介绍pc端的混合开发和为什么以cefsharp入手研究混合开发已经有好几天,一直忙,抽不出时间继续写怎么搭建cefsharp开发环境.其实没 ...
- 在 Chrome DevTools 中调试 JavaScript 入门
第 1 步:重现错误 找到一系列可一致重现错误的操作始终是调试的第一步. 点击 Open Demo. 演示页面随即在新标签中打开. OPEN DEMO 在 Number 1 文本框中输入 5. 在 N ...
- 20个Chrome DevTools调试技巧
译者按: Chrome DevTools很强大,甚至可以替代IDE了! 原文: Art of debugging with Chrome DevTools 译者: Fundebug 为了保证可读性,本 ...
- Chrome DevTools 的 Sources 调试
在 Chrome 中调试 JS 代码,那你不得不与 Chrome DevTools 的 Sources 面板打交道,所以文章主要通过介绍 Sources 面板上的各部分功能来介绍如何调试网页中的 JS ...
随机推荐
- [实变函数]5.4 一般可测函数的 Lebesgue 积分
1定义 (1)$f$ 在 $E$ 上积分确定 $\lra$ $\dps{\int_Ef^+(x)\rd x<+\infty}$ 或 $\dps{\int_Ef^-(x)\rd x<+\in ...
- 已知ip地址和其子网掩码如何求网络号子网号主机号
已知ip地址为10.130.89.95,其子网掩码为255.255.255.224,求其网络号.子网号和主机号. 要看子网掩码变长在第几节,255.255.255.224是在第四节借了位 把224转换 ...
- dual
1. dual 确实是一张表.是一张只有一个字段,一行记录的表. 2.习惯上,我们称之为'伪表'.因为他不存储主题数据.3. 他的存在,是为了操作上的方便.因为select 都是要有特定对象的.如:s ...
- 20145305 《Java程序设计》第3周学习总结
教材学习内容总结 1."一类一文件" 2.参考名称与对象数据成员同名时,可以在数据成员前使用this区别 3.不能用==直接比较浮点数运算结果 4.=是用在指定参考名称参考某个对象 ...
- JAVA中集合输出的四种方式
在JAVA中Collection输出有四种方式,分别如下: 一) Iterator输出. 该方式适用于Collection的所有子类. public class Hello { public stat ...
- javascript delete方法
学习delete可以参考下面两个博客,写的都很好,本文大部分参考与以下两个博客 http://www.cnblogs.com/windows7/archive/2010/03/28/1698387.h ...
- JAVA错误:Cannot refer to a non-final variable * inside an inner class defined in a different method
在使用Java局部内部类或者内部类时,若该类调用了所在方法的局部变量,则该局部变量必须使用final关键字来修饰,否则将会出现编译错误“Cannot refer to a non-final vari ...
- Android SDK Manager 设置代理
直接启用 Android SDK Manager 的命令如下: 在SDK 的 tools 目录下执行: ./android sdk 就会进入 Android SDK Manager 设置代理 在 ...
- BPMN
1.私有业务流程: 特定行业规则制度比如惠普生产线流程-针对业务人员 2.公有业务流程: 技术实现-针对流程开发人员 http://www.blogjava.net/RongHao/archive/2 ...
- blocksit
<!DOCTYPE html> <html> <head> <title>Sc.Chinaz.Com</title> & ...