javascript - Debug Node JS code in VS Code bundled with Webpack - Stack Overflow

admin管理员组

文章数量:1326277

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?

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?

• javascript
• node.js
• debugging
• webpack
• visual-studio-code

Share Improve this question Follow edited Mar 12, 2019 at 17:34 MegaMatt 23.8k3939 gold badges114114 silver badges160160 bronze badges asked Nov 9, 2017 at 10:54 ccoder83ccoder83 50466 silver badges1515 bronze badges 2

• Does running it directly with NodeJS have the same result? – Jesse Schokker Commented Nov 9, 2017 at 11:40
• 1 When I insert debugger; at the same line where I set the breakpoint with VS code, it stops at the breakpoint, and points to the line in the bundled file. – ccoder83 Commented Nov 9, 2017 at 12:03

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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
}

Short answer:

1. Change the vs-code debug configuration file.
2. Add a npm-script mand 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

本文标签： javascriptDebug Node JS code in VS Code bundled with WebpackStack Overflow