什么是断点动作（Breakpointaction）做前端开发的小伙伴可能对这个断点操作不是很熟悉。但如果你问其他语言（如C、C++、C#等）的开发者，他们应该很熟悉断点操作，XCode或VisualStudio等IDE都提供了断点操作。下面这段话来自于知道断点操作（Action）的意思是设置跟踪点（Tracepoint）。一个trace点相当于一个带有Trace功能的临时断点，它将消息打印到Output窗口。勾选ContinueExecution，意思是当Tracepoint命中时，Debugger不会停止，否则会停在这里。在这两种情况下，都会打印消息。JavaScript说：我需要断点操作。想象这样一个场景，我想在程序运行时观察某行某个变量或表达式的值。你肯定会说，这不是很简单吗：在指定位置放置一条调试器语句，或者在这里设置一个断点，然后用控制台或者变量监控来观察变量的值。动态插入console.log代码。看来第二种方式更好。你当然可以使用chrome的liveedit功能来动态插入代码。当时我们希望有一种方法可以在不直接修改代码的情况下做到这一点。此时你可能会想，那就设置断点运行吧。如何在JavaScript中设置断点和操作前端的童鞋们一定知道，JavaScript调试大多是在浏览器中操作的，而这个浏览器大部分时间是Chrome。因为Chrome的调试功能强大方便。（相信你不会反对）。然而令大家失望的是，chrome根本就没有设置断点操作的功能，其他浏览器自然也没有。相信你此时的心情是这样的：不T，你说XX。评委们别着急，慢慢听我们说吧。在调试Chrome断点的时候，可以使用条件断点，即所谓的条件断点，来指定一个条件，当这个条件满足的时候。执行会在断点处停止，否则直接继续执行。如下图，右击LineNumber，选择Addconditionalbreakpoint，然后输入params等条件。如果是这样，您可以自己参考相关资料。但是这个断点动作有什么关系呢？要知道，JavaScript是一种动态语言。条件判断其实可以输入任何代码片段。例如，以下代码：即使express不是bool值或bool值表达式或返回bool的函数，if(express)也是可能的。这样方便我们的操作。JavaScript说：我是最聪明的。因此，在条件断点的条件输入框中，我们可以输入我们要执行的断点操作，比如console.log。如图所示，你要查看的值最终会打印在控制台上，如图：由于console.log的返回值是undefined（最终转化为false），所以这里代码不会停止,并且会直接执行，相当于延续了上面介绍的断点操作的概念。如果需要在此处停止，可以设置如下表达式：结语条件断点的设计不是为此而设计的。所以这是一个hack，不是标准方式，不是它的设计方式。但是，很多Web开发不是都使用hack吗？用起来方便就好。这样，相当于在不修改代码的情况下，临时添加了我们要执行的代码片段。很多同学喜欢在项目中直接使用console.log，所以在实际发布的时候，最后需要删除这些console.log代码，增加了工作量。这样可以减少原来产品代码中的console.log。这样，还可以动态改变一些变量的值。我们知道，有时，某些错误只能在某些特定值中重现。这些值可能是从服务器推送的。这个时候debug的值可能取决于后端传过来的值。其实可以通过这种方式强行改变前端页面的某些值，这样就可以在不依赖后台值的情况下重现bug。例如：参考https://zhuanlan.zhihu.com/p/...https://www.visualmicro.com/p...欢迎关注公众号：
