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实现根据出生年月计算年龄
Jan 10 Javascript
手机号码,密码正则验证
Sep 04 Javascript
jquery实现的伪分页效果代码
Oct 29 Javascript
javascript实现tab切换的两个实例
Nov 05 Javascript
实例代码详解jquery.slides.js
Nov 16 Javascript
js中利用tagname和id获取元素的方法
Jan 03 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
Aug 10 Javascript
react实现一个优雅的图片占位模块组件详解
Oct 30 Javascript
微信小程序自定义底部弹出框
Nov 16 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
Dec 05 Javascript
小程序文字跑马灯效果
Dec 28 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
Feb 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
桌面中心(一)创建数据库
2006/10/09 PHP
vBulletin HACK----关于排版的两个HACK
2006/10/09 PHP
Apache, PHP在Windows 9x/NT下的安装与配置 (一)
2006/10/09 PHP
php中session退出登陆问题
2014/02/27 PHP
php链表用法实例分析
2015/07/09 PHP
PHP5.2中PDO的简单使用方法
2016/03/25 PHP
PHP设计模式之抽象工厂模式实例分析
2019/03/25 PHP
javascript深入理解js闭包
2010/07/03 Javascript
JQuery EasyUI 对话框的使用方法
2010/10/24 Javascript
JavaScript中setMonth()方法的使用详解
2015/06/11 Javascript
jQuery实现平滑滚动的标签分栏切换效果
2015/08/28 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
2016/01/05 Javascript
使用bat打开多个cmd窗口执行gulp、node
2017/02/17 Javascript
iscroll动态加载数据完美解决方法
2017/07/18 Javascript
vue+vux实现移动端文件上传样式
2017/07/28 Javascript
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
React中上传图片到七牛的示例代码
2017/10/10 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
2018/05/01 Javascript
Vue 项目分环境打包的方法示例
2018/08/03 Javascript
详解Vue组件之作用域插槽
2018/11/22 Javascript
JS实现判断移动端PC端功能
2020/02/21 Javascript
Python 基础之字符串string详解及实例
2017/04/01 Python
对Python 网络设备巡检脚本的实例讲解
2018/04/22 Python
tensorflow 重置/清除计算图的实现
2020/01/19 Python
Django Channel实时推送与聊天的示例代码
2020/04/30 Python
python如何解析复杂sql,实现数据库和表的提取的实例剖析
2020/05/15 Python
python 用opencv实现图像修复和图像金字塔
2020/11/27 Python
css3实现图片遮罩效果鼠标hover以后出现文字
2013/11/05 HTML / CSS
德国化妆品和天然化妆品网上商店:kosmetikfuchs.de
2017/06/09 全球购物
Larsson & Jennings官网:现代瑞士钟表匠
2018/03/20 全球购物
DBA的职责都有哪些
2012/05/16 面试题
知识竞赛主持词
2014/03/26 职场文书
个人查摆问题整改措施
2014/10/04 职场文书
让人瞬间清醒的句子,句句经典,字字如金
2019/07/08 职场文书
Python中22个万用公式的小结
2021/07/21 Python
【海涛教你打dota】体验一超神发条:咱是抢盾专业户
2022/04/01 DOTA