JavaScript指定断点操作实例教程


Posted in Javascript onSeptember 18, 2018

前言

虽然网上已经有多的数不清的调试教程了,但仍然没有发现哪篇文章写的通俗易懂,索性自己尝试写写自己的一些使用习惯或者说是心得,希望对那些还不是很懂得使用断点调试的孩子有一些帮助

本文将给大家详细介绍关于JavaScript指定断点操作的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧

什么是断点操作(Breakpoint action)

做前端开发的小伙伴,或许对这个断点操作不是很熟悉。不过你要是问其他语言(比如C,C++ ,C #等)的开发者,他们应该都挺熟悉断点操作,这种断点操作在诸如XCode或者Visual Studio的IDE中都会有提供。

以下一段话来自知乎

断点操作 (Action) 的意义是设置追踪点 (Tracepoint)。追踪点相当于是一种临时的有 Trace 功能的断点,它会把消息 打印到 Output 窗口。

JavaScript指定断点操作实例教程

Breakpoint Action

勾选后面的继续执行 (Continue Execution),代表 Tracepoint 命中时,Debugger 不会停下来,否则将会在此处停下来。两种情况下,消息都会打印出来。

JavaScript说:我需要断点操作

试想一个这样的场景,我希望程序在运行的时候,可以观察某一行上某个变量或者表达式的值。你一定会说,这不是很简单嘛:

  • 在指定的位置放置debugger语句,或这个在此处打一个断点,然后使用console或者变量监听来观察变量的值。
  • 动态插入console.log代码。

看起来,第二种方式是更好的一种方式。动态插入代码当然可以使用chrome的live edit功能。当时我们希望有一个不直接修改代码的方式。此时你或许会想,那就设置一个断点操作吧。

JavaScript如何设置断点操作

前端的童鞋们一定知道,JavaScript的调试大部分都是在浏览器里面操作的,而这个浏览器,大部分时候是Chrome。因为Chrome的调试功能强大而方便。(相信你不会反对吧)。
然而让大家失望的是,chrome根本就没有设置断点操作的功能啊,自然其他浏览器也没有。相信你此时的心情是这样的:

没T你说个XX。

看官们不要着急,且听我们慢慢道来。在Chrome断点调试的时候,可以使用条件断点,所谓条件断点,指定一个条件,在符合这个条件的时候。执行会停止在断点处,否则执行直接往下执行。如下图,在Line Number的地方点击右键,选中 Add conditionnal breakpoint

JavaScript指定断点操作实例教程
条件断点

然后,输入条件,比如params.value == 'value'这样的条件表达式,如下图:

JavaScript指定断点操作实例教程

断点条件

有关条件断点说明,如果你仍然不是很熟悉的话,可以自己多参考相关资料。

但是,这个断点操作有什么关系呢?要知道,JavaScript是一门动态语言。条件判断其实是可以输入任何代码片段的。比如下面的代码:

if(express)

即便是express不是一个bool值或者bool值的表达式或者返回bool的函数,都是可以的。这就方便我们的操作。

JavaScript说道 : 我最机智。

JavaScript指定断点操作实例教程

不要脸的JavaScript

因此在条件断点的条件输入框中,我们可以输入我们想执行的断点操作即可以,比如console.log。如图所示

JavaScript指定断点操作实例教程

断点操作

最终会在控制台打印出来你要查看的值,如图所示:

JavaScript指定断点操作实例教程
打印结果

由于console.log返回值是undefined的(最终转换为false),所以代码并不会被停止在此处,而是会直接往下执行,这相当于前面讲述断点操作概念的继续执行。如果需要停止在这儿,可以设置如下的表达式即可:

JavaScript指定断点操作实例教程

断点操作 中断执行

结语

条件断点的设计并不是为此而设计的。所以这是一种hack,不是标准方式,不是本来的设计方式。但是,不是很多Web开发都会使用hack的吗。 用起来方便就行。

通过这种方式,相当于可以不用修改代码,临时性的加入我们想执行的代码片段。

很多同学都喜欢在工程中直接使用console.log,这样在实际发布的时候,最终有需要删除这些console.log代码,增加了工作量。通过这种方式,或许可以减少原本产品代码中的consle.log。

使用这种方式,还可以动态改变一些变量的值。我们知道有时候,某些bug只在某些特定的值才能复现,这些值可能是服务端推送过来的,此时调试的值,就可能依赖于后端传递的值。其实可以在前端的页面,通过这种方式,强制改变某些值,使得bug复现,而不依赖于后台的值。比如:

JavaScript指定断点操作实例教程

修改变量

参考

  • https://3water.com/article/147623.htm
  • https://www.visualmicro.com/page/User-Guide.aspx?doc=Working-With-Breakpoints-When-Hit.html

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
通过js脚本复制网页上的一个表格的不错实现方法
Dec 29 Javascript
IE8 中使用加速器(Activities)
May 14 Javascript
jQuery获取父元素及父节点的方法小结
Apr 14 Javascript
AngularJs Dependency Injection(DI,依赖注入)
Sep 02 Javascript
JS中type="button"和type="submit"的区别
Jul 04 Javascript
vue组件学习教程
Sep 09 Javascript
使用Electron构建React+Webpack桌面应用的方法
Dec 15 Javascript
VeeValidate在vue项目里表单校验应用案例
May 09 Javascript
Vue商品控件与购物车联动效果的实例代码
Jul 21 Javascript
Vue实现base64编码图片间的切换功能
Dec 04 Javascript
Vue性能优化的方法
Jul 30 Javascript
解决Antd Table表头加Icon和气泡提示的坑
Nov 17 Javascript
对VUE中的对象添加属性
Sep 18 #Javascript
微信小程序适配iphoneX的实现方法
Sep 18 #Javascript
小程序兼容安卓和IOS数据处理问题及坑
Sep 18 #Javascript
解决vue attr取不到属性值的问题
Sep 18 #Javascript
vue动画打包后失效问题的解决方法
Sep 18 #Javascript
vue自定义全局共用函数详解
Sep 18 #Javascript
vue-自定义组件传值的实例讲解
Sep 18 #Javascript
You might like
简单谈谈PHP vs Node.js
2015/07/17 PHP
ThinkPHP控制器详解
2015/07/27 PHP
[原创]CI(CodeIgniter)简单统计访问人数实现方法
2016/01/19 PHP
PHP面向对象程序设计之多态性的应用示例
2018/12/19 PHP
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
2010/09/19 Javascript
javascript简易缓动插件(源码打包)
2012/02/16 Javascript
javascript读取xml实现javascript分页
2013/12/13 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
2015/01/21 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
2015/05/16 Javascript
使用Angular.js实现简单的购物车功能
2016/11/21 Javascript
jquery结合html实现中英文页面切换
2016/11/29 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
2016/12/01 Javascript
关于vue-router路径计算问题
2017/05/10 Javascript
JS图片预加载插件详解
2017/06/21 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
2018/07/05 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
2018/08/22 Javascript
Vue实现移动端页面切换效果【推荐】
2018/11/13 Javascript
Vue项目history模式下微信分享爬坑总结
2019/03/29 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
2019/09/02 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
2020/06/07 Javascript
[05:49]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS 选手采访
2021/03/11 DOTA
python中threading超线程用法实例分析
2015/05/16 Python
python+django+sql学生信息管理后台开发
2018/01/11 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
python实现二分查找算法
2020/09/18 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
Python用SSH连接到网络设备
2021/02/18 Python
纽约通行卡:The New York Pass(免费游览纽约90多个景点)
2017/07/29 全球购物
NARS化妆品官方商店:美国彩妆品牌
2017/08/26 全球购物
Luxplus丹麦:香水和个人护理折扣
2018/04/23 全球购物
UNIONBAY官网:美国青少年服装品牌
2019/03/26 全球购物
JNI的定义
2012/11/25 面试题
STP协议的主要用途是什么?为什么要用STP
2012/12/20 面试题
领导班子整改方案和个人整改措施
2014/10/25 职场文书
大学生学习新党章思想汇报
2014/10/25 职场文书
ECharts transform数据转换和dataZoom在项目中使用
2022/12/24 Javascript