Debug vue-cli project - no breakpoints, console links to wrong files

user_802363 0
Viewed 1384

Trying to setup vscode to debug a vue project.

I use vue ui because it's actually super convenient.

I have 2 problems:

  1. Breakpoints end up Breakpoint set but not yet bound. And obviously not working.
  2. File links in the debug console open to src\node_modules\cache-loader\dist\webpack:.... That's not even a valid path - there's no node_modules in src.

I have read this page:
https://v2.vuejs.org/v2/cookbook/debugging-in-vscode.html

I got most of my launch config from there.

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "vuejs/chrome: Attach to devtools",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "urlFilter": "http://localhost:8080/*",
            "webRoot": "${workspaceFolder}/src",
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*"
            }
        }
    ]
}
vue-cli-3 visual-studio-code google-chrome-devtools debugging
1 Answers

Found the answer today with a bit more experimenting.

If you use Vue CLI 3, set or update the devtool property inside vue.config.js:

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

I got a clue to the solution from the page linked in the question: Although webpack does generate some sort of source map implicitly, the cookbook explicitly mentions that webpack must be configured to generate source maps. Otherwise it does not seem to do it correctly in whatever fashion is required to get everything running properly.

Gonna leave this for posterity in case anyone else stumbles onto this oddity (has source maps, but not the right ones).

user_8023630
Related