Javascript 与Web包捆绑的VS代码中的调试节点JS代码

我对NodeJS和JS开发都是新手。我有一个app-bundle.js文件，它由WebPack绑定，通过app.js文件调用

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

断点已设置，但尚未绑定

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

My launch.json如下所示：

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

---

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

我能够解决这个问题

由于不推荐使用

debug

，请使用

inspect

。因此，将以下内容添加到

package.json

中的脚本对象中，以便在调试模式下使用webpack和start 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
}

简短答复:

更改vs代码的调试配置文件

添加与上面的运行脚本值相同的

npm脚本

命令调试

开始调试F5

配置内容：

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

参考：

---

直接使用NodeJS运行它会有相同的结果吗？当我插入

调试器时在我使用VS代码设置断点的同一行，它在断点处停止，并指向捆绑文件中的行。这对我不起作用，我可以调试捆绑包，但它不会映射回我的src/directory中的原始.ts文件。我也不起作用@MikeHaas我和你面临同样的问题，你能解决吗？