visual-studio-code - 在 Visual Studio Code 中使用 babel-node 进行调试

Question

我在用着：

VS 代码 v1.3.1
节点 v6.3.1
通天塔节点 v6.11.4
视窗 10

我无法使用以下启动文件在断点处停止。调试器运行并附加到端口，但是当我使用断点运行应用程序时，它不会在断点处停止并直接运行。任何人已经得到这个工作，请指教。

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/src/app.js",
            "stopOnEntry": false,
            "args": [],
            "cwd": "${workspaceRoot}",
            "preLaunchTask": null,
            "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/babel-node.cmd",
            "runtimeArgs": [
                "--nolazy"
            ],
            "env": {
                "NODE_ENV": "development"
            },
            "externalConsole": false,
            "sourceMaps": false,
            "outDir": null
        },
        {
            "name": "Attach",
            "type": "node",
            "request": "attach",
            "port": 5858,
            "address": "localhost",
            "restart": false,
            "sourceMaps": false,
            "outDir": null,
            "localRoot": "${workspaceRoot}",
            "remoteRoot": null
        },
        {
            "name": "Attach to Process",
            "type": "node",
            "request": "attach",
            "processId": "${command.PickProcess}",
            "port": 5858,
            "sourceMaps": false,
            "outDir": null
        }
    ]
}

score 94 · Accepted Answer

无需使用 @babel/node 进行转译

基本设置（源图 - 始终）

注意sourceMaps和retainLines中的选项.babelrc：

{
  "presets": [
    "@babel/preset-env"
  ],
  "sourceMaps": "inline",
  "retainLines": true
}

然后在launch.json：

{
  "type": "node",
  "request": "launch",
  "name": "Debug",
  "program": "${workspaceFolder}/index.js",
  "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/babel-node",
  "runtimeArgs": [
    "--nolazy"
  ]
}

高级设置（源地图 - 仅限开发）

您可以调整上述内容，以便仅在开发模式下生成 source-maps/retainLines：

{
  "presets": [
    "@babel/preset-env"
  ],
  "env": {
    "development": {
      "sourceMaps": "inline",
      "retainLines": true
    }
  }
}

和：

{
  "type": "node",
  "request": "launch",
  "name": "Debug",
  "program": "${workspaceFolder}/index.js",
  "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/babel-node",
  "runtimeArgs": [
    "--nolazy"
  ],
  "env": {
    "BABEL_ENV": "development"
  }
}

笔记

目前"type": "pwa-node" （查看更多）不适用于此设置。
"--nolazy" 见此。_
"BABEL_ENV": "development"- 除非设置了不同的值，否则默认值为development，因此在启动配置中添加它不是必需的（但确实使事情更加明确）。

score 31 · Accepted Answer

我能够按照以下步骤使其工作：

包.json

确保您有一个生成源映射的构建脚本。

"scripts": {
    "build": "babel src -d dist --source-maps"
}

任务.json

确保您有让VS Code使用脚本构建的任务。npm

{
    "version": "0.1.0",
    "command": "npm",
    "isShellCommand": true,
    "showOutput": "always",
    "suppressTaskName": true,
    "tasks": [
        {
            "taskName": "build",
            "args": [ "run", "build" ],
            "isBuildCommand": true
        }
    ]
}

启动.json

将脚本配置为在启动前使用 a构建preLaunchTask，program从源入口点启动，但outDir指向dist文件夹并sourceMaps启用。

{
    "name": "Launch",
    "type": "node",
    "request": "launch",
    "program": "${workspaceRoot}/src/server.js",
    "stopOnEntry": false,
    "args": [],
    "cwd": "${workspaceRoot}",
    "preLaunchTask": "build",
    "runtimeExecutable": null,
    "runtimeArgs": [ "--nolazy" ],
    "env": {
        "NODE_ENV": "development"
    },
    "externalConsole": false,
    "sourceMaps": true,
    "outDir": "${workspaceRoot}/dist"
}

现在，每次您按下F5时，babel转译都会在 Node 进程开始之前运行，但所有源映射都会同步。有了它，我可以使用断点和所有其他调试器的东西。

score 11 · Accepted Answer

从 1.9 版本开始，VS Code 默认会自动尝试使用源映射，但您必须指定outFiles转译文件是否与源文件不在同一个文件夹中。

例如，这里是相关文件。在这种情况下，babel 正在从src文件夹转换到lib文件夹。

注意：只有在您希望 VS Code 在调试之前转译文件时，才需要package.json和中的条目。.vscode/tasks.json

.vscode/launch.json

Ctrl+ Shift+ P,>Debug: Open launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceRoot}/lib/index.js",
            "cwd": "${workspaceRoot}",
            "preLaunchTask": "build",
            "outFiles": [
                "${workspaceRoot}/lib/**.js"
            ]
        }
    ]
}

