Debug Node JS code in VS Code bundled with Webpack

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
}