介绍 Logpoint 和自动附加

2018 年 7 月 12 日，Kenneth Auchenberg，@auchenberg

在过去的几个月里，我们一直致力于改进 Visual Studio Code 中的调试体验。在这篇文章中，我将探讨我们如何看待调试，介绍我们从用户那里收集到的反馈，并解释我们为使 VS Code 中的调试更简单、更容易而采取的步骤。

自 VS Code 诞生以来，我们就提供了集成的调试体验，因为我们相信调试应该成为您编写和编辑源代码的地方——您的编辑器的不可或缺的一部分。

VS Code debugger

VS Code 调试体验由通用的调试器 UI 提供支持，该 UI 通过调试适配器协议 (DAP) 与我们称之为调试适配器 (DA) 的特定类型的 VS Code 扩展进行通信。DA 与真正的调试器通信，并在 DAP 和运行时特定的调试协议或调试器 API 之间进行转换。

这意味着 VS Code 的核心与特定调试器完全解耦，这种架构允许 VS Code 调试任何内容，只要有调试适配器可用，如下图所示

VS Code debugging architecture

观察和痛点

如今，有一大批满意的开发人员定期使用 VS Code 进行调试，但是，作为我们使命的一部分，我们希望让更多的开发人员更容易地使用调试功能。

为此，我们开始对话，以更好地了解 VS Code 中调试的痛点，并了解为什么有些开发人员根本不使用我们的调试器。

以下是我们的观察结果

调试配置很难正确设置

VS Code 是一个带有通用调试器的通用编辑器，不专门用于特定的堆栈或运行时。因此，我们无法提供适用于所有人的特定默认调试配置。

这意味着 VS Code 要求您配置调试器设置，并指定如何使用正确的参数等启动运行时。

我们承认这可能很难正确设置，但我们看不到彻底消除所有人的调试配置的方法。但是，我们确实相信调试配置可以简化，并且根据上下文，可以最小化。

我稍后会再谈到这一点。

启动和附加配置之间的混淆

在 VS Code 中，我们有两个核心调试概念：**启动 (Launch)** 和 **附加 (Attach)**，它们处理两种不同的工作流和开发人员群体。根据您的工作流，知道哪种类型的配置适合您的项目可能会令人困惑。

如果您来自浏览器 DevTools 背景，您不习惯“从工具启动”的概念，因为您的浏览器实例已经打开。当您打开 DevTools 时，您只是将 DevTools **附加**到您打开的浏览器选项卡。另一方面，如果您来自 Java 背景，让编辑器为您**启动** Java 进程，并且编辑器自动将其调试器附加到新启动的进程中，这是很正常的。

解释**启动**和**附加**之间差异的最佳方式是，将启动配置视为在 VS Code 附加到应用程序**之前**如何在调试模式下启动应用程序的配方，而附加配置则是如何将 VS Code 的调试器连接到**已经**运行的应用程序或进程的配方。

启动配置的价值在于，它们提供了一种方法，通过创建可重复并与您的项目和团队共享的配置，来减轻以正确调试参数启动应用程序的一些认知开销。

然而，当我们与开发人员讨论他们如何启动应用程序时，我们发现了一个模式并做出了一个重要观察

**观察**：许多使用 VS Code 的开发人员非常喜欢集成终端，并依赖命令行工具来启动他们的应用程序。对于许多人来说，在终端中运行命令，然后从编辑器附加调试器是一种更自然的工作流程。这类似于在浏览器启动后打开 DevTools。

这个观察结果至关重要，我们意识到许多用户不希望在编辑器中获得一个完整的“神奇”启动体验。他们希望将编辑器作为编辑和调试源代码的地方，并使用终端启动应用程序、运行构建脚本等。这也是我们在 VS Code 中提供集成终端体验的原因之一，因为我们相信一个良好的功能 UI 应该与终端共存并良好集成。

许多开发人员不使用断点，因为他们正在检查状态变化

在研究开发人员如何调试应用程序时，我们还看到了另一个有趣的模式：使用日志而不是断点。

使用日志进行调试并不是一个新概念，但这个观察很重要

