JavaScript指定断点操作

keke 发布于2019-08-23 12:01 / 3263人阅读

摘要：以下一段话来自知乎断点操作的意义是设置追踪点。此时你或许会想，那就设置一个断点操作吧。执行会停止在断点处，否则执行直接往下执行。但是，这个断点操作有什么关系呢要知道，是一门动态语言。

什么是断点操作（Breakpoint action）

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

以下一段话来自知乎

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

勾选后面的继续执行 （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说道 : 我最机智。

因此在条件断点的条件输入框中，我们可以输入我们想执行的断点操作即可以，比如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...

欢迎关注公众号：

私有云海外云主机 javascript断点调试 webrtc 操作指定应用指定ECS操作系统 javascript操作css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97842.html

Chrome 浏览器 Javascript 调试参考

摘要：关闭开启所有断点不会取消。进入到一个与正在的问题无关的函数后，可以点击此图标解析函数剩下的代码，跳出函数到下一行。例如现在在处暂停，之后，浏览器解析函数剩下的代码，然后在处再次暂停。是全局的，在浏览器的所有标签页都能找到和运行。此文章翻译自 https://developers.google.com...，是对 chrome 下调试 javascript 的工具和方法介绍。调试 j...

pepperwang 2019-08-02 16:00 评论0 收藏0
Chrome 浏览器 Javascript 调试参考

摘要：关闭开启所有断点不会取消。进入到一个与正在的问题无关的函数后，可以点击此图标解析函数剩下的代码，跳出函数到下一行。例如现在在处暂停，之后，浏览器解析函数剩下的代码，然后在处再次暂停。是全局的，在浏览器的所有标签页都能找到和运行。此文章翻译自 https://developers.google.com...，是对 chrome 下调试 javascript 的工具和方法介绍。调试 j...

joywek 2019-08-22 11:15 评论0 收藏0
前端基础进阶（六）：在chrome开发者工具中观察函数调用栈、作用域链与闭包

摘要：在的开发者工具中，通过断点调试，我们能够非常方便的一步一步的观察的执行过程，直观感知函数调用栈，作用域链，变量对象，闭包，等关键信息的变化。其中表示当前的局部变量对象，表示当前作用域链中的闭包。 showImg(https://segmentfault.com/img/remote/1460000008404321); 在前端开发中，有一个非常重要的技能，叫做断点调试。在chrome...

draveness 2019-08-21 18:31 评论0 收藏0