chrome DevTools之黑箱大法(Blackbox ) 黑箱化源代码

2018/03/21 18:49
阅读数 127

Blackbox 提高JavaScript调试效率


所有人前端开发人员都会遇到的问题,您的应用程序代码中会出现错误。您开始调试,但是逐行执行代码时,调试器有时会跳转到不是您的焦点的源文件(例如第三方JS库)。我相信你在回到自己的应用程序代码之前,经历了很多烦恼。

Blackboxing(黑箱)为您提供了便利,以便调试器可以绕过一个第三方JS库。当您黑箱一个源文件时,调试时代码,调试器将不会跳转到该文件(黑箱中的文件)。

1. 当你黑箱子一个脚本,会发生什么
  • 进入/退出/过渡绕过库代码
  • 事件侦听器断点不会破坏库代码
  • 调试器不会暂停在库代码中设置的任何断点。
    总之当黑箱一个脚本时,能让你更加方便的专注调试当前脚本
2. 如何黑箱脚本
  • 使用settings(设置) – 选中Blackboxing
  • 当对应代码文件的标注行数位置点击Blackbox script

设置面板
打开DevTools设置,点击右上这里写图片描述
这里写图片描述

这将打开一个对话框,您可以在其中输入要添加到黑名单的脚本的文件名。你可以通过几种方法来做到这一点:

  • 输入文件的名称,
  • 使用正则表达式来定位:
  • 包含特定名称的文件/jquery.js$

  • 某些类型的文件像 .min.js$

  • 列表内容 列表内容或者输入包含您想要的黑盒子的脚本的整个文件夹bower_components。

对应文件

查看文件时,您可以在编辑器中右键单击行数的位置。从那里选择Blackbox脚本。这将会将文件添加到“设置”面板中的列表中。
这里写图片描述
当您在“编辑器”面板上的“编辑器”中查看一个黑盒子的脚本时,您将看到一个黄色条,表示它已被黑框。点击更多展开栏可以显示更多关于它意味着什么的信息,以及如何禁用它。
这里写图片描述

3. 黑箱脚本前后对比

不黑箱jquery.js脚本
- 这里写图片描述

当添加Even Listener Breakpoints的一个click
这里写图片描述
点击页面上的button1按钮
这里写图片描述
在sources中定位到的断点并不是button1的注册click事件位置,而是定位到了jquery.js
这里写图片描述

黑箱jquery.js脚本

黑化jquery.js脚本,重复上面步骤,定位到的就是对应button1注册click事件位置
这里写图片描述


原文地址  http://blog.csdn.net/qq_31619295/article/details/74782487

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部