Debugging node/prime vue webapp in vs code not hitting break points

Question

I've got a node/prime vue app that I'd like to debug. in launch.json I have

"configurations": [
    {
        "type": "chrome",
        "request": "launch",
        "name": "vuejs: chrome",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}/src",
        "breakOnLoad": true,
        "sourceMapPathOverrides": {
            "webpack:///src/*": "${webRoot}/*"
        }
    }

I'm starting up my app with npm run serve in VS Code

Then I'm hitting the debug/play icon for the configuration above.

When I encounter an error in the app, console errors appear in the debug console in VS Code.

However no breakpoints are hit. Neither in .ts nor .js nor .vue files. They all show as "unbound breakpoints"

I've got the Debugger for Chrome extension to VS Code and Vetur Vue tooling installed

I also followed this link https://v2.vuejs.org/v2/cookbook/debugging-in-vscode.html and put

module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
} 

into vue.config.js

=> How do I bind the breakpoints?

Answer 1

Adding

configureWebpack: {
    devtool: 'source-map'
}

to vue.config.js

and setting a break point in Chrome made the difference.