使用 Visual Studio Code 调试代码

最新推荐文章于 2025-12-19 17:14:26 发布

转载最新推荐文章于 2025-12-19 17:14:26 发布 · 33 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://vscode.js.cn/docs/debugtest/debugging

文章标签：

#vscode #ide #编辑器

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

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

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

调试器用户界面

下图显示了调试器用户界面的主要组件

Debugging diagram

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

开始调试之前

从 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	进入下一个方法以逐行跟踪其执行。
单步跳出 Shift+F11	在方法或子程序内部时，通过将当前方法的剩余行当作单个命令完成，返回到早前的执行上下文。
重启 Ctrl+Shift+F5	终止当前程序执行，并使用当前运行配置再次开始调试。
停止 Shift+F5	终止当前程序执行。