【问题标题】：debugging in Visual Studio Code with babel-node在 Visual Studio Code 中使用 babel-node 进行调试
【发布时间】：2016-11-28 05:01:40
【问题描述】：

我正在使用：

VS 代码 v1.3.1
节点 v6.3.1
babel-node v6.11.4
Windows 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
        }
    ]
}

【问题讨论】：

标签： visual-studio-code babel-node

【解决方案1】：

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

基本设置（源地图 - 始终）

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

{
  "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" (see more) 不适用于此设置。
为"--nolazy"see this。
"BABEL_ENV": "development" - 除非 different value is set 默认为 development，因此在启动配置中添加它不是必需的（但确实使事情更加明确）。

【讨论】：

尝试您的设置，但无法放置断点。收到“未验证断点”通知。在类声明中，所有断点都移动到与类名一致。有什么想法吗？
这很奇怪。一直在异步使用这个设置，从来没有遇到过这个问题。
感谢您的回复！你用的是什么babel版本？ 7?
不，5/6。
现在，babel 被替换为 @babel/core 和 presets: ["env"] 被替换为 presets: ["@babel/preset-env"]

【解决方案2】：

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

包.json

确保您有一个生成 sourcemaps 的构建脚本。

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

tasks.json

确保您有 task 允许 VS Code 使用 npm 脚本进行构建。

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

launch.json

使用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 进程启动之前运行，但所有源映射都会同步。有了它，我就可以使用断点和所有其他调试器了。

【讨论】：

不需要运行任何脚本。 Babel-node 帮你搞定

【解决方案3】：

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

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

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

.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"
            ]
        }
    ]
}

注意：如果您还在package.json 和.vscode/tasks.json 中设置了build 任务，请仅指定preLaunchTask。

package.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 属性控制，从VS Code 1.9.0 开始默认为true。这意味着节点调试总是尝试使用源映射（如果可以找到的话），因此您甚至可以使用 program 属性指定源文件（例如 app.ts）。

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

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

由于源映射不会自动创建，因此您必须配置用于创建它们的转译器。对于 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" ]
        }
    ]
}

Source

【讨论】：

在 2019 年，这是最有效的方法。最旧的将触发错误和已弃用的警告。

【解决方案4】：

这对我有用（其他解决方案都不适用于 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"]
  }]
}

【讨论】：

【解决方案5】：

将此配置添加到您的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，否则源映射无需任何额外配置即可工作

【讨论】：

【解决方案6】：

在我的案例（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 重新映射修复了该问题。

【讨论】：