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

在 VS Code 中进行 Node.js 调试

Visual Studio Code 编辑器内置了对 Node.js 运行时的调试支持,并且可以调试被转译成 JavaScript 的 JavaScript、TypeScript 等多种语言。通过 VS Code 提供的适当启动配置默认值和片段,设置一个用于 Node.js 调试的项目非常简单。

有几种方法可以在 VS Code 中调试你的 Node.js 程序:

自动附加

如果自动附加功能已启用,Node 调试器会自动附加到从 VS Code 集成终端启动的某些 Node.js 进程。要启用该功能,请使用切换自动附加命令,从命令面板(⇧⌘P(Windows, Linux Ctrl+Shift+P),或者,如果已经激活,请使用自动附加状态栏项目。

自动附加有三种模式,您可以在生成的快速选择中选择或通过debug.javascript.autoAttachFilter设置进行选择:

  • 聪明- 如果你在你的脚本之外执行节点模块 文件夹或使用常见的'runner'脚本,如mocha或ts-node,那么这个过程将被调试。你可以通过自动附加智能模式设置来配置'runner'脚本的允许列表 (调试.JavaScript.自动附加智能模式)。
  • 总是- 所有在集成终端中启动的 Node.js 进程将被调试。
  • 仅使用旗帜- 仅处理使用 启动的过程--检查--检查中断旗帜将被调试。

启用自动附加后,您需要通过点击终端右上角的⚠图标来重启终端,或者直接创建一个新终端。然后,调试器应该在不到一秒的时间内附加到您的程序:

自动附加

当自动附加开启时,自动附加该图标将出现在 VS Code Windows底部的状态栏中。点击它可以更改自动附加模式,或暂时将其关闭。如果你正在运行一些不需要调试的一次性程序,暂时关闭自动附加会很有用,但你又不想完全禁用该功能。

附加配置

其他启动配置属性

您可以应用 通常在 launch.json 中找到的其他属性 到自动附加在 debug.javascript.terminalOptions 设置中。例如,要将 node 内部添加到您的 skipFiles 中,您可以在您的用户或工作区设置中添加以下内容:

  "debug.javascript.terminalOptions": {
    "skipFiles": [
      "<node_internals>/**"
    ]
  },

自动附加智能模式

聪明 自动附加模式,VS Code 将尝试附加到您的代码,而不是附加到您不感兴趣的调试构建工具。它通过将主脚本与 glob 模式 进行匹配来实现这一点。 glob 模式可以在 debug.javascript.autoAttachSmartPattern 设置中进行配置,其默认值为:

[
  '!**/node_modules/**', // 排除 node_modules 文件夹中的脚本
  '**/$KNOWN_TOOLS$/**' // 但包含一些常用工具
];

$已知工具$被替换为常见“代码运行器”的列表,例如ts-node摩卡艾娃,等等。如果这些设置不起作用,您可以修改此列表。例如,要排除摩卡包括我的酷测试运行器,你可以添加两行:

[
  '!**/node_modules/**',
  '**/$KNOWN_TOOLS$/**',
  '!**/node_modules/mocha/**', // 使用"!"来排除所有mocha节点模块中的脚本
  '**/node_modules/my-cool-test-runner/**'  // 包含自定义测试运行器中的脚本
];

JavaScript 调试终端

类似于自动附加,JavaScript调试终端将自动调试您在其中运行的任何Node.js进程。您可以通过在命令面板中运行调试:创建JavaScript调试终端命令来创建一个调试终端(kbs(工作台.显示命令)),或者通过选择创建JavaScript调试终端从终端切换下拉菜单。

创建调试终端

附加配置

其他启动配置属性

您可以将 通常在 launch.json 中找到的其他属性 应用到 debug.javascript.terminalOptions 设置中的调试终端。例如,要将 node 内部添加到您的 skipFiles 中,您可以在用户或工作区设置中添加以下内容:

"debug.javascript.terminalOptions": {
  "skipFiles": [
    "<node_internals>/**"
  ]
},

启动配置

Launch configs 是在 VS Code 中设置调试的传统方法,并为您提供最多配置选项以运行复杂的应用程序。

在本节中,我们将更详细地介绍用于更高级调试场景的配置和功能。您将找到有关使用源映射跳过外部代码、进行远程调试的说明,以及更多内容。

如果您想观看介绍视频,请参见在 VS Code 中开始调试

注意:如果你刚开始使用 VS Code,你可以了解一般的调试功能和创建 launch.json 配置文件在 调试 主题中。

启动配置属性

调试配置存储在launch.json文件位于您的工作区的.vscode 文件夹。关于调试配置文件的创建和使用的介绍,请参阅 调试 文章。

以下是常见的参考:launch.json Node.js 调试器特定的属性。您可以在 vscode-js-debug 选项 文档中查看完整的选项集。

以下属性在类型为的启动配置中受支持发射附加输入:

  • 输出文件 - 用于定位生成的JavaScript文件的全局模式数组。参见章节源映射
  • 解析源映射位置 - 一个数组 glob 模式,用于解析源映射的位置。参见章节源映射
  • 超时 - 重新启动会话时,如果超过这个毫秒数则放弃。参见 连接到 Node.js章节。
  • 停止进入- 程序启动时立即中断。
  • 本地根目录 - VS Code 的根目录。见下面的 远程调试 部分。
  • 远程根目录 - 节点的根目录。见下面的 远程调试 部分。
  • 智能步态- 尝试自动跳过不映射到源文件的代码。参见 智能单步执行章节。
  • 跳过文件 - 自动跳过这些 glob 模式 覆盖的文件。请参阅 跳过不感兴趣的代码 部分。
  • 追踪- 启用诊断输出。

这些属性仅适用于请求类型的启动配置发射输入:

  • 程序- 要调试的Node.js程序的绝对路径。
  • 参数- 传递给要调试的程序的参数。此属性的类型为数组,期望将单个参数作为数组元素。
  • 当前工作目录- 在此目录中启动程序进行调试。
  • 运行时可执行文件- 要使用的运行时可执行文件的绝对路径。默认是节点请参阅 “npm”和其他工具的启动配置支持
  • 运行参数- 传递给运行时可执行文件的可选参数。
  • 运行时版本 - 如果使用nvm(或nvm-windows)或nvs来管理Node.js版本,可以使用此属性来选择特定版本的Node.js。请参见下面的多版本支持部分。
  • 环境- 可选的环境变量。此属性将环境变量作为字符串类型的键/值对列表期望。
  • 环境文件 - 可选的路径,指向包含环境变量定义的文件。见下文 从外部文件加载环境变量
  • 控制台- 启动程序的控制台内部控制台集成终端外部终端) 见下文 Node Console
  • 输出捕获- 如果设置为标准, 过程的 stdout/stderr 输出将显示在调试控制台中,而不是监听调试端口的输出。这对于直接写入 stdout/stderr 流的程序或日志库很有用,而不是使用控制台.*应用程序编程接口。

