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

Question

我是 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 文件？

Answer 1

我能够解决这个问题。

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

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

当 webpack 将 js 文件捆绑到一个文件中时，我们需要一个源映射，以便 VS code 可以在各个文件上使用断点。因此，在 中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
}