chrome DevTools之黑箱大法(Blackbox )
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事件位置
chrome DevTools之黑箱大法(Blackbox )相关推荐
- chrome DevTools之黑箱大法(Blackbox ) 黑箱化源代码
Blackbox 提高JavaScript调试效率 所有人前端开发人员都会遇到的问题,您的应用程序代码中会出现错误.您开始调试,但是逐行执行代码时,调试器有时会跳转到不是您的焦点的源文件(例如第三方J ...
- 脱离996,Chrome DevTools 面板全攻略!!!(收藏)
李华西,微医云服务团队前端开发工程师,喜欢瞎折腾,典型猫奴 Console 面板 此章节请打开 justwe7.github.io/devtools/console/console.html 一起食用 ...
- 学习Chrome Devtools 调试
前言(共分2部分内容) 常用命令和调试 黑盒脚本:Blackbox Script 控制台内置指令 远程调试WebView 1. Chrome Devtools 的用处 前端开发:开发预览.远程调试.性 ...
- Chrome Devtools 高级调试指南
From ( Chrome Devtools 高级调试指南 ):https://juejin.cn/post/6844903961472974855 chrome devtools 设置黑色主题:ht ...
- 如何使用Chrome DevTools花式打断点
英文原稿: 原文:Pause Your Code With Breakpoints 作者:Kayce Basques Chrome DevTools & Lighthouse技术作家 中文译文 ...
- 前端神器—Google Chrome Devtools细节详解
本人是一位没出实习期的前端小菜鸟一枚,这几个月发现了Google Chrome Devtools的易用性非常高的小功能和小细节 特意分享给大家.欢迎大家收藏+点赞.新人需要鼓励哈哈 内容和图片均为原创 ...
- Chrome DevTools 之 Network,网络加载分析利器
虽然一直在用Chrome DevTools,但大多停留在常用的功能和调试上,比如Elements/Network/Sources/Console等主要功能,而对于性能分析/优化相关的Timeline/ ...
- Chrome DevTools:在 Profile 性能分析中显示原生 javascript 函数
本文翻译自 Chrome DevTools: Show native functions in JS Profile,中文版首发在我的知乎专栏 V8 源码及周边. 在 Chrome DevTools ...
- Chrome DevTools进阶教程
https://developer.chrome.com/devtools Chrome DevTools进阶教程 转载于:https://www.cnblogs.com/daishuguang/p/ ...
最新文章
- 一作解读Gut:人体最初的微生物起源与生殖健康
- Java中的DeskTop类
- 一个「神奇」的Python库,99%的人都爱!
- 转:JNI jstring与c++字符串类型转换函数
- treeset java_Java TreeSet add()方法与示例
- python安装路径查看_查看python安装路径及pip安装的包列表及路径
- string型c语言,C++中string字符串类型介绍
- 读《豆瓣的基础架构》有感
- 「Android」Lenovo K860 root脚本备忘
- 【IT之路】LoadRunner系列-Win7 64bit下搭建Loadrunner11破解版
- vscode 折叠/展开所有区域代码快捷键
- S32K144(12)FTM
- 笔记本显示器驱动更新
- SpringCloud Alibaba实战--第八篇:Seata分布式事务处理
- python注释多行
- 机器学习之recall、precision、accuracy
- 知云文献翻译打不开_英文PDF文献翻译神器-知云文献翻译
- Outlook客户端解析Html类型邮件样式问题
- 关于处理npm ERR! Unexpected token in JSON at position...
- SAS集成Hadoop途径几何?
热门文章
- 数学建模速成! 两小时零基础入门 MATLAB 教程(一)—— Matlab常用操作和基本语法
- 配置SNAT实现共享上网: 搭建内外网案例环境 配置SNAT策略实现共享上网访问
- 南方人,在北京,夏秋冬
- 手机安装linux模拟器教程,Ubuntu下安装Android模拟器
- 仙游一中刘金星老师先进事迹
- 上海财经应用统计考python_2020上财应用统计432考研高分经验贴
- 宝塔一键安装wordpress
- RuntimeError: Found dtype Long but expected Float
- 超声波测距仪编程_基于单片机的超声波测距仪设计
- 畅享10S 鸿蒙,潮流配色+全能实力 华为畅享10S让你做新春最靓的仔