与Webpack捆绑在一起的VS Code中的Debug Node JS代码

Question

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

我正在尝试使用Visual Studio代码进行调试。我为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代码可以在各个文件上使用断点。因此，在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
}

Answer 2

简短回答：

1. 更改vs-code调试配置文件。
2. 添加npm-script命令debug与上面的run-script值相同。
3. 开始调试F5。

配置内容：

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

参考：

Official Doc