使用 Visual Studio Code 调试代码

Visual Studio Code 对调试各类应用程序提供了丰富的支持。VS Code 内置了对 JavaScript、TypeScript 和 Node.js 的调试支持。Visual Studio Marketplace 提供了多种调试扩展，可为 VS Code 添加对其他语言和运行时的调试支持。

本文介绍了 VS Code 的调试功能以及如何开始在 VS Code 中进行调试。此外，您还将学习如何利用 VS Code 中的 Copilot 加速配置调试设置并启动调试会话。

以下视频演示了如何在 VS Code 中开始调试。

调试器用户界面

下图展示了调试器用户界面的主要组成部分

1. 运行和调试视图：显示与运行、调试和管理调试配置设置相关的所有信息。
2. 调试工具栏：包含最常用调试操作的按钮。
3. 调试控制台：用于查看在调试器中运行的代码输出并与之交互。
4. 调试侧边栏：在调试会话期间，允许您与调用堆栈、断点、变量和监视变量进行交互。
5. 运行菜单：包含最常用的运行和调试命令。

调试前准备

1. 从 Visual Studio Marketplace 安装适用于您所用语言或运行时的调试扩展。

   VS Code 内置了对 JavaScript、TypeScript 和 Node.js 的调试支持。

2. 为您的项目定义调试配置。

   对于简单的应用程序，VS Code 会尝试运行和调试当前活动的文件。对于更复杂的应用程序或调试场景，您需要创建一个 launch.json 文件来指定调试器配置。了解有关创建 调试配置 的更多信息。

   提示

   VS Code 中的 Copilot 可以帮助您生成 launch.json 文件。有关详细信息，请参阅 使用 Copilot 生成调试配置。

3. 在代码中设置断点。

   断点是一个标记，您可以将其设置在代码行上，告知调试器在执行到该行时暂停。您可以通过点击编辑器中行号旁边的页边距来设置断点。

   有关断点的更多信息，请参阅 使用断点。

启动调试会话

要在 VS Code 中启动调试会话，请执行以下步骤

1. 打开包含您要调试代码的文件。

2. 使用 F5 键启动调试会话，或者在运行和调试视图（workbench.view.debug）中选择运行和调试。

   

   对于更复杂的调试场景（例如附加到正在运行的进程），您需要创建一个 launch.json 文件来指定调试器配置。了解有关 调试配置 的更多信息。

3. 从可用调试器列表中选择您要使用的调试器。

   VS Code 会尝试运行和调试当前活动的文件。对于 Node.js，VS Code 会检查 package.json 文件中的 start 脚本，以确定应用程序的入口点。

4. 当调试会话开始时，会显示调试控制台面板并显示调试输出，状态栏颜色会发生变化（默认颜色主题为橙色）。

   

5. 状态栏中的调试状态显示活动的调试配置。选择调试状态可更改活动的启动配置并开始调试，无需打开运行和调试视图。

   

调试操作

一旦调试会话开始，调试工具栏就会出现在窗口顶部。工具栏包含用于控制调试会话流程的操作，例如单步执行代码、暂停执行和停止调试会话。

下表描述了调试工具栏中可用的操作

如果您的调试会话涉及多个目标（例如客户端和服务器），调试工具栏会显示会话列表，并允许您在它们之间进行切换。

Breakpoints

断点是一个特殊的标记，用于在代码的特定点暂停执行，以便您检查应用程序在该点的状态。VS Code 支持多种类型的断点。

设置断点

要设置或取消设置断点，请点击编辑器页边距或在当前行使用 F9。

• 编辑器页边距中的断点通常显示为填充的红色圆圈。
• 禁用的断点显示为填充的灰色圆圈。
• 当调试会话开始时，无法在调试器中注册的断点会变为灰色空心圆圈。如果您在运行不支持实时编辑的调试会话时编辑了源代码，也可能会发生这种情况。

您可以选择通过启用 debug.showBreakpointsInOverviewRuler 在 VS Code 中打开 在 VS Code Insiders 中打开 设置，在编辑器的概览标尺中显示断点。

如需更精细地控制断点，请使用运行和调试视图的断点部分。该部分列出了代码中的所有断点，并提供额外的操作来管理它们。

断点类型

条件断点

VS Code 的一项强大调试功能是可以基于表达式、命中次数或两者的组合来设置条件。

• 表达式条件：当表达式计算结果为 true 时，断点被触发。
• 命中次数：命中次数控制断点在暂停执行之前需要被触发多少次。是否支持命中次数以及表达式的确切语法可能因调试器扩展而异。
• 等待断点：断点在另一个断点被触发（触发断点）后才会激活。

添加条件断点

1. 创建条件断点

   • 在编辑器页边距右键点击，选择添加条件断点。
   • 使用命令面板中的添加条件断点命令（⇧⌘P (Windows, Linux Ctrl+Shift+P)）。

2. 选择要设置的条件类型（表达式、命中次数或等待断点）。

   

向现有断点添加条件

1. 编辑现有断点

   • 在编辑器页边距右键点击断点，选择编辑断点。
   • 在运行和调试视图的断点部分，选择现有断点旁边的铅笔图标。

2. 编辑条件（表达式、命中次数或等待断点）。

如果调试器不支持条件断点，则添加条件断点和编辑条件操作不可用。

触发断点

触发断点是一种在另一个断点被触发后才启用的条件断点。在诊断仅在满足特定前提条件后才发生的故障案例时，它们非常有用。

可以通过右键单击字形边距，选择 添加触发断点，然后选择哪个其他断点启用此断点来设置触发断点。

内联断点

内联断点仅在执行到达与内联断点关联的列时才会被触发。这在调试压缩后的代码时非常有用，因为压缩代码会在单行中包含多条语句。