此属性仅适用于请求类型的启动配置附加输入:

  • 重启 - 在终止时重新启动连接。参见 自动重启调试会话
  • 端口 - 要使用的调试端口。参见 连接到 Node.js远程调试章节。
  • 地址 - 调试端口的 TCP/IP 地址。参见 连接到 Node.js远程调试章节。
  • 进程ID- 调试器在发送 USR1 信号后尝试附加到此进程。在这种设置下,调试器可以附加到已经运行的不是以调试模式启动的进程。当使用进程ID属性,调试端口会根据Node.js版本(和使用的协议)自动确定,不能明确配置。所以不要指定一个端口属性。
  • 继续附加- 当我们附加到它时,是否继续暂停的进程。此选项在您使用 --检查中断输入:.

常见场景的启动配置

您可以在您的⌃Space (Windows, Linux Ctrl+Space)中触发IntelliSense (launch.json文件中查看常用Node.js调试场景的启动配置片段。

Node.js 启动配置片段

您还可以通过 添加配置... 按钮在右下角调出片段launch.json编辑器Windows。

添加配置按钮

以下片段可用:

  • 启动程序:以调试模式启动Node.js程序。
  • 通过npm启动:通过npm的‘debug’脚本启动Node.js程序。如果您在package.json中定义了启动配置,您可以使用npm debug脚本。npm脚本中使用的调试端口必须与片段中指定的端口相对应。
  • 附加:附加到本地运行的Node.js程序的调试端口。确保要调试的Node.js程序已在调试模式下启动,并且使用的调试端口与片段中指定的端口相同。
  • 附加到远程程序:附加到由指定的主机上运行的 Node.js 程序的调试端口地址属性。确保调试的Node.js程序已以调试模式启动,并且使用的调试端口与片段中指定的端口相同。为了帮助VS Code在你的工作区和远程主机的文件系统之间映射源文件,请确保指定正确的路径。本地根目录远程根目录属性。
  • 按进程ID附加:打开进程选择器以选择一个节点或gulp进程进行调试。使用此启动配置,您甚至可以附加到未以调试模式启动的节点或gulp进程。
  • Nodemon 配置:使用 nodemon 自动重新启动调试会话,每当 JavaScript 源文件更改时。确保你已经全局安装了 nodemon。请注意,终止调试会话只会终止要调试的程序,而不是 nodemon 本身。要终止 nodemon,请在集成终端中按 Ctrl+C
  • Mocha 测试:在 中调试 mocha 测试测试项目文件夹。确保您的项目已安装'mocha'。节点模块文件夹。
  • Yeoman 生成器:调试 Yeoman 生成器。该片段要求您指定生成器的名称。请确保您的项目在它的节点模块文件夹,并且通过运行已安装用于调试的生成项目npm 链接在项目文件夹中。
  • Gulp 任务:调试一个 Gulp 任务。确保你的项目中已经安装了 'gulp'。节点模块文件夹。
  • Electron Main:调试Electron应用程序的主Node.js进程。此片段假定Electron可执行文件已安装在node_modules/.bin工作区目录。

节点控制台

默认情况下,Node.js 调试会话在内部 VS Code 调试控制台中启动目标。由于调试控制台不支持需要从控制台读取输入的程序,您可以设置启用外部终端或使用 VS Code 集成终端。控制台在您的启动配置中设置属性外部终端集成终端分别。默认是内部控制台输入:.

在外部终端中,您可以通过配置来选择使用哪个终端程序。终端.外部.Windows执行终端.外部.osx执行,和终端.外部.linux执行设置。

对 'npm' 和其他工具的启动配置支持

与其直接用 node 命令启动 Node.js 程序,不如在 launch 配置中直接使用 'npm' 脚本或其他任务运行工具:

  • 您可以使用 PATH 上可用的任何程序(例如 'npm'、'mocha'、'gulp' 等)进行运行时可执行文件属性和参数可以通过传递运行参数输入:.
  • 您不需要设置程序如果您的npm脚本或其他工具隐式指定要启动的程序,请将此属性设置为。

让我们来看一个‘npm’的例子。如果您的package.json有一个‘debug’脚本,例如:

  "脚本": {
    "调试": "node myProgram.js"
  },

相应的启动配置如下所示:

{
  "name": "通过npm启动",
  "type": "node",
  "请求": "启动",
  "cwd": "${workspaceFolder}",
  "runtimeExecutable": "npm",
  "runtimeArgs": ["run-script", "debug"]
}

多版本支持

如果你正在使用 'nvm' (或 'nvm-windows') 来管理你的 Node.js 版本,你可以指定一个运行时版本在启动配置中选择特定版本的 Node.js 的属性:

{
  "type": "node",
  "request": "launch",
  "name": "Launch test",
  "runtimeVersion": "14",
  "program": "${workspaceFolder}/test.js"
}

如果你正在使用 nvs 来管理你的 Node.js 版本,你可以使用 运行时版本选择特定版本、架构和口味的Node.js,例如:

{
  "type": "node",
  "request": "launch",
  "name": "Launch test",
  "runtimeVersion": "chackracore/8.9.4/x64",
  "program": "${workspaceFolder}/test.js"
}

确保安装那些您希望使用的Node.js版本运行时版本属性,因为该功能不会自动下载和安装版本。例如,您需要运行类似于nvm 安装 7.10.1nvs add 7.10.1从集成终端添加"运行时版本": "7.10.1"到您的启动配置。

如果你省略次要和补丁版本,并且例如,你有"运行时版本": "14",那么最近14.x.y系统上安装的版本将被使用。

从外部文件加载环境变量

VS Code Node 调试器支持从文件加载环境变量并将它们传递给 Node.js 运行时。要使用此功能,请添加一个属性环境文件到你的启动配置并指定包含环境变量的文件的绝对路径:

   //...
   "envFile": "${workspaceFolder}/.env",
   "env": { "USER": "john doe" }
   //...

任何在环境变量中指定的环境字典将覆盖从文件加载的变量。

这是一个示例环境变量文件文件:

用户=doe
密码=abc123

# 一个注释

# 空值:
空=

# 在引述字符串中展开新行:
lines="foo\nbar"

附加到 Node.js

如果你想将 VS Code 调试器附加到外部 Node.js 程序,请按如下方式启动 Node.js:

节点 --inspect program.js

或者如果程序不应开始运行,而必须等待调试器附加:

节点 --inspect-brk program.js

选项将调试器附加到您的程序:

  • 打开一个“进程选择器”,列出所有潜在的候选进程,然后让你选择一个,或者
  • 创建一个“attach”配置,明确指定所有配置选项,然后按F5

让我们详细讨论这些选项:

附加到节点处理操作

从命令面板中执行附加到节点进程命令 (⇧⌘P (Windows, Linux Ctrl+Shift+P)) 会打开一个快速选择菜单,列出所有可用的Node.js调试器进程:

Node.js 进程选择器

在选择器中列出的各个进程显示了调试端口和进程ID。一旦你在该列表中选择你的Node.js进程,Node.js调试器将尝试附加到它。

除了Node.js进程,选择器还显示使用各种形式之一启动的其他程序。--检查参数。这使得可以附加到 Electron 或 VS Code 的辅助进程。

设置“附加”配置

这个选项需要更多的工作,但与前两个选项相比,它允许你明确配置各种调试配置选项。

最简单的“附加”配置如下所示:

{
  "name": "附加到进程",
  "type": "节点",
  "请求": "附加",
  "端口": 9229
}

端口9229是的,是默认的调试端口--检查--检查中断选项。要使用不同的端口(例如12345),将其添加到选项中,如下所示:--inspect=12345--inspect-brk=12345并更改端口在启动配置中匹配的属性。

要附加到没有以调试模式启动的 Node.js 进程,可以通过指定 Node.js 进程的进程 ID 作为字符串来实现:

{
  "name": "附加到进程",
  "type": "节点",
  "请求": "附加",
  "processId": "53426"
}

为了避免在启动配置中反复输入新的进程ID,Node调试支持一个命令变量选择过程这将打开进程选择器(来自上面)。

使用选择过程变量的启动配置如下所示:

{
  "name": "附加到进程",
  "type": "node",
  "request": "attach",
  "processId": "${command:PickProcess}"
}

停止调试

使用调试:停止操作(在调试工具栏或通过命令面板可用)可以停止调试会话。

如果调试会话是通过“附加”模式启动的(并且调试工具栏中的红色终止按钮显示重叠的“插头”),按停止将断开Node.js调试器与被调试程序的连接,然后程序继续执行。

如果调试会话处于“启动”模式,按停止会执行以下操作:

  1. 当第一次按下停止时,调试目标将通过发送一个请求优雅地关闭。信号情报信号。调试目标可以拦截此信号,并在必要时清理任何内容,然后关闭。如果该关闭代码中没有断点(或问题),调试目标和调试会话将终止。

  2. 然而,如果调试器在关闭代码中遇到断点,或者如果被调试程序无法自行终止,则调试会话将不会结束。在这种情况下,再次按停止将强制终止被调试程序及其子进程 (信号终止)。

如果你看到调试会话没有在你按下红色停止按钮时结束,那么再次按下按钮强制终止调试目标。

在 Windows 上,按 停止 会强制终止调试目标及其子进程。

源映射

VS Code 的 JavaScript 调试器支持源映射,这有助于调试编译后的语言,例如 TypeScript 或压缩/优化的 JavaScript。有了源映射,就可以逐行执行或在原始源中设置断点。如果原始源没有源映射,或者源映射损坏无法成功映射源和生成的 JavaScript,则断点会显示为未验证(灰色空心圆)。

源映射默认值为控制源映射功能。调试器总是尝试使用源映射(如果可以找到的话),因此,您甚至可以指定一个源文件(例如,app.ts)程序属性。如果你因为某些原因需要禁用源映射,你可以设置源映射归因于输入:.

工具配置

由于源映射并不总是自动创建,因此您应该确保配置您的编译器以创建它们。例如:

TypeScript

对于 TypeScript,您可以通过传递来启用 sourcemaps--源映射翻译结果:tsc,或通过添加"sourceMap": true在你的 tsconfig.json 文件中。

tsc -- sourceMapping --outDir bin app.ts

巴别

对于Babel,你将需要将sourceMaps选项设置为,或者通过--源映射编译代码时的选项。

```html
npxbabelscript.js --out-filescript-compiled.js --source-maps
```

Webpack

Webpack 有 许多 源映射选项。我们建议设置属性 开发工具: "源映射"在你的webpack.config.js为了获得最佳结果保真度,尽管您可以尝试其他设置,这会导致您的构建速度变慢。

此外,如果你在webpack中有一些额外的编译步骤,例如使用TypeScript加载器,你还需要确保这些步骤能够生成源映射。否则,webpack生成的源映射会将编译后的代码映射回加载器生成的代码,而不是真实的源代码。

源码映射发现

默认情况下,VS Code 会搜索整个工作区,排除节点模块,用于 sourcemaps。在大型工作区中,此搜索可能会很慢。您可以通过设置来配置 VS Code 将搜索源映射的位置输出文件属性在你的launch.json例如,此配置只会发现源映射.js文件在文件夹:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch TypeScript",
      "type": "node",
      "request": "launch",
      "program": "app.ts",
      "outFiles": ["${workspaceFolder}/bin/**/*.js"]
    }
  ]
}

