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

广大码农喜闻乐见的事情,隔壁家火狐已经实现了的功能,而且也有人给Chromium提了Issue-407024。自然Chrome最终也提供了这个功能–BlackboxBlackbox允许屏蔽指定的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功能介绍的更多相关文章

  1. [MSDN] 使用 SharePoint 2013 中的 JavaScript 库代码完成基本操作

    MSDN:http://msdn.microsoft.com/zh-cn/library/jj163201.aspx 了解如何编写代码以在 SharePoint 2013 中使用 JavaScript ...

  2. Chrome DevTools 代码覆盖率功能详解

    共 1812 字,读完需 3 分钟.工欲善其事必先利其器,前端周刊本周起每周会加餐 1 篇工具技巧,里面辅以动图,让大家看完就能学会,并上手使用.本文会介绍 Chrome Canary 新增的代码覆盖 ...

  3. Chrome DevTools 调研笔记

    1  说明 此篇文章针对Chrome DevTools常用功能进行调研分析.描述了每个功能点能实现的功能.应用场景和详细操作. 2  Elements 2.1  功能 检查和实时更新页面的HTML与C ...

  4. Chrome DevTools的使用

    一.Chrome DevTools 简介 Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具,可用来对网站进行迭代.调试和分析 手册:Chrome 开发者工具中文手 ...

  5. 第一百二十九节,JavaScript,理解JavaScript库

    JavaScript,理解JavaScript库 学习要点: 1.项目介绍 2.理解JavaScript库 3.创建基础库 从本章,我们来用之前的基础知识来写一个项目,用以巩固之前所学.那么,每个项目 ...

  6. .net使用cefsharp开源库开发chrome

    .net使用cefsharp开源库开发chrome 离上篇写介绍pc端的混合开发和为什么以cefsharp入手研究混合开发已经有好几天,一直忙,抽不出时间继续写怎么搭建cefsharp开发环境.其实没 ...

  7. 在 Chrome DevTools 中调试 JavaScript 入门

    第 1 步:重现错误 找到一系列可一致重现错误的操作始终是调试的第一步. 点击 Open Demo. 演示页面随即在新标签中打开. OPEN DEMO 在 Number 1 文本框中输入 5. 在 N ...

  8. 20个Chrome DevTools调试技巧

    译者按: Chrome DevTools很强大,甚至可以替代IDE了! 原文: Art of debugging with Chrome DevTools 译者: Fundebug 为了保证可读性,本 ...

  9. Chrome DevTools 的 Sources 调试

    在 Chrome 中调试 JS 代码,那你不得不与 Chrome DevTools 的 Sources 面板打交道,所以文章主要通过介绍 Sources 面板上的各部分功能来介绍如何调试网页中的 JS ...

随机推荐

  1. [实变函数]5.4 一般可测函数的 Lebesgue 积分

    1定义 (1)$f$ 在 $E$ 上积分确定 $\lra$ $\dps{\int_Ef^+(x)\rd x<+\infty}$ 或 $\dps{\int_Ef^-(x)\rd x<+\in ...

  2. 已知ip地址和其子网掩码如何求网络号子网号主机号

    已知ip地址为10.130.89.95,其子网掩码为255.255.255.224,求其网络号.子网号和主机号. 要看子网掩码变长在第几节,255.255.255.224是在第四节借了位 把224转换 ...

  3. dual

    1. dual 确实是一张表.是一张只有一个字段,一行记录的表. 2.习惯上,我们称之为'伪表'.因为他不存储主题数据.3. 他的存在,是为了操作上的方便.因为select 都是要有特定对象的.如:s ...

  4. 20145305 《Java程序设计》第3周学习总结

    教材学习内容总结 1."一类一文件" 2.参考名称与对象数据成员同名时,可以在数据成员前使用this区别 3.不能用==直接比较浮点数运算结果 4.=是用在指定参考名称参考某个对象 ...

  5. JAVA中集合输出的四种方式

    在JAVA中Collection输出有四种方式,分别如下: 一) Iterator输出. 该方式适用于Collection的所有子类. public class Hello { public stat ...

  6. javascript delete方法

    学习delete可以参考下面两个博客,写的都很好,本文大部分参考与以下两个博客 http://www.cnblogs.com/windows7/archive/2010/03/28/1698387.h ...

  7. 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 ...

  8. Android SDK Manager 设置代理

    直接启用 Android SDK Manager 的命令如下: 在SDK 的 tools 目录下执行: ./android sdk 就会进入 Android SDK Manager   设置代理 在 ...

  9. BPMN

    1.私有业务流程: 特定行业规则制度比如惠普生产线流程-针对业务人员 2.公有业务流程: 技术实现-针对流程开发人员 http://www.blogjava.net/RongHao/archive/2 ...

  10. blocksit

      <!DOCTYPE html>   <html>   <head>   <title>Sc.Chinaz.Com</title>   & ...