**观察**：传统的调试工作流主要侧重于减慢执行速度以检查程序逻辑，而日志工作流通常涉及检查程序状态及其在应用程序正常执行期间如何变化。这里的基本观察是，这两种技术用于不同的调试目的。

这个观察结果对于 JavaScript 开发人员尤其重要，他们主要处理状态管理的复杂性，这可能解释了为什么大多数 JavaScript 开发人员仍然喜欢在源代码中添加 console.log 而不是使用脚本调试器。

自动附加到 Node 进程

当我们反思一些开发人员如何使用集成终端启动他们的调试会话时，我们看到了一个独特的机会。通过利用我们在 VS Code 编辑器和集成终端中拥有的上下文信息，我们可以检测您的上下文并推断您的调试意图，这可以为 Node.js 开发人员提供更简单的调试体验。

因此，在我们 3 月份的 VS Code 迭代中，我们发布了一个名为 **Node 自动附加 (Auto Attach for Node)** 的新功能，该功能使 Node 调试器能够自动附加到从 VS Code 的集成终端以调试模式启动的 Node.js 进程。

您可以通过从命令面板运行 **调试：切换自动附加 (Debug: Toggle Auto Attach)** 命令来启用自动附加，一旦激活，您也可以从状态栏切换自动附加。

Auto attach

此功能完全消除了任何调试配置，因为我们将任何以 `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 脚本，我们将自动检测到这一点并提供一个启动调试器的调试操作，如此处所示

NPM scripts

介绍 Logpoints

根据日志记录是一种重要的调试技术这一经验，我们看到了将状态检查添加到我们现有调试体验中的机会。在 VS Code 的三月迭代中，我们发布了我们称之为 Logpoints 的调试功能的首次实现。

Logpoint 是一种断点变体，它不会“中断”到调试器中，而是将消息记录到控制台。

Logpoints

Logpoints 的概念并不新鲜，在过去几年中，我们已经在 Visual Studio、Edge DevTools 和 GDB 等工具中看到了这种概念的不同变体，名称包括 Tracepoints 和 Logpoints。

为什么以及何时使用 Logpoints？

Logpoints 基于这样一个观察：在许多情况下，您不想停止应用程序特定部分的执行，而是想检查应用程序整个生命周期中状态如何变化。

Logpoints 允许您将按需日志语句“注入”到应用程序逻辑中，就像您在启动应用程序之前添加了日志语句一样。Logpoints 在执行时注入，不保留在源代码中，因此您无需提前计划，但可以根据需要注入 Logpoints。另一个好处是，调试完成后，您无需担心清理源代码。

对于 JavaScript 开发人员来说，这意味着您再也不必担心遗留 `console.log` 了——只需使用 Logpoints！更好的是，您可以结合使用 `console.log` 和 Logpoints。如果您将 Logpoint 插入到已经有 `console.log` 的源代码块中，您将在调试控制台中看到两种类型的日志语句。

云上下文中的 Logpoints

Logpoints 在云上下文（或任何远程上下文）中特别有用，因为它们使您能够将日志记录注入到远程环境中，而无需重新部署应用程序。同样重要的是，您不会使用 Logpoints 停止脚本执行，因此您的用户不会受到影响，这与在常规断点处停止运行中的应用程序不同。

您可以在此处阅读更多关于如何在 Azure 上将 Logpoints 用于 Node.js。

支持的语言

自 VS Code 中 Logpoints 首次发布以来，我们看到 VS Code 调试适配器的采用率不断增长，如今以下语言已支持 Logpoint

VS Code 中的 Logpoints

如果您有兴趣在 VS Code 的调试适配器中添加 Logpoint 支持，请查看协议中的这些更改。您还可以查看上述调试适配器，了解每个运行时如何选择实现 Logpoints。

后续步骤

暂时就这些，但我们还没有完成。在我们的七月迭代中，我们正在改进自动附加功能，以提高可发现性 (#53640)，这是基于用户反馈的。

我们希望自动附加、NPM 脚本资源管理器和 Logpoints 的引入能够让使用 VS Code 进行调试变得更容易。一如既往，我们渴望听到您的反馈，因此请通过 GitHub 或 Twitter 上的 @code 与我们联系。

代表 VS Code 团队：祝您编码愉快！

/Kenneth Auchenberg — Twitter 上的 @auchenberg