请注意,输出文件应该与您的JavaScript文件匹配,而不是源映射文件(可能以 结尾)。.地图而不是.js)。

源映射分辨率

默认情况下,只有源映射在你的输出文件将得到解决。此行为用于防止依赖项干扰您设置的断点。例如,如果您有一个文件src/index.ts依赖有一个源映射引用了webpack:///./src/index.ts这将错误地解析到你的源文件,并可能导致意外的结果。

您可以通过设置来配置此行为解析源映射位置选项。如果设置为每个源映射将会被解析。例如,此配置将额外允许源映射在node_modules/某个依赖待解决:

  "resolveSourceMapLocations": [
    "out/**/*.js",
    "node_modules/some-dependency/**/*.js",
  ]

智能步进

随着智能步态属性设置为在启动配置中,VS Code会在调试器中单步执行代码时自动跳过“不感兴趣的代码”。 “不感兴趣的代码”是通过编译过程生成的代码,但不包含在源映射中,因此无法映射回原始源代码。 在调试器中单步执行源代码时,这段代码会阻碍你,因为它使调试器在原始源代码和你不感兴趣的生成代码之间切换。智能步态将自动执行未被源映射覆盖的代码,直到它到达再次被源映射覆盖的位置。

智能步进在处理像 TypeScript 中的 async/await 下编译这种情况时特别有用,编译器会注入一些辅助代码,这些代码不会被源映射覆盖。

