JavaScript 断点调试技巧：利用条件断点实现日志打印与变量修改

前言

尽管网络上存在大量调试教程，但鲜有文章能将断点调试讲解得通俗易懂。本文旨在分享个人常用的调试习惯与心得，希望能帮助那些尚未熟练掌握断点调试技巧的开发者。

本文将详细介绍 JavaScript 中指定断点操作的具体方法，供读者参考学习。

理解断点操作（Breakpoint Action）

什么是断点操作（Breakpoint action）

前端开发者可能对“断点操作”这一概念较为陌生，但在 C、C++、C# 等后端或系统级语言的开发中，这已是常见功能。在 Xcode 或 Visual Studio 等集成开发环境（IDE）中，通常都提供了该功能。

以下引用自知乎的相关解释：

断点操作（Action）的意义在于设置追踪点（Tracepoint）。追踪点本质上是一种带有 Trace 功能的临时断点，它会将指定的消息打印到 Output 窗口中。

Breakpoint Action

若勾选“继续执行（Continue Execution）”，当追踪点被命中时，Debugger 不会暂停程序，而是继续运行，但消息仍会打印出来；若不勾选，程序将在该处暂停。无论哪种情况，消息均会被打印。

JavaScript 需要断点操作吗？

设想这样一个场景：希望在程序运行过程中，观察某一行代码中某个变量或表达式的值。你可能会说：

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

看起来，第二种方式更为便捷。虽然可以通过 Chrome 的 Live Edit 功能动态插入代码，但我们往往希望有一种不直接修改源代码的方法。此时，设置断点操作便成为了一个可行的思路。

Chrome 中实现断点操作的技巧

如何在 JavaScript 中设置断点操作？

前端调试大多在浏览器中进行，而 Chrome 浏览器因其强大的调试功能成为主流选择。然而，令人遗憾的是，Chrome 原生并未提供类似其他 IDE 的“断点操作”功能，其他浏览器亦然。面对这一现状，心情或许如下：

没这功能，还怎么调试？

别急，让我们深入探讨。在 Chrome 进行断点调试时，可以使用“条件断点”。所谓条件断点，是指定一个条件表达式，当条件满足时程序在断点处暂停，否则直接继续执行。如图所示，在线号（Line Number）处点击右键，选择“Add conditional breakpoint”（添加条件断点）。

条件断点

接着，在输入框中输入条件表达式，例如 params.value == 'value'，如图所示：

断点条件

关于条件断点的详细说明，若仍不熟悉，建议参考更多相关资料。

那么，这与“断点操作”有何关联？关键在于 JavaScript 作为一门动态语言，条件判断框中允许输入任意代码片段。例如以下代码：

if(express)

即使 express 不是布尔值、布尔表达式或返回布尔值的函数，也是完全可以执行的。这为我们提供了极大的操作便利。

JavaScript 确实很机智。

这种“取巧”的方式

利用条件断点打印日志

因此，在条件断点的输入框中，我们可以输入想要执行的“断点操作”代码，例如 console.log。如图所示：

断点操作

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

打印结果

控制断点是否暂停执行

由于 console.log 的返回值是 undefined（在布尔上下文中转换为 false），程序不会在此处暂停，而是直接继续执行。这相当于前文提到的“继续执行”模式。如果需要在此处暂停，可以设置如下表达式：

断点操作 中断执行

结语

技巧总结与应用场景

必须指出，条件断点的设计初衷并非为此。因此，这实际上是一种 Hack 技巧，而非标准或原本的设计方式。但鉴于许多 Web 开发者都习惯使用 Hack 技巧，只要使用便捷即可。

通过这种方式，相当于无需修改代码，即可临时注入想要执行的代码片段。

许多同学喜欢在工程中直接使用 console.log，但这导致在发布时需要手动删除这些日志代码，增加了工作量。利用此方法，或许可以减少产品代码中残留的 console.log。

此外，此方法还可用于动态修改变量的值。有时，某些 Bug 仅在特定变量值下才能复现，而这些值可能由服务端推送。此时，调试所需的值可能依赖于后端数据。通过前端页面强制改变某些值，可以在不依赖后端数据的情况下复现 Bug。例如：

修改变量

参考

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

总结

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