前言

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

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

什么是断点操作（Breakpoint action）

dio的IDE中都会有提供。

以下一段话来自知乎

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

Breakpoint Action

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

JavaScript说：我需要断点操作

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

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

JavaScript如何设置断点操作

功能强大而方便。（相信你不会反对吧）。 然而让大家失望的是，chrome根本就没有设置断点操作的功能啊，自然其他浏览器也没有。相信你此时的心情是这样的：

没T你说个XX。

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

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

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

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

函数，都是可以的。这就方便我们的操作。

JavaScript说道 : 我最机智。

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

断点操作

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

结语

修改代码，临时性的加入我们想执行的代码片段。

删除这些console.log代码，增加了工作量。通过这种方式，或许可以减少原本产品代码中的consle.log。

页面，通过这种方式，强制改变某些值，使得bug复现，而不依赖于后台的值。比如：

修改变量

参考

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