智能步态此功能仅适用于从源生成的具有源映射的JavaScript代码。对于没有源的JavaScript,智能步进选项没有效果。

JavaScript 源映射技巧

在使用源映射进行调试时的一个常见问题是,你会设置一个断点,但它会变成灰色。如果你将鼠标悬停在它上面,你会看到消息,"断点被忽略,因为未找到生成的代码(源映射问题?)"那么现在该做什么呢?这可能由多种原因导致。首先,快速解释一下Node调试适配器如何处理源映射。

当你在...设置一个断点时app.ts调试适配器必须确定到路径app.js编译后的版本,即在Node中实际运行的文件,是你的TypeScript文件。但是,从这个开始,没有直接的方法来确定这一点。输入:.ts文件。相反,调试适配器使用输出文件属性在launch.json找到所有翻译的.js文件,并解析它们以获取源映射,其中包含其相关位置输入:.ts文件。

当你建立你的app.ts启用源映射的TypeScript文件,它会生成一个app.js.map文件,或源映射嵌入为 base64 编码字符串在底部的注释中app.js文件。要查找输入:.ts与该地图相关的文件,调试适配器查看源地图中的两个属性,来源,和源根目录源根目录是可选的 - 如果存在,它会附加到每个路径的开头来源,这是一个路径数组。结果是一个绝对或相对路径数组到输入:.ts文件。相对路径相对于源映射解析。

