JavaScript指定断点操做

什么是断点操做（Breakpoint action）

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

如下一段话来自知乎

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

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

JavaScript说：我须要断点操做

试想一个这样的场景，我但愿程序在运行的时候，能够观察某一行上某个变量或者表达式的值。你必定会说，这不是很简单嘛：

1. 在指定的位置放置debugger语句，或这个在此处打一个断点，而后使用console或者变量监听来观察变量的值。
2. 动态插入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说道 : 我最机智。

所以在条件断点的条件输入框中，咱们能够输入咱们想执行的断点操做便可以，好比console.log。如图所示

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

因为console.log返回值是undefined的（最终转换为false），因此代码并不会被中止在此处，而是会直接往下执行，这至关于前面讲述断点操做概念的继续执行。若是须要中止在这儿，能够设置以下的表达式便可：

结语

条件断点的设计并非为此而设计的。因此这是一种hack，不是标准方式，不是原本的设计方式。可是，不是不少Web开发都会使用hack的吗。 用起来方便就行。
经过这种方式，至关于能够不用修改代码，临时性的加入咱们想执行的代码片断。
不少同窗都喜欢在工程中直接使用console.log，这样在实际发布的时候，最终有须要删除这些console.log代码，增长了工做量。经过这种方式，或许能够减小本来产品代码中的consle.log。
使用这种方式，还能够动态改变一些变量的值。咱们知道有时候，某些bug只在某些特定的值才能复现，这些值多是服务端推送过来的，此时调试的值，就可能依赖于后端传递的值。其实能够在前端的页面，经过这种方式，强制改变某些值，使得bug复现，而不依赖于后台的值。好比：

参考

https://zhuanlan.zhihu.com/p/...
https://www.visualmicro.com/p...

欢迎关注公众号：