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 相关文章推荐
javascript document.images实例
May 27 Javascript
根据一段代码浅谈Javascript闭包
Dec 14 Javascript
JavaScript框架(iframe)操作总结
Apr 16 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
May 12 Javascript
jquery ajax局部加载方法详解(实现代码)
May 12 Javascript
EasyUI中在表单提交之前进行验证
Jul 19 Javascript
JavaScript实现鼠标点击导航栏变色特效
Feb 08 Javascript
详解vue mint-ui源码解析之loadmore组件
Oct 11 Javascript
js实现通过开始结束控制的计时器
Feb 25 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
Aug 26 Javascript
vue cli3 配置proxy代理无效的解决
Oct 30 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
Jul 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
解析smarty模板中类似for的功能实现
2013/06/18 PHP
PHP易混淆函数的区别及用法汇总
2014/11/22 PHP
根据key删除数组中指定的元素实现方法
2017/03/02 PHP
js调用flash的效果代码
2008/04/26 Javascript
jQuery EasyUI API 中文文档 - Calendar日历使用
2011/10/19 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
2013/10/24 Javascript
js 判断浏览器使用的语言示例代码
2014/03/22 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
2014/07/31 Javascript
node.js中的fs.existsSync方法使用说明
2014/12/17 Javascript
JavaScript中split与join函数的进阶使用技巧
2016/05/03 Javascript
Vue自定义图片懒加载指令v-lazyload详解
2020/12/31 Javascript
JavaScript实现选中文字提示新浪微博分享效果
2017/06/15 Javascript
解决vue 绑定对象内点击事件失效问题
2018/09/05 Javascript
今天,小程序正式支持 SVG
2019/04/20 Javascript
详解vue中使用transition和animation的实例代码
2020/12/12 Vue.js
详解javascript脚本何时会被执行
2021/02/05 Javascript
[01:37]DOTA2超级联赛专访ChuaN 传奇般的电竞之路
2013/06/19 DOTA
pandas pivot_table() 按日期分多列数据的方法
2018/11/16 Python
Python通用函数实现数组计算的方法
2019/06/13 Python
python实现高斯投影正反算方式
2020/01/17 Python
使用pygame编写Flappy bird小游戏
2020/03/14 Python
django 链接多个数据库 并使用原生sql实现
2020/03/28 Python
在ipython notebook中使用argparse方式
2020/04/20 Python
Pytorch之扩充tensor的操作
2021/03/04 Python
HTML5 UTF-8 中文乱码的解决方法
2013/11/18 HTML / CSS
得到Class的三个过程是什么
2012/08/10 面试题
Linux Interview Questions For software testers
2013/05/17 面试题
爱国主义教育活动总结
2014/05/07 职场文书
毕业生实习期转正自我鉴定
2014/09/26 职场文书
自主招生推荐信怎么写
2015/03/26 职场文书
乡镇党建工作总结2015
2015/05/19 职场文书
乡镇团代会开幕词
2016/03/04 职场文书
年终工作总结范文
2019/06/20 职场文书
详解JS WebSocket断开原因和心跳机制
2021/05/07 Javascript
为什么在foreach循环中JAVA集合不能添加或删除元素
2021/06/11 Java/Android
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python