Visual Studio Code 调试配置

对于复杂的调试场景或应用程序,你需要创建一个 launch.json 文件来指定调试器配置。例如,指定应用程序入口点、附加到正在运行的应用程序或设置环境变量。

要了解有关 VS Code 调试的更多信息,请参阅 Visual Studio Code 中的调试

提示

VS Code 中的 Copilot 可以帮助你为项目创建启动配置。获取更多关于使用 Copilot 生成启动配置的信息。

启动配置

对于简单的应用程序或调试场景,你可以运行和调试程序而无需特定的调试配置。使用 F5 键,VS Code 将尝试运行你当前活动的文件。

然而,对于大多数调试场景,你需要创建一个调试配置(启动配置)。例如,指定应用程序入口点、附加到正在运行的应用程序或设置环境变量。创建启动配置文件也有好处,因为它允许你配置并保存调试设置的详细信息,并将其随项目一起存储。

VS Code 将调试配置信息存储在工作区(项目根文件夹)的 .vscode 文件夹中的 launch.json 文件中,或者存储在你的用户设置工作区设置中。

以下代码片段描述了一个用于调试 Node.js 应用程序的示例配置

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}\\app.js"
    }
  ]
}

VS Code 还支持复合启动配置,用于同时启动多个配置。

注意

即使你没有在 VS Code 中打开文件夹,也可以调试简单的应用程序,但无法管理启动配置和设置高级调试。

创建调试配置文件

创建初始 launch.json 文件

  1. 在“运行和调试”视图中选择创建 launch.json 文件

    launch configuration

  2. VS Code 会尝试检测你的调试环境。如果无法检测到,你可以手动选择它。

    debug environment selector

    根据所选的调试环境,VS Code 会在 launch.json 文件中创建一个初始配置。

  3. 在资源管理器视图(⇧⌘E (Windows, Linux Ctrl+Shift+E))中,请注意 VS Code 创建了一个 .vscode 文件夹并将 launch.json 文件添加到了你的工作区。

    launch.json in Explorer

你现在可以编辑 launch.json 文件来添加更多配置或修改现有配置。

向 launch.json 添加配置

要向现有的 launch.json 添加新配置,请使用以下技术之一:

  • 点击添加配置按钮,然后选择一个代码片段以添加预定义的配置。
  • 如果光标位于 configurations 数组内,请使用 IntelliSense。
  • 选择运行 > 添加配置菜单选项。

launch json suggestions

使用 AI 生成启动配置

利用 VS Code 中的 Copilot,可以加快为项目创建启动配置的过程。要使用 Copilot 生成启动配置:

  1. 使用 ⌃⌘I (Windows, Linux Ctrl+Alt+I) 打开聊天视图,或从标题栏的 Copilot 菜单中选择打开聊天

  2. 输入 /startDebugging 聊天提示词以生成调试配置。

    或者,你也可以输入自定义提示词,例如 generate a debug config for an express app #codebase

    如果你的工作区包含不同语言的文件,这会很有用。

    注意

    #codebase 聊天变量为 Copilot 提供了你项目的上下文,这有助于它生成更准确的响应。

  3. 应用建议的配置,然后开始调试。

使用启动配置开始调试会话

使用启动配置开始调试会话

  1. 使用运行和调试视图中的配置下拉菜单选择名为 Launch Program 的配置。

    可用配置列表与 launch.json 文件中的配置一致。

    Screenshot that shows the launch configuration dropdown.

  2. 使用 F5 开始调试会话,或在运行和调试视图中选择开始调试(播放图标)。

或者,你可以通过命令面板⇧⌘P (Windows, Linux Ctrl+Shift+P))运行你的配置,方法是筛选 Debug: Select and Start Debugging 或输入 'debug ' 并选择你想调试的配置。

启动配置与附加配置的区别

在 VS Code 中,有两种核心调试模式:启动 (Launch)附加 (Attach),它们分别处理两种不同的工作流程和开发者群体。根据你的工作流程,可能很难判断哪种类型的配置适合你的项目。

如果你有浏览器开发工具的背景,可能不习惯“从工具中启动”,因为你的浏览器实例已经打开了。当你打开 DevTools 时,你只是将 DevTools 附加到已打开的浏览器标签页上。另一方面,如果你有服务器或桌面开发背景,让编辑器为你启动进程,并让编辑器自动将调试器附加到新启动的进程上,这是很正常的。

解释启动配置与附加配置之间区别的最好方法是:将启动配置视为如何在 VS Code 附加到应用程序之前以调试模式启动应用程序的配方,而附加配置则是如何将 VS Code 的调试器连接到已经在运行的应用程序或进程的配方。

VS Code 调试器通常支持以调试模式启动程序或附加到已经在调试模式下运行的程序。根据请求类型(attachlaunch),需要不同的属性,VS Code 的 launch.json 验证和建议功能应该会对你有所帮助。

Launch.json 属性