最后,调试适配器搜索完整的路径app.ts在该结果列表中输入:.ts文件。如果匹配,它已找到用于映射的源映射文件app.tsapp.js如果没有匹配项,则无法绑定断点,并且它会变成灰色。

以下是当您的断点变灰时可以尝试的一些方法:

  • 在调试时,运行调试:诊断断点问题命令。此命令将弹出一个工具,可以提供提示帮助您通过命令面板解决任何问题(⇧⌘P(Windows, Linux Ctrl+Shift+P)。
  • 你是否启用了源映射进行构建?确保有.js.map文件,或内联源映射.js文件。
  • 这些源根目录来源源映射中的属性正确吗?它们可以合并以获得正确的路径到输入:.ts文件?
  • 你是否在 VS Code 中打开了文件夹名称大小写不正确的文件夹?可以打开文件夹输入:foo/从命令行中像代码 FOO在这种情况下,源映射可能无法正确解析。
  • 尝试在 Stack Overflow 或在 GitHub 上提交问题来获取有关您特定设置的帮助。
  • 尝试添加一个调试器声明。如果它破裂进入输入:.ts文件在那里,但在那个位置的断点无法绑定,这在GitHub问题中包含是有用的信息。

覆盖源映射路径

调试器使用源映射路径覆盖要实现自定义源映射到磁盘路径映射。大多数工具都有良好的默认设置,但在高级情况下,您可能需要自定义它。默认路径覆盖是一个看起来像这样的对象映射:

{
  'webpack:///./~/*': "${workspaceFolder}/node_modules/*",
  'webpack:////*': '/*',
  'webpack://@?:*/?:*/*': "${workspaceFolder}/*",
  // and some more patterns...
}

这将源映射中的路径或URL从左到右映射。模式?:*是一个非贪婪、非捕获匹配,并且输入:*是一个贪婪捕获匹配。然后调试器替换相应的输入:*在右侧模式中,从源映射路径捕获片段。例如,上面示例中的最后一个模式将映射webpack://@my/package/foo/bar${工作区文件夹}/foo/bar输入:.

请注意,对于浏览器调试,网页根目录用作取代工作区文件夹默认情况下源映射路径覆盖输入:.

远程调试

注意: VS Code 现在拥有通用的 远程开发能力。使用 远程开发 扩展,在远程场景和容器中进行 Node.js 开发与在本地环境中的开发没有区别。这是远程调试 Node.js 程序的推荐方法。查看 入门 部分和 远程教程 以了解更多信息。

如果您无法使用任何远程开发扩展来调试您的Node.js程序,请参阅以下内容,了解如何从本地VS Code实例远程调试Node.js程序。

Node.js 调试器支持远程调试,您可以在另一台机器或容器上附加到正在运行的进程。通过以下方式指定远程主机地址属性。例如:

{
  "类型": "节点",
  "请求": "连接",
  "名称": "连接到远程设备",
  "地址": "192.168.148.2", // <- 这里是远程地址
  "端口": 9229
}

默认情况下,VS Code 会将远程 Node.js 文件夹中的调试源流式传输到本地 VS Code 并显示在只读编辑器中。您可以逐行执行此代码,但不能修改它。如果您希望 VS Code 从您的工作区打开可编辑的源代码,您可以设置远程和本地位置之间的映射。本地根目录和一个远程根目录该属性可以用于映射本地 VS Code 项目和(远程)Node.js 文件夹之间的路径。这即使在本地同一系统或跨不同操作系统时也能正常工作。每当需要将远程 Node.js 文件夹中的代码路径转换为本地 VS Code 路径时,远程根目录路径被路径剥离并替换为本地根目录对于反向转换,本地根目录路径被替换为远程根目录输入:.

{
  "type": "node",
  "request": "attach",
  "name": "附加到远程",
  "address": "要调试的进程的TCP/IP地址",
  "port": 9229,
  "localRoot": "${workspaceFolder}",
  "remoteRoot": "C:\\Users\\用户名\\项目\\服务器"
}

访问已加载的脚本

如果你需要在工作区之外的脚本中设置断点,而这个脚本因此无法通过正常的 VS Code 文件浏览轻松找到和打开,你可以通过 已加载脚本 视图在 运行和调试 视图中访问已加载的脚本:

已加载脚本浏览器

已加载脚本视图允许您通过输入脚本名称或在启用输入过滤时快速选择脚本或筛选列表。

脚本加载到只读编辑器中,您可以在其中设置断点。这些断点会在调试会话之间记住,但在调试会话运行时您只能访问脚本内容。

在源代码编辑时自动重新启动调试会话

重启 启动配置的属性控制着调试会话结束后Node.js调试器是否自动重启。如果您使用 nodemon 在文件更改时重启Node.js,那么这个功能很有用。设置启动配置属性 重启使节点调试器在Node.js终止后自动尝试重新连接到Node.js。

如果您已经开始了您的项目服务器.js 通过 nodemon 在命令行中像这样:

nodemon --inspect server.js

你可以通过以下启动配置将 VS Code 调试器附加到它上面:

{
  "name": "附加到节点",
  "类型": "节点",
  "请求": "附加",
  "重启": true,
  "端口": 9229
}

或者,您可以开始您的程序服务器.js 通过 nodemon 直接使用启动配置并附加 VS Code 调试器:

{
  "name": "Launch server.js via nodemon",
  "type": "node",
  "request": "launch",
  "runtimeExecutable": "nodemon",
  "program": "${workspaceFolder}/server.js",
  "console": "integratedTerminal",
  "internalConsoleOptions": "neverOpen"
}

提示: 按下 停止 按钮会停止调试会话并断开与 Node.js 的连接,但 nodemon (和 Node.js)将继续运行。要停止 nodemon,你需要从命令行中终止它(如果你使用 集成终端如上所示。

提示: 如果有语法错误,nodemon将无法成功启动Node.js,直到错误被修复。在这种情况下,VS Code将继续尝试连接到Node.js,但最终会放弃(10秒后)。为了避免这种情况,你可以通过添加来增加超时时间。超时具有较大值的属性(以毫秒为单位)。

重新启动框架

Node 调试器支持在堆栈框架处重新启动执行。这在您已经发现源代码中的问题并希望使用修改后的输入值重新运行一小部分代码时非常有用。停止并重新启动整个调试会话可能会很耗时。重新启动框架操作允许您在更改变量后,使用设置值操作重新进入当前函数:

重新启动框架

重启框架 不会回滚函数外部的状态突变,因此可能无法始终如预期般工作。

断点

条件断点

条件断点是仅在表达式返回真值时暂停的断点。您可以通过右键单击行号旁边的空白区域并选择“条件断点”来创建一个:

条件断点

日志点数

有时你只想在代码到达某个位置时记录一条消息或值,而不是暂停。你可以使用logpoint来实现。Logpoint不会暂停,而是到达时在调试控制台中记录一条消息。在JavaScript调试器中,你可以使用花括号将表达式插入到消息中,例如当前值是:{myVariable.property}输入:.

您可以通过在行号旁边的空白区域右键单击并选择“Logpoint”来创建一个。例如,这可能会记录类似于位置是 /usr/local输入:

日志点

命中计数断点

“命中次数条件”控制在断点需要被命中多少次之前,它才会“中断”执行。您可以通过右键单击行号旁边的空白区域,选择“条件断点”,然后切换到“命中次数”来设置命中次数断点。

命中计数断点

Node.js 调试器支持的命中计数语法是整数或运算符之一输入:<输入:<=输入:==>>=输入:%接着是一个整数。

一些例子:

  • >10每被击中10次后总是中断
  • <3仅在前两次命中时中断
  • 10与...相同>=10
  • 输入:%2每击中两次就中断

触发断点

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

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

断点验证

出于性能考虑,Node.js 在首次访问时才会惰性解析 JavaScript 文件中的函数。因此,断点在未被 Node.js 查看(解析)的源代码区域无法生效。

由于这种行为对于调试来说并不理想,VS Code 会传递--不偷懒自动为 Node.js 添加此选项。这防止了延迟解析,并确保在运行代码之前可以验证断点(因此它们不再“跳转”)。

自 以来--不偷懒该选项可能会显著增加调试目标的启动时间,您可以通过传递一个来轻松选择退出--懒惰作为一个运行参数属性。

这样做时,你会发现一些断点没有“粘”在线请求的行上,而是“跳”到已解析代码的下一行。为了避免混淆,VS Code 总是显示 Node.js 认为断点所在的位置。在断点部分,这些断点会显示一个箭头,位于请求行和实际行之间:

断点视图

当会话开始并在 Node.js 中注册断点时,或当会话已经运行并设置新断点时,会发生此断点验证。在这种情况下,断点可能会“跳转”到不同的位置。在 Node.js 解析完所有代码(例如,通过运行)之后,可以使用重新应用按钮在断点部分标题中轻松重新应用断点到请求的位置。这应该使断点“跳回”到请求的位置。

断点操作

跳过不有趣的代码

VS Code Node.js 调试有一个功能可以跳过你不希望逐行执行的源代码(也称为“仅我的代码”)。这个功能可以通过以下方式启用跳过文件在您的启动配置中添加属性。跳过文件 是一个 glob 模式 数组,用于跳过脚本路径。

例如,使用:

  "skipFiles": [
    "${workspaceFolder}/node_modules/**/*.js",
    "${workspaceFolder}/lib/**/*.js"
  ]

所有代码在节点模块项目中的文件夹将被跳过。跳过文件也适用于拨打时显示的位置控制台日志以及类似的方法:堆栈中的第一个未跳过的位置将显示在调试控制台的输出旁边。

Node.js 的内置核心模块可以通过“魔法名称”引用<节点内部>全局模式中。以下示例跳过所有内部模块:

  "skipFiles": [
     "<node_internals>/**/*.js"
   ]

确切的“跳过”规则如下:

  • 如果你进入一个跳过的文件,你不会在那里停止 - 你会停在下一个未跳过的执行行。
  • 如果你已经将选项设置为在抛出异常时暂停,那么除非它们冒泡到非跳过的文件,否则你不会在跳过的文件中抛出的异常处暂停。
  • 如果你在跳过的文件中设置了一个断点,你将会在那个断点处停止,并且你可以逐步执行直到你从该文件中逐步退出,此时正常的跳过行为将恢复。
  • 来自跳过文件的控制台消息的位置将显示为调用堆栈中的第一个非跳过位置。

跳过的源在调用堆栈视图中以“暗淡”样式显示:

跳过的源在调用堆栈视图中是变暗的

将鼠标悬停在变暗的条目上可以解释为什么堆栈框架被变暗。

调用堆栈上的上下文菜单项,切换跳过此文件 可以让您在运行时轻松跳过文件,而无需将其添加到启动配置中。此选项仅在当前调试会话中有效。您还可以使用它来停止跳过由跳过的文件。跳过文件在您的启动配置中选择选项。

注意: 遗产 协议调试器支持负向 模式,但它们必须 遵循 正向模式:正向模式添加到跳过的文件集合中,而负向模式从该集合中减去。

在下面(遗产协议仅限示例,跳过除'math'模块之外的所有模块:

"跳过文件": [
    "${workspaceFolder}/node_modules/**/*.js",
    "!${workspaceFolder}/node_modules/math/**/*.js"
]

注意: 遗产协议调试器必须模拟跳过文件 功能因为 V8 调试器协议 本身不支持它。这可能会导致单步执行性能缓慢。

调试 WebAssembly

JavaScript 调试器可以调试编译成 WebAssembly 的代码,如果它包含DWARF调试信息。许多工具链支持生成此信息:

  • C/C++ with Emscripten:使用-克标志以发出调试信息。
  • Zig:DWARF信息会在"Debug"构建模式下自动发出。
  • Rust:Rust 会发出 DWARF 调试信息。然而,wasm-pack 目前还不能 在构建过程中保留它。因此,而不是运行 wasm-pack build使用 common wasm-bindgen/wasm-pack 库的用户应手动构建,使用两个命令:
    1. cargo install wasm-bindgen-cli一次安装所需的命令行工具。
    2. cargo build --target wasm32-unknown-unknown建立你的图书馆。
    3. wasm-bindgen --keep-debug --out-dir pkg ./target/wasm32-unknown-unknown/debug/生成 WebAssembly 绑定,替换<库名>使用 Cargo.toml 中的名称并进行配置<额外参数>必要时。

在您的代码构建完成后,您将需要安装WebAssembly DWARF 调试扩展。此扩展是作为一个单独的扩展提供的,以保持 VS Code 核心的“简洁”。安装完成后,重新启动任何活动的调试会话,然后应在调试器中映射到原生代码!您应该在已加载的源视图中看到您的源代码,并且断点应该可以正常工作。

在下面的图像中,调试器停在C++源代码中的一个断点上,该断点创建了一个曼德布罗特分形。调用堆栈是可见的,从JavaScript代码到WebAssembly再到映射的C++代码。您还可以看到C++代码中的变量以及与int32相关的内存编辑。高度变量。

调试器在C++源代码中的一个断点处停止

虽然接近等价,但调试 WebAssembly 比普通的 JavaScript 稍有不同:

  • 变量视图中的变量不能直接编辑。但是,您可以选择变量旁边的查看二进制数据操作来编辑它们相关的内存。
  • 调试控制台观察Windows中基本的表达式评估是由lldb-eval提供的。这与普通的JavaScript表达式不同。
  • 未映射到源代码的位置将在反汇编的WebAssembly文本格式中显示。对于WebAssembly,命令禁用源映射步进将导致调试器仅在反汇编的代码中步进。

VS Code 的 WebAssembly 调试是基于 Chromium 作者的 C/C++ 调试扩展

支持的节点-like 运行时

当前的 VS Code JavaScript 调试器支持 Node 版本 8.x 及以上,最近的 Chrome 版本,以及最近的 Edge 版本(通过 微软Edge浏览器启动类型)。

下一步

如果你还没有阅读Node.js部分,请查看:

  • Node.js - 通过示例应用程序实现端到端的Node场景

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

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

  • 任务 - 使用Gulp、Grunt和Jake运行任务。显示错误和警告

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

  • 调试器扩展 - 从一个模拟示例开始创建 VS Code 调试扩展的步骤

常见问题

是的,如果你在项目中为文件夹创建了符号链接,例如使用npm 链接,您可以通过告诉 Node.js 运行时保留符号链接路径来调试符号链接的源文件。使用 node.exe--保留符号链接 切换 在你的启动配置中 运行参数属性。运行参数一个字符串数组传递给调试会话的运行时可执行文件,该可执行文件默认为 node.exe。

{
  "运行参数": ["--保留符号链接"]
}

如果您的主脚本位于符号链接路径内,则还需要添加"--preserve-symlinks-main"选项。此选项仅在Node 10+中可用。

如何调试 ECMAScript 模块?

如果你使用esm或通过--实验性模块为了在 Node.js 中使用 ECMAScript 模块,你可以通过这些选项传递运行参数属性launch.json输入:

如何设置 NODE_OPTIONS?

调试器使用特殊NODE_OPTIONS环境变量用于与您的应用程序设置调试,覆盖它将阻止调试正常工作。与其覆盖它,您应该附加到它。例如,一个.bashrc文件可能包含如下内容:

导出 NODE_OPTIONS="$NODE_OPTIONS --some-other-option=here"