使用打包工具Webpack的VS Code来调试Node.js代码

Question

我对Node JS和JS开发都很陌生。我的应用程序使用Webpack打包，被一个app.js文件调用。我试图使用Visual Studio Code进行调试。我为VS代码配置创建了launch.json文件。但是，当我在单独的js文件中插入断点时，会出现“断点设置但尚未绑定”的错误。然而，当我在app.js或app.bundle.js中设置断点时，它可以正常工作。下面是我的launch.json：

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

如何让VS Code调试器与单个JS文件配合使用？

- ccoder83

---

直接使用NodeJS运行会得到相同的结果吗？ - Jesse Schokker

当我在与 VS Code 设置断点的同一行插入 debugger; 时，它会停在断点处，并指向捆绑文件中的该行。 - ccoder83

Answer 1

我已经解决了这个问题。

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

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

由于webpack将js文件打包成一个文件，因此我们需要一个sourcemap，这样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
}

- ccoder83

---

这对我没用，我可以调试我的 bundle，但它不能将我的原始.ts 文件映射回我的 src/ 目录。 - Mike Haas

我也没能解决。@MikeHaas 我遇到了和你一样的问题，你能解决吗？ - MartinGian

Answer 2

简短回答：

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

配置内容：

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

参考资料：

官方文档

- Jerry Ni