Logpoints 和自动附加功能介绍
2018 年 7 月 12 日,Kenneth Auchenberg,@auchenberg
在过去的几个月里,我们一直在努力改进 Visual Studio Code 中的调试体验。在这篇文章中,我将讨论我们如何思考调试问题、我们从用户那里听到的反馈,并解释我们正在采取的步骤,以使 VS Code 中的调试变得更简单、更容易。
自 VS Code 诞生以来,我们就提供了集成调试体验,因为我们相信调试应该是您编写和编辑源代码的地方——您的编辑器——不可或缺的一部分。
VS Code 调试体验由通用的调试器 UI 提供支持,该 UI 通过调试适配器协议 (DAP) 与我们称为调试适配器 (DA) 的特定类型 VS Code 扩展进行通信。DA 与实际的调试器进行通信,并在 DAP 和调试器的特定运行时调试协议或 API 之间进行转换。
这意味着 VS Code 的核心与特定的调试器完全解耦,这种架构允许 VS Code 调试任何内容,只要有可用的调试适配器,如下图所示:
观察和痛点
如今,有大量满意的开发人员定期使用 VS Code 进行调试,但作为我们使命的一部分,我们希望让调试变得更容易,并惠及更多开发人员。
为此,我们开始对话,以更好地了解 VS Code 中调试的痛点,并了解为什么有些开发人员根本不使用我们的调试器。
以下是我们的观察结果:
调试配置很难正确设置
VS Code 是一个带有通用调试器的通用编辑器,不专门用于特定的堆栈或运行时。因此,我们无法提供一个适用于所有人的有主见的默认调试配置。
这意味着 VS Code 需要您为调试器配置设置,并指定如何使用正确的参数等来启动运行时。
我们承认这可能很难正确设置,但我们看不到完全消除所有人的调试配置的方法。但是,我们确实相信调试配置可以简化,并且根据上下文,可以最小化。
我稍后会回到这个问题。
启动和附加配置之间的混淆
在 VS Code 中,我们有两个核心调试概念:**启动**和**附加**,它们处理两种不同的工作流和开发人员群体。根据您的工作流,知道哪种类型的配置适合您的项目可能会令人困惑。
如果您来自浏览器 DevTools 背景,您不习惯“从您的工具启动”的概念,因为您的浏览器实例已经打开。当您打开 DevTools 时,您只是将 DevTools **附加**到您打开的浏览器选项卡。另一方面,如果您来自 Java 背景,让您的编辑器为您**启动** Java 进程,并且您的编辑器自动将其调试器附加到新启动的进程,这是很正常的。
解释**启动**和**附加**之间差异的最佳方法是,将启动配置视为在 VS Code 附加到应用程序**之前**如何在调试模式下启动应用程序的配方,而附加配置则是如何将 VS Code 的调试器连接到**已经**运行的应用程序或进程的配方。
启动配置的价值在于它们为您提供了一种通过创建可重复且可与您的项目和团队共享的配置,来减轻以正确调试参数启动应用程序的认知开销的方法。
然而,当我们与开发人员讨论他们如何启动应用程序时,我们发现了一个模式并做出了一个重要观察:
**观察**:许多使用 VS Code 的开发人员非常喜欢集成终端,并依赖命令行工具来启动他们的应用程序。对于许多人来说,在终端中运行命令,然后从编辑器附加调试器是一种更自然的工作流。这类似于在浏览器启动后打开 DevTools。
这个观察结果是关键,我们意识到许多用户不希望在他们的编辑器中获得完整的“神奇”启动体验。他们希望将编辑器作为编辑和调试源代码的地方,并使用终端启动应用程序、运行构建脚本等。这就是我们在 VS Code 中提供集成终端体验的原因之一,因为我们相信一个良好的功能 UI 应该与终端共存并良好集成。
许多开发人员不使用断点,因为他们正在检查状态变化
在查看开发人员如何调试应用程序时,我们还看到了另一个有趣的模式:使用日志而不是断点。
用于调试的日志记录不是一个新概念,但这个观察结果很重要:
**观察**:传统的调试工作流主要侧重于减慢执行以检查程序逻辑,而日志记录工作流通常涉及检查程序状态以及它在应用程序正常执行期间如何变化。这里的基本观察是,这两种技术用于不同的调试目的。
这个观察结果对于 JavaScript 开发人员尤其相关,他们主要处理管理状态的复杂性,这或许可以解释为什么大多数 JavaScript 开发人员仍然喜欢在源代码中添加 console.log 而不是使用脚本调试器。
自动附加到 Node 进程
在思考一些开发人员如何使用集成终端启动调试会话时,我们看到了一个独特的机会。通过利用我们在 VS Code 中从您的编辑器和集成终端获得的上下文信息,我们可以检测您的上下文并推断您的调试意图,这可以为 Node.js 开发人员提供更简单的调试体验。
因此,在 我们三月份的 VS Code 迭代中,我们发布了一个名为 **Node 自动附加**的新功能,它使 Node 调试器能够自动附加到从 VS Code 集成终端以调试模式启动的 Node.js 进程。
您可以通过从命令面板运行 **调试: 切换自动附加** 命令来启用自动附加,激活后,您也可以从状态栏切换自动附加。
此功能完全消除了任何调试配置,因为我们将任何以 `node --inspect` 启动的 Node.js 进程解释为调试意图。当与集成终端结合使用时,它是一种更简单的调试体验,允许开发人员以自己的方式启动应用程序,同时消除调试配置!🎉
NPM 脚本和调试
许多 Node.js 开发人员依赖 npm 脚本来启动应用程序或开始调试会话,我们在这方面也有一些好消息:自动附加也适用于 npm 脚本。如果您运行 `npm run debug` 并且 `"debug"` 脚本是 `"node --inspect"` 或任何其他包含 `--inspect` 的命令,那么自动附加将检测到并附加调试器 🎉
我们还认识到一些开发人员希望以更可视化的方式查找和运行他们的 npm 脚本,因此在 我们 2018 年 4 月的迭代中,我们添加了一个新的 NPM 脚本资源管理器,允许您直接从 UI 浏览和运行您的 NPM 脚本。作为我们简化调试配置工作的一部分,我们还使其可以直接从资源管理器开始 Node.js 调试,而无需创建调试配置。
如果您有一个包含调试参数(如 `--inspect`)的 npm 脚本,我们将自动检测到这一点并提供一个启动调试器的调试操作,如下图所示:
Logpoints 介绍
基于日志记录是一种重要的调试技术的认识,我们看到了一个机会,可以将状态检查添加到我们现有的调试体验中。在 三月份的 VS Code 迭代中,我们发布了我们称之为 Logpoints 的调试功能的第一个实现。
Logpoint 是一种断点变体,它不会“中断”到调试器中,而是将消息记录到控制台。
Logpoints 的概念并不新鲜,在过去的几年里,我们看到这个概念的不同变体出现在各种工具中,如 Visual Studio、Edge DevTools 和 GDB,名称各异,例如 Tracepoints 和 Logpoints。
为什么以及何时使用 Logpoints?
Logpoints 基于这样一个观察,即在许多情况下,您不想停止应用程序特定部分的执行,而是想检查状态在应用程序生命周期中如何变化。
Logpoints 允许您将按需日志记录语句“注入”到您的应用程序逻辑中,就像您在启动应用程序之前已经添加了日志记录语句一样。Logpoints 在执行时注入,不保留在源代码中,因此您不必提前计划,可以根据需要注入 Logpoints。另一个好处是,您不必担心在调试完成后清理源代码。
对于 JavaScript 开发人员来说,这意味着您再也不用担心留下 `console.log` 了——只需使用 Logpoints!更好的是,您可以结合使用 `console.log` 和 Logpoints。如果您在已经有 `console.log` 的代码块中插入 Logpoint,您会在调试控制台中看到两种类型的日志记录语句。
云环境中的 Logpoints
Logpoints 在云环境(或任何远程环境)中特别有用,因为它们使您无需重新部署应用程序即可将日志记录注入远程环境。同样重要的是,您不会使用 Logpoints 停止脚本执行,因此您的用户不会受到影响,这与在常规断点处停止正在运行的应用程序不同。
您可以在此处阅读更多关于如何在 Azure 上为 Node.js 使用 Logpoints 的信息。
支持的语言
自 VS Code 中首次发布 Logpoints 以来,我们看到 VS Code 调试适配器越来越多地采用它,如今以下语言都支持 Logpoint:
- Node.js 调试器
- Chrome 调试器
- Firefox 调试器
- Microsoft Edge 调试器
- React Native 调试器
- Python 调试器
- Dart 调试器
- Lua 调试器
- Java 调试器
- 大型机调试器
VS Code 中的 Logpoints
如果您有兴趣在您的 VS Code 调试适配器中添加 Logpoint 支持,请查看协议中的这些更改。您也可以查看上述调试适配器,了解每个运行时如何选择实现 Logpoints。
后续步骤
目前就这些,但我们还没有完成。在我们的七月迭代中,我们正在改进自动附加功能,以帮助提高可发现性(#53640),这是基于用户反馈进行的。
我们希望自动附加、NPM 脚本资源管理器和 Logpoints 的引入能够让使用 VS Code 进行调试变得更容易。一如既往,我们渴望听到您的反馈,请通过 GitHub 或 Twitter 上的 @code 与我们联系。
代表 VS Code 团队:祝您编码愉快!
/Kenneth Auchenberg——Twitter 上的 @auchenberg