使用 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)
终止当前程序执行,并使用当前的运行配置重新开始调试。
停止 ⇧F5 (Windows, Linux Shift+F5)
终止当前程序执行。
如果您的调试会话涉及多个目标(例如,客户端和服务器),调试工具栏会显示会话列表并允许您在它们之间切换。
提示使用 debug.toolBarLocation 设置来控制调试工具栏的位置。它可以是默认的 浮动,停靠在运行和调试视图,或者 隐藏。浮动的调试工具栏可以水平拖动,也可以拖动到编辑器区域(距离顶部边缘一定距离内)。
Breakpoints
断点是暂停代码执行在特定点的特殊标记,以便您可以检查应用程序在该点的状态。VS Code 支持几种类型的断点。
设置断点
要设置或取消设置断点,请单击编辑器装订区,或在当前行上按 F9。
编辑器装订区中的断点通常显示为填充的红点。
禁用的断点显示为填充的灰色圆圈。
当调试会话开始时,无法在调试器中注册的断点将变为灰色空心圆。如果在不支持实时编辑的调试会话运行时编辑了源文件,也可能发生这种情况。
可选地,可以通过启用 debug.showBreakpointsInOverviewRuler 设置来在编辑器的概览标尺中显示断点。
为了更好地控制您的断点,请使用运行和调试视图的断点部分。此部分列出了代码中的所有断点,并提供了额外的操作来管理它们。
断点类型
条件断点
VS Code 的一项强大调试功能是能够基于表达式、命中次数或两者的组合来设置条件。
表达式条件:当表达式计算结果为 true 时,会命中断点。
命中次数:*命中次数*控制在中断执行之前需要命中断点的次数。命中次数是否被遵守以及表达式的确切语法可能因调试器扩展而异。
等待断点:当命中另一个断点时,断点将被激活(触发断点)。
添加条件断点
创建条件断点
右键单击编辑器装订区,然后选择添加条件断点。
在命令面板中使用添加条件断点命令(⇧⌘P (Windows, Linux Ctrl+Shift+P))。
选择要设置的条件类型(表达式、命中次数或等待断点)。
为现有断点添加条件
编辑现有断点
右键单击编辑器装订区中的断点,然后选择编辑断点。
在运行和调试视图的断点部分,选择现有断点旁边的铅笔图标。
编辑条件(表达式、命中次数或等待断点)。
如果调试器不支持条件断点,则添加条件断点和编辑条件操作将不可用。
触发断点
触发断点是一种条件断点,当命中另一个断点时会启用。当诊断代码中仅在特定先决条件发生后才会出现失败情况时,它们可能很有用。
可以通过右键单击字形边距,选择 添加触发断点,然后选择哪个其他断点启用此断点来设置触发断点。
行内断点
行内断点仅在执行到达与行内断点关联的列时才会命中。这在调试最小化代码时很有用,因为最小化代码在一行中包含多个语句。
可以使用 ⇧F9 (Windows, Linux Shift+F9) 或在调试会话期间通过上下文菜单设置行内断点。行内断点在编辑器中内联显示。
行内断点也可以有条件。通过编辑器左侧装订区中的上下文菜单,可以编辑一行中的多个断点。
函数断点
调试器可以通过指定函数名来创建断点,而不是直接在源代码中放置断点。当源代码不可用但已知函数名时,这种情况很有用。
要创建函数断点,请选择断点部分的+按钮,然后输入函数名。函数断点在断点部分显示为红色三角形。
数据断点
如果调试器支持数据断点,可以从变量视图中的上下文菜单进行设置。值更改/读取/访问时中断命令会添加一个数据断点,当底层变量的值更改/读取/访问时会被命中。数据断点在断点部分显示为红色六边形。
日志点
日志点是断点的变体,它不会中断到调试器,而是将消息记录到调试控制台。日志点可以帮助您节省时间,而无需在代码中添加或删除日志记录语句。
日志点由菱形图标表示。日志消息是纯文本,但也可以包含在花括号({})中进行评估的表达式。
要添加日志点,请右键单击编辑器左侧装订区,然后选择添加日志点,或者在命令面板中使用调试:添加日志点…命令(⇧⌘P (Windows, Linux Ctrl+Shift+P))。您还可以配置 debug.gutterMiddleClickAction 设置,以便在编辑器装订区按鼠标中键时切换日志点。
与常规断点一样,日志点可以启用或禁用,也可以通过条件和/或命中次数进行控制。
注意调试器扩展可以选择实现日志点,也可以不实现。
数据检查
运行和调试视图
在调试会话期间,您可以在运行和调试视图的变量部分检查变量和表达式,或通过将鼠标悬停在编辑器中的源代码上来检查。变量值和表达式的求值相对于调用堆栈部分中选定的堆栈帧。
要更改调试会话期间变量的值,请右键单击变量部分中的变量,然后选择设置值(Enter (Windows, Linux F2))。
此外,您还可以使用复制值操作来复制变量的值,或使用复制为表达式操作来复制访问变量的表达式。然后,您可以在监视部分中使用此表达式。
变量和表达式也可以在运行和调试视图的监视部分进行评估和监视。
要按名称或值过滤变量,请在焦点位于变量部分时使用 ⌥⌘F (Windows, Linux Ctrl+Alt+F) 键盘快捷方式,然后键入搜索词。
调试控制台 REPL
可以使用调试控制台 REPL(读取-评估-打印循环)功能来评估表达式。要打开调试控制台,请使用调试窗格顶部的调试控制台操作,或使用查看:调试控制台命令(⇧⌘Y (Windows, Linux Ctrl+Shift+Y))。
按下 Enter 后,表达式将被评估,并且调试控制台 REPL 会在您键入时显示建议。如果您需要输入多行,请在行之间使用 Shift+Enter,然后使用 Enter 发送所有行进行评估。
调试控制台输入使用活动编辑器的模式,这意味着调试控制台输入支持语法着色、缩进、引号自动闭合和其他语言功能。
注意您必须处于活动调试会话中才能使用调试控制台 REPL。
多目标调试
对于涉及多个进程的复杂场景(例如,客户端和服务器),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 中查找调试器扩展,或在顶层运行菜单中选择安装其他调试器。
以下是一些流行的包含调试支持的扩展
后续步骤
要了解 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 扩展支持许多其他场景。
01/08/2026