有许多 launch.json 属性可以帮助支持不同的调试器和调试场景。一旦你指定了 type 属性的值,就可以使用 IntelliSense(⌃Space (Windows, Linux Ctrl+Space))查看可用属性列表。启动配置中可用的属性因调试器而异。

launch json suggestions

一个调试器可用的属性不会自动适用于其他调试器。如果你在启动配置中看到红色波浪线,请将鼠标悬停在上面以了解问题所在,并在开始调试会话前尝试修复它们。

以下属性是每个启动配置所必需的

  • type - 用于此启动配置的调试器类型。每个已安装的调试扩展都会引入一种类型:例如,内置 Node 调试器的 node,或者 PHP 和 Go 扩展的 phpgo
  • request - 此启动配置的请求类型。目前支持 launch Open in VS Code Open in VS Code Insiders attach
  • name - 出现在调试启动配置下拉菜单中,对读者友好的名称。

以下是所有启动配置均可使用的可选属性

  • presentation - 通过使用 presentation 对象中的 ordergrouphidden 属性,你可以在调试配置下拉菜单和调试快速选择中对配置和复合配置进行排序、分组和隐藏。你也可以在特定于平台的章节windowslinuxosx)中设置 presentation,以控制针对特定操作系统的可见性。
  • preLaunchTask - 要在调试会话开始前启动任务,请将此属性设置为 tasks.json(在工作区的 .vscode 文件夹中)中指定的任务标签。或者,将其设置为 ${defaultBuildTask} 以使用默认构建任务。
  • postDebugTask - 要在调试会话结束时启动任务,请将此属性设置为 tasks.json(在工作区的 .vscode 文件夹中)中指定的任务名称。
  • internalConsoleOptions - 此属性控制调试会话期间“调试控制台”面板的可见性。
  • debugServer - 仅供调试扩展作者使用:此属性允许你连接到指定的端口,而不是启动调试适配器。
  • serverReadyAction - 如果希望在被调试程序向调试控制台或集成终端输出特定消息时在 Web 浏览器中打开 URL。详细信息请参阅下方的调试服务器程序时自动打开 URI 部分。

许多调试器支持以下部分属性

  • program - 启动调试器时要运行的可执行文件或文件
  • args - 传递给待调试程序的参数
  • env - 环境变量(可以使用 null 值来“取消定义”变量)
  • envFile - 包含环境变量的 dotenv 文件路径
  • cwd - 用于查找依赖项和其他文件的当前工作目录
  • port - 附加到正在运行的进程时的端口
  • stopOnEntry - 程序启动时立即中断
  • console - 要使用的控制台类型,例如 internalConsoleintegratedTerminalexternalTerminal

变量替换

VS Code 将常用路径和其他值作为变量提供,并支持在 launch.json 中的字符串内进行变量替换。这意味着你无需在调试配置中使用绝对路径。例如,${workspaceFolder} 提供工作区文件夹的根路径,${file} 提供活动编辑器中打开的文件,${env:Name} 提供环境变量“Name”。

你可以在变量参考中查看预定义变量的完整列表,或者通过在 launch.json 字符串属性内调用 IntelliSense 来查看。

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",
  "cwd": "${workspaceFolder}",
  "args": ["${env:USERNAME}"]
}

特定于平台的属性

VS Code 支持根据调试器运行的操作系统定义调试配置设置(例如,传递给程序的参数)。为此,请在 launch.json 文件中放入一个特定于平台的文本,并在该文本中指定相应的属性。

以下示例展示了如何在 Windows 上以不同方式向程序传递 "args"

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/node_modules/gulp/bin/gulpfile.js",
      "args": ["myFolder/path/app.js"],
      "windows": {
        "args": ["myFolder\\path\\app.js"]
      }
    }
  ]
}

有效的操作系统属性有:Windows 的 "windows",Linux 的 "linux",以及 macOS 的 "osx"。在特定于操作系统的作用域内定义的属性会覆盖全局作用域内定义的属性。

type 属性不能放在特定于平台的章节中,因为在远程调试场景中,type 会间接确定平台,这会导致循环依赖。

在以下示例中,调试程序总是在入口处停止,但在 macOS 上除外

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/node_modules/gulp/bin/gulpfile.js",
      "stopOnEntry": true,
      "osx": {
        "stopOnEntry": false
      }
    }
  ]
}

你还可以使用特定于平台的章节来控制 presentation 属性。在以下示例中,该配置在 macOS 上的调试下拉菜单中被隐藏

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/app.js",
      "osx": {
        "presentation": {
          "hidden": true
        }
      }
    }
  ]
}

全局启动配置

你可以定义跨所有工作区可用的启动配置。要指定全局启动配置,请在你的 launch Open in VS Code Open in VS Code Insiders 用户设置中添加一个启动配置对象。此 launch 配置随后将在你的工作区之间共享。例如:

"launch": {
    "version": "0.2.0",
    "configurations": [{
        "type": "node",
        "request": "launch",
        "name": "Launch Program",
        "program": "${file}"
    }]
}

