本站点文档内容均翻译自code.visualstudio.com,仅供个人学习,如有差异请以官网为准。

使用Visual Studio Code调试代码

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

本文介绍了 VS Code 的调试功能以及如何在 VS Code 中开始调试。您还将了解如何在 VS Code 中使用 Copilot 来加速设置调试配置和启动调试会话。

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

调试器用户界面

以下图表显示了调试器用户界面的主要组成部分:

调试图

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

在你开始调试之前

  1. Visual Studio 市场安装调试扩展,适用于您的语言或运行时。

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

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

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

    小贴士

    VS Code 的 Copilot 可以帮助生成launch.json 文件给你。更多信息,请参见 使用 Copilot 生成调试配置

  3. 在你的代码中设置断点。

    断点是一个标记,您可以在代码的某一行上设置它,以指示调试器在到达该行时暂停执行。您可以通过点击编辑器中行号旁边的空白区域来设置断点。

    有关断点的更多信息,请参见使用断点

开始调试会话

要开始在 VS Code 中进行调试,请执行以下步骤:

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

  2. F5键开始调试会话,或在运行和调试视图中选择运行和调试工作台.视图.调试)。

    简化的初始运行和调试视图

    对于像附加到正在运行的进程这样的更复杂的调试场景,你需要创建一个launch.json 文件用于指定调试器配置。获取有关 调试配置 的更多信息。

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

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

  4. 当调试会话开始时,调试控制台面板会显示并显示调试输出,并且状态栏会改变颜色(默认颜色主题为橙色)。

    调试会话

  5. 状态栏中的调试状态显示当前活动的调试配置。选择调试状态以更改活动的启动配置,并在无需打开运行和调试视图的情况下开始调试。

    调试状态

调试操作

一旦调试会话开始,调试工具栏就会出现在Windows顶部。工具栏包含控制调试会话流程的动作,例如逐行执行代码、暂停执行和停止调试会话。

显示调试工具栏的截图,带有控制调试会话流程的图标。

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

行动 描述
继续 / 暂停
F5
继续:恢复程序/脚本的正常执行(直到下一个断点)。
暂停:检查当前行正在执行的代码,并逐行调试。
单步执行
F10
将下一个方法作为一个命令执行,不检查也不遵循其组成部分步骤。
走进
F11
输入下一个方法并逐行跟踪其执行。
单步执行
⇧F11 (Windows, Linux Shift+F11)
当位于方法或子程序内部时,通过将当前方法的剩余行作为单个命令完成,返回到更早的执行上下文。
重启
⇧⌘F5 (Windows, Linux Ctrl+Shift+F5)
终止当前程序执行,并使用当前运行配置重新开始调试。
停止
⇧F5 (Windows, Linux Shift+F5)
终止当前程序执行。

如果你的调试会话涉及多个目标(例如,客户端和服务器),调试工具栏会显示会话列表并允许你在它们之间切换。

小贴士

使用

调试.工具栏位置
  • 在 VS Code 中打开
  • 在 VS Code Insiders 中打开
设置以控制调试工具栏的位置。它可以是默认位置。漂浮停靠运行和调试 视图,或 隐藏一个浮动的调试工具栏可以水平拖动,也可以向下拖动到编辑区域(从顶部边缘向下一定距离)。

断点

断点是一种特殊的标记,它在特定点暂停你的代码执行,这样你就可以在该点检查你的应用程序的状态。VS Code 支持多种类型的断点。

设置断点

要设置或取消断点,请点击编辑器边缘或使用F9在当前行上。

  • 编辑器边缘的断点通常显示为红色实心圆。
  • 禁用的断点有一个实心的灰色圆圈。
  • 当调试会话开始时,无法与调试器注册的断点会更改为灰色空心圆。如果在没有实时编辑支持的调试会话运行时编辑源文件,也会发生同样的情况。

可选地,可以通过启用设置在编辑器的概览标尺中显示断点

调试.在概览标尺中显示断点
  • 在 VS Code 中打开
  • 在 VS Code Insiders 中打开
输入:

概览标记中的断点

为了更好地控制你的断点,请使用运行和调试视图的断点部分。此部分列出了代码中的所有断点,并提供额外的操作来管理它们。

断点

小贴士

如果您更喜欢以树形视图查看断点,并按文件分组,请配置

调试断点视图呈现
  • 在 VS Code 中打开
  • 在 VS Code Insiders 中打开
设置为输入:.

断点类型

条件断点

强大的 VS Code 调试功能之一是能够根据表达式、命中次数或两者的组合设置条件。

  • 表达式条件:每当表达式求值结果为输入:.
  • 命中计数:命中次数控制在断点需要被命中多少次之前中断执行。是否遵守命中计数以及表达式的具体语法可能因调试器扩展而异。
  • 等待断点:当另一个断点被触发时(触发断点),该断点将被激活。

要添加条件断点:

  1. 创建条件断点

    • 右键单击编辑器边缘并选择“添加条件断点”。
    • 在命令面板中使用添加条件断点命令 (⇧⌘P (Windows, Linux Ctrl+Shift+P))。
  2. 选择您要设置的条件类型(表达式、命中计数或等待断点)。

    点击数

要为现有的断点添加条件:

  1. 编辑现有断点

    • 右键单击编辑器边缘的断点并选择“编辑断点”。
    • 选择断点部分运行和调试视图中现有断点旁边的铅笔图标。
  2. 编辑条件(表达式、命中计数或等待断点)。

