Firefox Devtools 团队与代码贡献者社区一直在努力为 Firefox 72 添加大量改进。这篇文章介绍了现在可在 Firefox 开发者版 中使用的 监视点 功能！继续阅读以了解有关监视点以及如何使用它们的更多信息。

什么是监视点？为什么它们有用？

您是否曾经想了解在代码中对象上的属性在何处被读取或设置，而无需手动添加断点或日志语句？监视点是一种断点类型，可以回答此问题。

如果在对象上的属性上添加监视点，则每次使用该属性时，调试器都会在该位置暂停。监视点有两种类型：get 和 set。get 监视点在每次读取属性时暂停，而 set 监视点在每次属性值更改时暂停。

当调试大型复杂代码库时，监视点功能特别有用。在这种环境中，可能并不容易预测在何处设置/读取属性。

监视点也适用于 Firefox 的 Visual Studio Code 扩展，在其中被称为“数据断点”。您可以从 VSCode 市场下载 Firefox 调试器扩展。然后，在 VSCode 的调试文档 中阅读有关如何使用 VSCode 的数据断点的更多信息。

入门

要设置监视点，请暂停调试器，在调试器的“范围”窗格中找到一个属性，然后右键单击它以查看菜单。显示菜单后，您可以选择添加 set 或 get 监视点。这里我们要调试 obj.a，因此我们要在其上添加一个 set 监视点。

瞧，set 监视点已添加，属性右侧的蓝色监视点图标表示。在您的代码中，最简单的事情就是让调试器通知您何时设置属性。只需点击恢复 (或 F8)，我们就开始了。

调试器已在 obj.a 设置的第 7 行暂停。还要注意右上角的黄色暂停消息面板，它告诉我们由于 set 监视点而导致中断。

删除监视点就像删除常规断点一样 - 只需点击蓝色监视点图标即可。

就是这样！此功能使用起来很简单，但它在您的调试工具箱中非常强大。

实施

当您在属性上添加监视点时，会使用 JavaScript 的本机 Object.defineProperty 方法为该属性定义getter 和 setter 函数。这些 getter/setter 函数在每次使用您的属性时运行，并调用一个暂停调试器的函数。您可以 查看此功能的服务器代码。

当我们构建监视点的实现时，我们面临着一个有趣的挑战。该团队需要确保我们使用 Object.defineProperty 对用户是透明的。出于这个原因，我们必须确保原始值而不是 getter/setter 函数出现在调试器中。

需要注意的一些事项

- 监视点不适用于 getter 和 setter。
- 当变量被 垃圾回收 时，它会将监视点也回收。

下一步

我们计划支持从控制台以及 DevTools 允许您检查对象的许多其他地方添加和查看监视点。此外，我们希望继续完善此功能，我们希望得到您的帮助！

在 Firefox 开发者版 72 中试用监视点，并请通过以下渠道之一向我们发送反馈

• 在 Bugzilla 中提交错误报告。
• 加入我们的 Firefox Devtools Slack 分享您的意见。
• 在 Mozilla 的 开发者 工具论坛中讨论您的想法。
• 在 Twitter 上通过 @FirefoxDevTools 与我们交流。