Firefox 72 新增监控点功能，变量调试更便捷

作者：Miriam Budayr

Firefox 开发者工具（Devtools）团队与程序代码贡献者社群携手合作，针对 Firefox 72 进行一系列的更新改善。本文旨在说明已于Firefox 开发者版本上线的监控点（watchpoints）功能，请继续阅读，了解此功能的特点及使用方法。

监控点是什么？用途是什么？

你是否曾希望不必手动添加断点（breakpoint）或日志语句（log statements），就能知道程序代码对象中有哪些属性已被读取或设定？监控点（watchpoint）就是可以解决此问题的一种断点。

若在对象的属性加上一个监控点，每次用到该属性时，调试器 (debugger）就会在程序代码的那个位置上暂停。监控点有两种：get 和 set。get 会在属性被读取时暂停，而 set 则会在属性值变更时停下来。

在调试大型又复杂的程序代码库时，此监控点功能特别方便。因为在这种情况下，属性被设定/读取之处不太容易预测。

你也可以通过 Firefox 的 Visual Studio Code 附加组件取得监控点，该扩展称此功能为「数据断点」（data breakpoints）。如要下载Debugger for Firefox 附加组件，请访问 VSCode Marketplace，并参阅VSCode 的调试文件，以了解 VSCode 数据断点的使用方法。

开始使用

如要设定监控点，请先暂时停止调试（debug），在调试器的 「Scopes」窗口中找到属性后，右键单击出菜单。展开断点菜单后，你可选择加上 set 或 get 的监控点。例如下面，我们想帮 obj.a 调试，所以要在上面加 set 监控点。

好，set 监控点加好了，以该属性右侧的蓝色监控点符号显示。这是程序代码中最简单的部分——让调试器告诉你属性已设好。只要按 resume（或 F8）即可继续。

调试器在第 7 行停下来，即设置 obj.a 之处。另外，请注意右上角有个暂停信息的黄色窗口，提示由于出现 set 监控点而造成中断。

删除监控点的方法和删除断点一样，只要按蓝色监控点的图标即可。

大功告成！此功能使用起来虽然简单，却是非常强大的调试工具。

实际操作

当为属性添加监控点时，该属性的 getter 和 setter 函数将以 JavaScript 原生的 Object.defineProperty 方法定义。只要使用到该属性，这些 getter/setter 函数都会执行，且将调用一个能使调试器暂停的函数。你可以到此处查看此功能的 server code。

我们在进行监控点的实际操作时，曾碰到一个有趣的挑战。因为我们的团队必须让用户清楚了解我们运用了 Object.defineProperty，所以我们得确保调试器呈现的是原始值，而非 getter/setter 函数。

有几点必须特别提醒：

- 监控点不适用于 getters 和 setters。

- 当变数被 garbage-collected，它也会将监控点一并带走。

后续规划

开发者工具团队计划在控制台及其他多处加入可添加与查看监控点的功能，以便用户运用 DevTools（开发者工具）来查看对象。另外，我们也会继续优化此功能，也希望有你们的帮助和支持！

通过以下渠道，请与我们分享你对 Firefox Developer Edition 72 监控点功能的想法。

• 到 Bugzilla 提交程序 bug。
• 加入 Firefox Devtools Slack 并提供反馈。
• 参与 Mozilla 的 Developer Tools Discourse 上的意见交流。
  

来源自 Mozilla 开发者博客