如果调试器不支持条件断点,那么添加条件断点编辑条件操作将不可用。

触发断点

触发断点是一种条件断点,当另一个断点被触发时,它会被启用。当诊断仅在满足特定前提条件后才会发生的代码中的故障情况时,它们非常有用。

通过右键单击字形边缘,选择添加触发断点,然后选择哪个其他断点启用该断点。

内联断点

内联断点仅在执行到达与内联断点相关的列时才会被触发。这在调试压缩代码时非常有用,压缩代码在同一行中包含多个语句。

可以使用⇧F9(Windows, LinuxShift+F9或在调试会话期间通过上下文菜单设置内联断点。内联断点在编辑器中内联显示。

内联断点也可以有条件。通过编辑器左边缘的上下文菜单,可以对一行上的多个断点进行编辑。

函数断点

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

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

数据断点

如果调试器支持数据断点,它们可以从变量视图的上下文菜单中设置。 在值更改/读取/访问时暂停命令会在底层变量的值更改/读取/访问时添加一个数据断点。数据断点在断点部分显示为红色六边形。

日志点数

日志点是一种不中断进入调试器而是记录一条消息到调试控制台的断点变体。日志点可以帮助你节省时间,因为你不需要在代码中添加或删除日志语句。

日志点由一个菱形图标表示。日志消息是纯文本,但也可以包含用花括号('{}')括起来的要评估的表达式。

要添加日志点,请在编辑器左侧空白处右键单击并选择添加日志点,或在命令面板中使用调试:添加日志点...命令(⇧⌘P(Windows, Linux Ctrl+Shift+P)。您还可以配置设置

调试. gutter中间点击动作
  • 在 VS Code 中打开
  • 在 VS Code Insiders 中打开
在编辑器的边栏中按中键时切换日志点。

日志点数

就像常规的断点一样,日志点可以启用或禁用,并且也可以通过条件和/或命中次数进行控制。

注意

调试器扩展可以选择是否实现日志点。

数据检查

运行和调试视图

在调试过程中,您可以在变量部分的运行和调试视图中检查变量和表达式,或者在编辑器中悬停在其源代码上。变量值和表达式评估相对于调用堆栈部分中选择的堆栈框架。

运行和调试视图中变量部分的截图。

在调试会话期间更改变量的值,请右键单击变量部分中的变量,然后选择设置值回车(Windows, Linux F2)。

此外,您可以使用复制值操作来复制变量的值,或者使用以表达式复制操作来复制一个表达式以访问变量。然后,您可以将此表达式用于观察部分。

变量和表达式也可以在运行和调试视图的观察部分中进行评估和监视。

运行和调试视图中观察部分的截图。

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

变量部分过滤器控制的截图。

调试控制台 REPL

表达式可以用调试控制台 REPL (读-评估-打印循环) 功能进行评估。要打开调试控制台,请使用调试控制台操作,位于调试面板顶部,或者使用视图:调试控制台命令 (⇧⌘Y (Windows, Linux Ctrl+Shift+Y))。

表达式在您按回车键后会被评估,并且调试控制台REPL会在您输入时显示建议。如果您需要输入多行,请在行之间使用Shift+回车,然后用回车发送所有行进行评估。

调试控制台输入使用活动编辑器的模式,这意味着调试控制台输入支持语法着色、缩进、自动关闭引号和其他语言特性。

调试控制台的截图。

注意

您必须在活跃的调试会话中才能使用调试控制台REPL。

多目标调试

对于涉及多个进程的复杂场景(例如,客户端和服务器),VS Code 支持多目标调试。在你启动了第一次调试会话之后,可以启动另一个调试会话。一旦第二个会话启动并运行,VS Code 用户界面会切换到多目标模式

  • 单独的会话现在显示为调用堆栈视图中的顶级元素。

    调用栈视图

  • 调试工具栏显示当前活动会话(所有其他会话在下拉菜单中可用)。

    调试操作小部件

  • 调试操作(例如调试工具栏中的所有操作)是在活动会话上执行的。活动会话可以通过使用调试工具栏中的下拉菜单或选择调用堆栈视图中的不同元素来更改。

远程调试

VS Code 不支持所有语言的内置远程调试。远程调试是您所使用的 debug 扩展的一个功能,您应该查阅该扩展在 Marketplace 上的支持页面和详细信息。

然而,有一个例外:VS Code 内置的 Node.js 调试器支持远程调试。有关详细信息,请参阅 Node.js 调试

调试器扩展

VS Code 内置了对 Node.js 运行时的调试支持,并且可以调试 JavaScript、TypeScript 或任何被编译成 JavaScript 的其他语言。

用于调试其他语言和运行时(包括PHPRubyGoC#PythonC++PowerShell许多其他语言),请查找调试器Visual Studio 市场 中的扩展,或在顶级运行菜单中选择 安装其他调试器

这些是一些包含调试支持的流行扩展:

下一步

要了解 VS Code 的 Node.js 调试支持,请参阅:

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

要观看调试基础知识的教程,请观看此视频:

要了解更多关于 Copilot 和 VS Code 中的 AI 助手调试的信息:

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

要了解 VS Code 的任务运行支持,请访问:

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

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

  • 调试器扩展 - 使用示例代码来说明创建 VS Code 调试扩展所需的步骤。

常见问题

支持哪些调试场景?

基于Node.js的应用程序的调试在Linux、macOS和Windows上默认支持VS Code。许多其他场景由VS Code扩展在市场中提供。