您的当前位置:首页正文

JavaScript指定断点操作实例教程

2020-11-27 来源:爱站旅游


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


    条件断点

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


    断点条件

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

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

    if(express)

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

    JavaScript说道 : 我最机智。


    不要脸的JavaScript

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


    断点操作

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


    打印结果

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


    断点操作 中断执行

    结语

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

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

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

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


    修改变量

    参考

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

    Top