在与 Webpack 捆绑的 VS Code 中调试 Node JS 代码答案

【问题标题】：Debug Node JS code in VS Code bundled with Webpack在与 Webpack 捆绑的 VS Code 中调试 Node JS 代码
【发布时间】：2018-04-22 08:06:12
【问题描述】：

我是 Node JS 和一般 JS 开发的新手。我有一个由 WebPack 捆绑的 app-bundle.js 文件，它通过 app.js 文件调用。

我正在尝试使用 Visual Studio Code 进行调试。我为 VS 代码配置创建了 launch.json 文件。但是，当我在单个 js 文件中插入断点时，我得到了

Breakpoints set, but not yet bound

但是，当我在 app.js 或 app.bundle.js 中设置断点时，它工作正常。

我的 launch.json 如下：

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

如何让 VS 代码调试器处理单个 js 文件？

【问题讨论】：

直接用NodeJS运行结果一样吗？
当我在使用 VS 代码设置断点的同一行插入 debugger; 时，它会在断点处停止，并指向捆绑文件中的行。

标签： javascript node.js debugging webpack visual-studio-code

【解决方案1】：

我能够解决这个问题。

由于不推荐使用debug，请使用inspect。因此，将以下内容添加到package.json 中的脚本对象中，以使用 webpack 构建并以调试模式启动节点，并将 9229 作为本地端口：

"start": "webpack && node --inspect--brk=9229 app.js"

由于 webpack 将 js 文件捆绑为一个，我们需要一个 sourcemap，以便 VS 代码可以在单个文件上使用断点。因此，在webpack.config.js 中，添加SourceMapDevToolPlugin：

plugins:[
    new webpack.SourceMapDevToolPlugin({
        filename: '[name].js.map'
    })
]

最后在VS Code中，配置launch.json文件如下：

{
    "type": "node",
    "request": "launch",
    "name": "Launch Program"

    "stopOnEntry": false,
    "args": [],
    "cwd": "${workspaceFolder},
    "preLaunchTask": null,
    "runtimeExecutable": "npm",
    "runtimeArgs": [
        "run-script", "start"
    ],
    "env": {
        "NODE_ENV": "development"
    },
    "console": "integratedTerminal",
    "port": 9229
}

【讨论】：

这对我不起作用，我可以调试我的包，但它不会映射回我的 src/ 目录中的原始 .ts 文件
对我也不起作用。 @MikeHaas 我遇到了和你一样的问题，你能解决吗？

【解决方案2】：

简答：

更改vs-code调试配置文件。
添加npm-script 命令调试与上面的运行脚本值相同。
开始调试F5。

配置内容：

{
    "name": "Launch via NPM",
    "type": "node",
    "request": "launch",
    "cwd": "${workspaceFolder}",
    "runtimeExecutable": "npm",
    "runtimeArgs": [
        "run-script", "debug"
    ],
    "port": 9229
}

参考：

Official Doc

【讨论】：