注意：仅指定preLaunchTask是否还设置了和中的build任务。package.json.vscode/tasks.json

包.json

Ctrl+ P,package.json

{
  "scripts": {
    "build": "babel src -d lib -s"
  },
  "devDependencies": {
    "babel-cli": "^6.23.0",
    "babel-preset-env": "^1.1.10"
  }
}

注意：您可以使用不同版本babel-cli和不同的 babel 预设。

.vscode/tasks.json

Ctrl+ Shift+ P,>Tasks: Configure Task Runner

{
    "version": "0.1.0",
    "command": "npm",
    "isShellCommand": true,
    "showOutput": "always",
    "suppressTaskName": true,
    "tasks": [
        {
            "taskName": "build",
            "args": ["run", "build"],
            "isBuildCommand": true
        }
    ]
}

官方 VS 代码文档

源地图

VS Code 的 Node.js 调试器支持 JavaScript Source Maps，这有助于调试转译语言，例如 TypeScript 或缩小/丑化的 JavaScript。使用源映射，可以单步执行或在原始源中设置断点。如果原始源不存在源映射，或者源映射损坏并且无法在源和生成的 JavaScript 之间成功映射，则断点显示为未经验证（灰色空心圆圈）。

可以使用两种内联方式生成源映射：

内联源映射：生成的 JavaScript 文件在末尾包含作为数据 URI 的源映射（而不是通过文件 URI 引用源映射）。
内联源：源映射包含原始源（而不是通过路径引用源）。

VS Code 支持内联源映射和内联源。

源地图功能由sourceMaps默认true从 VS Code 1.9.0 开始的属性控制。这意味着节点调试总是尝试使用源映射（如果可以找到的话），因此您甚至可以使用该program属性指定一个源文件（例如 app.ts）。

如果出于某种原因需要禁用源映射，可以将sourceMaps属性设置为false.

如果生成的（转译的）JavaScript 文件不在其源代码旁边而是在单独的目录中，则必须通过设置outFiles属性帮助 VS Code 调试器定位它们。此属性采用多种 glob 模式，用于在生成的 JavaScript 文件集中包含和排除文件。每当您在原始源代码中设置断点时，VS Code 都会尝试在outFiles.

由于源映射不会自动创建，因此您必须配置用于创建它们的转译器。对于 TypeScript，这可以通过以下方式完成：

tsc --sourceMap --outDir bin app.ts

这是 TypeScript 程序的相应启动配置：

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

资源

score 5 · Accepted Answer

这对我有用（其他解决方案都不适用于 vscode v1.33）：

./project.json

"scripts": {
  "build": "babel src -d dist --source-maps",
},

.vscode/task.json

{
  "version": "2.0.0",
  "tasks": [{
    "label": "build-babel",
    "type": "npm",
    "script": "build",
    "group": "build"
  }]
}

.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [{
    "type": "node",
    "request": "launch",
    "preLaunchTask": "build-babel",
    "name": "Debug",
    "program": "${workspaceRoot}/src/server.js",
    "outFiles": ["${workspaceRoot}/dist/**/*.js"]
  }]
}

score 2 · Accepted Answer

将此配置添加到您的 launch.json，

{
"version": "0.2.0",
"configurations": [
    {   
        "cwd":"<path-to-application>",
        "type": "node",
        "request": "launch",
        "name": "babel-node debug",
        "runtimeExecutable": "<path-to-app>/node_modules/.bin/babel-node",
        "program": "<path-to-app-entry-file>/server.js",
        "runtimeArgs": ["--nolazy"]
    }
]
}

不要忘记在项目根目录中定义预设的 .babelrc 文件。launch.json 中的 cwd 属性也必须正确，否则 babel 编译器将无法找到 .babelrc 并且会出现编译错误。

    {
        "presets": ["@babel/preset-env"]
    }

使用此配置运行将自动在默认端口（通常为 5000）上启动应用程序并附加到生成的调试端口。除非您使用一些超级旧的 vscode，否则源映射无需任何额外配置即可工作

score 0 · Accepted Answer

在我的案例（VSCode 1.36.0）中缺少的是源映射路径的覆盖：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Debug",
            "program": "${workspaceRoot}/src/cli/index.js",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "*": "${workspaceRoot}/src/*"
            },
            "outFiles": [
                "${workspaceRoot}/lib/**/*.js"
            ]
        }
    ]
}

编译是通过 gulp 管道调用的，并且源映射指的是cli/index.js而不是src/cli/index.js. 重新映射sourceMapPathOverrides 固定。

visual-studio-code - 在 Visual Studio Code 中使用 babel-node 进行调试

6 回答 6

无需使用 @babel/node 进行转译

基本设置（源图 - 始终）

高级设置（源地图 - 仅限开发）

笔记

包.json

任务.json

启动.json

.vscode/launch.json

包.json

.vscode/tasks.json

官方 VS 代码文档

源地图

Related

Reference