使用 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 中开始调试。
调试器用户界面
下图显示了调试器用户界面的主要组件
- 运行和调试视图：显示与运行、调试和管理调试配置设置相关的所有信息。
- 调试工具栏：包含最常用调试操作的按钮。
- 调试控制台：允许查看在调试器中运行的代码的输出并与之交互。
- 调试侧边栏：在调试会话期间，允许你与调用堆栈、断点、变量和监视变量进行交互。
- 运行菜单：包含最常见的运行和调试命令。
开始调试之前
-
从 Visual Studio Marketplace 为你的语言或运行时安装调试扩展。
VS Code 内置了对 JavaScript、TypeScript 和 Node.js 调试的支持。
-
为你的项目定义调试配置。
对于简单的应用程序，VS Code 会尝试运行和调试当前活动的文件。对于更复杂的应用程序或调试场景，你需要创建一个
launch.json文件来指定调试器配置。获取有关创建调试配置的更多信息。提示VS Code 中的 Copilot 可以帮你生成
launch.json文件。有关更多信息，请参阅使用 Copilot 生成调试配置。 -
在代码中设置断点。
断点是你可以设置在某行代码上的标记，用于指示调试器在执行到该行时暂停。你可以通过点击编辑器中行号旁边的空白槽来设置断点。
有关断点的更多信息，请参阅使用断点。
启动调试会话
要在 VS Code 中启动调试会话，请执行以下步骤
-
打开包含要调试的代码的文件。
-
使用 F5 键启动调试会话，或在运行和调试视图 (
workbench.view.debug) 中选择运行和调试。
对于诸如附加到正在运行的进程等更复杂的调试场景，你需要创建一个
launch.json文件来指定调试器配置。获取有关调试配置的更多信息。 -
从可用调试器列表中选择要使用的调试器。
VS Code 会尝试运行和调试当前活动的文件。对于 Node.js，VS Code 会检查
package.json文件中的start脚本，以确定应用程序的入口点。 -
调试会话启动时，将显示调试控制台面板并显示调试输出，状态栏颜色也会发生变化（默认颜色主题为橙色）。
-
状态栏中的调试状态显示活动的调试配置。选择调试状态可更改活动启动配置并开始调试，而无需打开运行和调试视图。
调试操作
调试会话一旦启动，调试工具栏就会出现在窗口顶部。该工具栏包含用于控制调试会话流程的操作，例如单步执行代码、暂停执行和停止调试会话。
下表描述了调试工具栏中可用的操作
| 操作 | 描述 |
|---|---|
| 继续 / 暂停 F5 |
继续：恢复正常的程序/脚本执行（直到下一个断点）。 暂停：检查当前行正在执行的代码并进行逐行调试。 |
| 单步跳过 F10 |
将下一方法作为单个命令执行，而不检查或跟踪其组成步骤。 |
| 单步进入 F11 |
进入下一方法以逐行跟踪其执行。 |
| 单步跳出 ⇧F11 (Windows, Linux Shift+F11) |
在方法或子例程内部时，通过将当前方法的剩余行视为单个命令来完成执行，从而返回到先前的执行上下文。 |
| 重新启动 ⇧⌘F5 (Windows, Linux Ctrl+Shift+F5) |
终止当前程序执行，并使用当前的运行配置重新开始调试。 |
| Stop（停止） ⇧F5 (Windows, Linux Shift+F5) |
终止当前程序执行。 |
如果你的调试会话涉及多个目标（例如，客户端和服务器），调试工具栏会显示会话列表并允许你在它们之间切换。
使用 debug.toolBarLocation 设置来控制调试工具栏的位置。它可以是默认的 floating（浮动）、docked（停靠在运行和调试视图中）或 hidden（隐藏）。浮动的调试工具栏可以水平拖动，也可以向下拖动到编辑器区域（距离顶部边缘一定距离内）。
断点
断点是一种特殊的标记，它会在代码的特定点暂停代码执行，以便你检查该点应用程序的状态。VS Code 支持多种类型的断点。
设置断点
要设置或取消断点，请点击编辑器边缘，或在当前行上使用 F9。
- 编辑器边缘中的断点通常显示为红色实心圆。
- 禁用的断点显示为灰色实心圆。
- 当调试会话启动时，无法向调试器注册的断点会变成灰色空心圆。如果在运行不支持实时编辑的调试会话时编辑了源代码，也可能会发生这种情况。
可选地，通过启用 debug.showBreakpointsInOverviewRuler 设置，可以在编辑器的概览标尺中显示断点。
为了更好地控制断点，请使用运行和调试视图的断点 (BREAKPOINTS) 部分。此部分列出了代码中的所有断点，并提供了用于管理断点的额外操作。
如果你更喜欢以按文件分组的树状视图查看断点，请将 debug.breakpointsView.presentation 设置配置为 tree。
断点类型
条件断点
VS Code 的一个强大调试功能是能够根据表达式、命中次数或两者的组合来设置条件。
- 表达式条件：只要表达式求值为
true，就会命中该断点。 - 命中次数：命中次数控制断点在中断执行之前需要被命中多少次。是否遵循命中次数以及表达式的确切语法可能因调试器扩展而异。
- 等待断点：当命中另一个断点时激活此断点（触发断点）。
添加条件断点
-
创建条件断点
- 在编辑器边缘右键单击并选择添加条件断点。
- 使用命令面板中的添加条件断点命令 (⇧⌘P (Windows, Linux Ctrl+Shift+P))。
-
选择要设置的条件类型（表达式、命中次数或等待断点）。
向现有断点添加条件
-
编辑现有断点
- 在编辑器边缘的断点上右键单击并选择编辑断点。
- 在运行和调试视图的断点 (BREAKPOINTS) 部分中，选择现有断点旁边的铅笔图标。
-
编辑条件（表达式、命中次数或等待断点）。
如果调试器不支持条件断点，则添加条件断点和编辑条件操作不可用。
触发式断点
触发断点是一种条件断点，当命中另一个断点时它会被启用。在诊断代码中仅在满足特定前提条件后才发生的故障情况时，它们非常有用。
可以通过在字形边距（行号槽）上右键单击，选择 添加触发式断点...，然后选择由哪个断点来启用该断点。
内联断点
内联断点仅在执行到达与内联断机关联的列时才会被命中。这在调试包含单行多个语句的压缩代码时非常有用。
可以使用 ⇧F9 (Windows, Linux Shift+F9) 或在调试会话期间通过上下文菜单设置内联断点。内联断点直接显示在编辑器的代码行中。
内联断点也可以具有条件。可以通过编辑器左侧边缘的上下文菜单编辑同一行上的多个断点。
函数断点
调试器可以支持通过指定函数名称来创建断点，而不是直接将断点放置在源代码中。这在源码不可用但已知函数名的情境下非常有用。
要创建函数断点，请选择断点 (BREAKPOINTS) 部分标题中的 + 按钮并输入函数名。函数断点在断点 (BREAKPOINTS) 部分中显示为带有红色三角形。
数据断点
如果调试器支持数据断点，则可以从变量 (VARIABLES) 视图的上下文菜单中设置它们。在值改变/读取/访问时中断命令会添加一个数据断点，当底层变量的值改变/被读取/被访问时会命中该断点。数据断点在断点 (BREAKPOINTS) 部分中显示为红色六边形。
日志点 (Logpoints)
日志点是断点的一种变体，它不会中断到调试器中，而是向调试控制台记录一条消息。日志点可以帮助你节省时间，无需在代码中添加或删除日志记录语句。
日志点由菱形图标表示。日志消息是纯文本，但也可以包含在大括号 ('{}') 内要求求值的表达式。
要添加日志点，请在编辑器左侧边缘右键单击并选择添加日志点，或者使用命令面板中的调试: 添加日志点... 命令 (⇧⌘P (Windows, Linux Ctrl+Shift+P))。你还可以配置 debug.gutterMiddleClickAction 设置，以便在编辑器空白槽中按下鼠标中键时切换日志点。
就像常规断点一样，日志点可以启用或禁用，也可以由条件和/或命中次数控制。
调试器扩展可以选择是否实现日志点。
数据检查
运行和调试视图
在调试会话期间，你可以在运行和调试视图的变量 (VARIABLES) 部分中检查变量和表达式，或者通过将鼠标悬停在编辑器中的源代码上来检查。变量值和表达式求值相对于调用堆栈 (CALL STACK) 部分中所选的堆栈帧。
要在调试会话期间更改变量的值，请在变量 (VARIABLES) 部分中右键单击该变量并选择设置值 (Enter (Windows, Linux F2))。
此外，你可以使用复制值操作来复制变量的值，或使用复制为表达式操作来复制用于访问变量的表达式。然后，你可以在监视 (WATCH) 部分中使用此表达式。
也可以在运行和调试视图的监视 (WATCH) 部分中对变量和表达式进行求值和监视。
要按名称或值过滤变量，请在焦点位于变量 (VARIABLES) 部分时使用 ⌥⌘F (Windows, Linux Ctrl+Alt+F) 键盘快捷键，并键入搜索词。
调试控制台 REPL
可以使用调试控制台 REPL（读取-求值-输出循环）功能对表达式进行求值。要打开调试控制台，请使用调试窗格顶部的调试控制台操作，或使用视图: 调试控制台命令 (⇧⌘Y (Windows, Linux Ctrl+Shift+Y))。
按下 Enter 后会对表达式进行求值，并且调试控制台 REPL 会在你键入时显示建议。如果需要输入多行，请在各行之间使用 Shift+Enter，然后使用 Enter 发送所有行进行求值。
调试控制台输入使用活动编辑器的模式，这意味着调试控制台输入支持语法着色、缩进、引号自动闭合和其他语言功能。
你必须处于活动调试会话中才能使用调试控制台 REPL。
多目标调试
对于涉及多个进程（例如客户端和服务器）的复杂场景，VS Code 支持多目标调试。启动第一个调试会话后，你可以启动另一个调试会话。一旦第二个会话启动并运行，VS Code 用户界面就会切换到多目标模式
-
各个会话现在作为顶级元素显示在调用堆栈 (CALL STACK) 视图中。
-
调试工具栏显示当前活动会话（所有其他会话都可以在下拉菜单中找到）。
-
调试操作（例如调试工具栏中的所有操作）都是针对活动会话执行的。可以通过使用调试工具栏中的下拉菜单或在调用堆栈 (CALL STACK) 视图中选择不同的元素来更改活动会话。
远程调试
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 中的调试。
要了解有关 VS Code 中 Copilot 和 AI 辅助调试的更多信息
要了解通过 VS Code 扩展对其他编程语言的调试支持
要了解 VS Code 的任务运行支持，请转到
- 任务 - 描述如何使用 Gulp、Grunt 和 Jake 运行任务，以及如何显示错误和警告。
要编写你自己的调试器扩展，请访问
- 调试器扩展 - 使用模拟示例说明创建 VS Code 调试扩展所需的步骤。
常见问题
支持哪些调试场景？
VS Code 在 Linux、macOS 和 Windows 上开箱即用地支持基于 Node.js 的应用程序调试。Marketplace 中提供的 VS Code 扩展支持许多其他场景。