将输入/输出重定向到调试目标或从中重定向

重定向输入/输出是特定于调试器或运行时的,因此 VS Code 没有适用于所有调试器的内置解决方案。

以下是你可以考虑的两种方法

  • 在终端或命令提示符中手动启动待调试程序(“调试目标”),并根据需要重定向输入/输出。确保向调试目标传递了适当的命令行选项,以便调试器可以附加到它。创建并运行一个附加到调试目标的“附加 (attach)”调试配置。

  • 如果你使用的调试器扩展可以在 VS Code 的集成终端(或外部终端)中运行调试目标,你可以尝试将 shell 重定向语法(例如 "<" 或 ">")作为参数传递。

    这是一个 launch.json 配置示例

    {
      "name": "launch program that reads a file from stdin",
      "type": "node",
      "request": "launch",
      "program": "program.js",
      "console": "integratedTerminal",
      "args": ["<", "in.txt"]
    }
    

    此方法要求 < 语法通过调试器扩展传递,并以未修改的状态进入集成终端。

复合启动配置

启动多个调试会话的另一种方法是使用复合启动配置。你可以在 launch.json 文件的 compounds 属性中定义复合启动配置。

使用 configurations 属性列出需要并行启动的两个或多个启动配置的名称。

(可选)指定一个在单个调试会话启动前运行的 preLaunchTask 任务。布尔标志 stopAll 控制手动终止一个会话是否会停止所有复合会话。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Server",
      "program": "${workspaceFolder}/server.js"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Client",
      "program": "${workspaceFolder}/client.js"
    }
  ],
  "compounds": [
    {
      "name": "Server/Client",
      "configurations": ["Server", "Client"],
      "preLaunchTask": "${defaultBuildTask}",
      "stopAll": true
    }
  ]
}

复合启动配置也会显示在启动配置下拉菜单中。

调试服务器程序时自动打开 URI

开发 Web 程序通常需要打开特定的 URL 才能在调试器中命中服务器代码。VS Code 有一个名为 "serverReadyAction" 的内置功能来自动化此任务。

这是一个简单的 Node.js Express 应用程序示例

var express = require('express');
var app = express();

app.get('/', function(req, res) {
  res.send('Hello World!');
});

app.listen(3000, function() {
  console.log('Example app listening on port 3000!');
});

此应用程序首先为 "/" URL 安装了一个 "Hello World" 处理程序,然后开始监听 3000 端口上的 HTTP 连接。该端口会在调试控制台中宣布,通常情况下,开发人员现在会输入 https://:3000 到他们的浏览器中。

serverReadyAction 功能允许向任何启动配置添加结构化属性 serverReadyAction,并选择要执行的“操作”

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",

  "serverReadyAction": {
    "pattern": "listening on port ([0-9]+)",
    "uriFormat": "https://:%s",
    "action": "openExternally"
  }
}

在此,pattern 属性描述了用于匹配程序输出字符串(声明端口)的正则表达式。端口号的模式被放在括号中,以便它可以作为正则表达式捕获组使用。在这个例子中,我们只提取端口号,但也可以提取完整的 URI。

uriFormat 属性描述了如何将端口号转换为 URI。第一个 %s 会被匹配模式的第一个捕获组替换。

生成的 URI 随后会在 VS Code 外部(“外部”)使用为该 URI 方案配置的标准应用程序打开。

通过 Microsoft Edge 或 Chrome 触发调试

或者,可以将 action 设置为 debugWithEdgedebugWithChrome。在这种模式下,可以添加一个传递给 Chrome 或 Microsoft Edge 调试会话的 webRoot 属性。

为了简化操作,大多数属性都是可选的,我们使用以下备用值

  • pattern: "listening on.* (https?://\\S+|[0-9]+)",它匹配常用的消息,如 "listening on port 3000" 或 "Now listening on: https://:5001"。
  • uriFormat: "https://:%s"
  • webRoot: "${workspaceFolder}"

触发任意启动配置

在某些情况下,你可能需要为浏览器调试会话配置更多选项,或者完全使用不同的调试器。你可以通过将 action 设置为 startDebugging 并设置 name 属性(指向 pattern 匹配时要启动的启动配置名称)来实现。

命名的启动配置必须与带有 serverReadyAction 的配置位于同一个文件或文件夹中。

以下是 serverReadyAction 功能的实际操作

后续步骤

  • 任务 (Tasks) - 描述如何使用 Gulp、Grunt 和 Jake 运行任务,以及如何显示错误和警告。
  • 变量参考 - 描述 VS Code 中可用的变量。

常见问题

在“运行和调试”视图的下拉菜单中看不到任何启动配置。出了什么问题?

最常见的问题是你没有设置 launch.json 或者该文件中存在语法错误。另外,你可能需要打开一个文件夹,因为无文件夹调试模式不支持启动配置。

© . This site is unofficial and not affiliated with Microsoft.