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

Question

I'm new to Node JS, and JS development in general. I have an app-bundle.js file that is bundled by WebPack, that is called through an app.js file.

I am trying to debug using Visual Studio Code. I created the launch.json file for the VS code configuration. However, when I insert breakpoints in the individual js files, I get

Breakpoints set, but not yet bound

However, when I set a breakpoint in app.js or app.bundle.js, it works fine.

My launch.json is below:

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

How can I get the VS code debugger to work with the individual js files?

Answer 1

I was able to solve the issue.

As debug is deprecated, use inspect . Therefore, add the following to the script object in package.json to build using webpack and start node in debug mode with 9229 as the local port:

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

As webpack bundles the js files into one, we need a sourcemap, so that VS code can use breakpoints on the individual files. Therefore, in webpack.config.js , add the SourceMapDevToolPlugin :

plugins:[
    new webpack.SourceMapDevToolPlugin({
        filename: '[name].js.map'
    })
]

Finally in VS Code , configure the launch.json file as follow:

{
    "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

Short answer:

1. Change the vs-code debug configuration file.
2. Add a npm-script command debug same as the run-script value above.
3. Start Debugging F5 .

Configuration content:

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

Reference:

Official Doc