javascript - 在与 Webpack 捆绑在一起的 VS Code 中调试 Node JS 代码

Question

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

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

断点已设置，但尚未绑定(bind)

但是，当我在 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 构建并以 debug 模式启动 Node ，本地端口为 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
}