可以使用 ⇧F9 (Windows, Linux Shift+F9) 或在调试会话期间通过右键菜单设置内联断点。内联断点显示在编辑器的行内。

内联断点也可以包含条件。可以通过编辑器左侧页边距的右键菜单编辑同一行上的多个断点。

函数断点

调试器支持通过指定函数名称来创建断点，而不是直接在源代码中放置断点。这在源代码不可用但已知函数名的情况下非常有用。

要创建函数断点，请选择断点部分标题中的 + 按钮并输入函数名称。函数断点在断点部分显示为红色三角形。

数据断点

如果调试器支持数据断点，它们可以从变量视图的右键菜单中设置。在值改变/读取/访问时中断命令会添加一个数据断点，当底层变量的值发生改变/被读取/被访问时，该断点会被触发。数据断点在断点部分显示为红色六边形。

日志点

日志点（Logpoint）是断点的一种变体，它不会中断调试器，而是将消息记录到调试控制台。日志点可以帮您节省时间，无需在代码中添加或删除记录语句。

日志点由菱形图标表示。日志消息为纯文本，但也可以包含在大括号 '{}' 中进行计算的表达式。

要添加日志点，请在编辑器左侧页边距右键点击并选择添加日志点，或者在命令面板中使用调试：添加日志点...命令（⇧⌘P (Windows, Linux Ctrl+Shift+P)）。您也可以配置 debug.gutterMiddleClickAction 在 VS Code 中打开 在 VS Code Insiders 中打开 设置，以便在编辑器页边距按下鼠标中键时切换日志点。

与常规断点一样，日志点可以被启用或禁用，也可以通过条件和/或命中次数进行控制。

数据检查

运行和调试视图

在调试会话期间，您可以在运行和调试视图的变量部分检查变量和表达式，也可以通过将鼠标悬停在编辑器中的源上进行检查。变量值和表达式求值是相对于调用堆栈部分中所选的栈帧而言的。

要在调试会话期间更改变量的值，请在变量部分右键点击变量并选择设置值（Enter (Windows, Linux F2)）。

此外，您可以使用复制值操作来复制变量的值，或使用复制为表达式操作来复制用于访问变量的表达式。然后，您可以在监视部分使用该表达式。

变量和表达式也可以在运行和调试视图的监视部分进行求值和监视。

要按名称或值过滤变量，请在聚焦于变量部分时使用键盘快捷键 ⌥⌘F (Windows, Linux Ctrl+Alt+F)，然后输入搜索词。

调试控制台 REPL

表达式可以使用调试控制台 REPL（读取-求值-打印循环）功能进行求值。要打开调试控制台，请使用调试面板顶部的调试控制台操作，或使用视图：调试控制台命令（⇧⌘Y (Windows, Linux Ctrl+Shift+Y)）。

按下 Enter 后会对表达式进行求值，调试控制台 REPL 会在您输入时显示建议。如果需要输入多行，请在行之间使用 Shift+Enter，然后使用 Enter 发送所有行进行求值。

调试控制台输入使用活动编辑器的模式，这意味着调试控制台输入支持语法高亮、缩进、引号自动闭合以及其他语言功能。

多目标调试

对于涉及多个进程（例如客户端和服务器）的复杂场景，VS Code 支持多目标调试。启动第一个调试会话后，您可以启动另一个调试会话。一旦第二个会话启动并运行，VS Code UI 就会切换到多目标模式

• 各个会话现在作为顶级元素显示在调用堆栈视图中。

  

• 调试工具栏显示当前活动的会话（所有其他会话都可以在下拉菜单中找到）。

  

• 调试操作（例如调试工具栏中的所有操作）都是在活动会话上执行的。活动会话可以通过调试工具栏中的下拉菜单进行切换，或者通过在调用堆栈视图中选择不同的元素进行切换。

远程调试

VS Code 并不支持所有语言的内置远程调试。远程调试是您所使用的调试扩展的一项功能，您应该咨询 Marketplace 中该扩展的页面以获取支持和详细信息。

不过，有一个例外：VS Code 中包含的 Node.js 调试器支持远程调试。有关更多信息，请参阅 Node.js 调试。

调试器扩展

VS Code 为 Node.js 运行时提供了内置的调试支持，可以调试 JavaScript、TypeScript 或任何其他转译为 JavaScript 的语言。

要调试其他语言和运行时（包括 PHP、Ruby、Go、C#、Python、C++、PowerShell 以及 许多其他语言），请在 Visual Studio Marketplace 中查找 Debuggers 扩展，或在顶级运行菜单中选择安装其他调试器。

以下是一些包含调试支持的热门扩展

后续步骤

要了解 VS Code 对 Node.js 的调试支持，请查看

• Node.js - 描述了包含在 VS Code 中的 Node.js 调试器。
• TypeScript - Node.js 调试器也支持 TypeScript 调试。

要查看有关调试基础知识的教程，请观看此视频

• VS Code 调试入门 - 学习如何在 VS Code 中进行调试。

要了解有关 Copilot 和 VS Code 中 AI 辅助调试的更多信息

• 使用 Copilot 调试和修复问题
• Copilot 调试和修复问题备忘单

要通过 VS Code 扩展了解其他编程语言的调试支持

• C++
• Python
• Java

要了解 VS Code 的任务运行支持，请前往

• 任务 - 描述如何使用 Gulp、Grunt 和 Jake 运行任务，以及如何显示错误和警告。

要编写自己的调试器扩展，请访问

• 调试器扩展 - 使用模拟示例说明了创建 VS Code 调试扩展所需的步骤。

常见问题

支持哪些调试场景？

VS Code 开箱即用地支持在 Linux、macOS 和 Windows 上对 Node.js 应用程序进行调试。许多其他场景受 Marketplace 中可用的 VS Code 扩展支持。