Debug vue-cli 3 generated app from Visual Studio Code

Question

I generated an app using vue-cli 3.0.0-rc.3

Now I want to debug it using Visual Studio Code (Debugger for Chrome) however I can't seem to find the option to turn on sourceMaps.

I set the breakpoint in VSCode but it is not hit. If I specify: "sourceMaps: true" in vue.config.js, I got an error "Invalid options in vue.config.js: "sourceMaps" is not allowed"

What option needs to be set for debugging to work?

Best way to debug with Vue for me in my last project was the Vue devtools extension for chrome https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd — Emile Cantero, Jun 21 '18 at 21:41
Also Vetur vscode extension very useful one https://marketplace.visualstudio.com/items?itemName=octref.vetur — Emile Cantero, Jun 21 '18 at 21:43
@EmileCantero: yes, vetur and devtools are great I just started experimenting with them — robert, Jun 22 '18 at 20:38

score 7 · Accepted Answer · edited Jul 15 '22 at 20:49

According to the Official cookbook these steps needs to be done:

vue.config.js file has to be edited and add:

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

then launch.json should look like this:

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

After these steps breakpoints started to work as expected.

score 0 · Answer 2 · answered Jul 12 '18 at 07:05

In addition to the above, I also had to follow the steps in this post: Visual Studio Code breakpoint appearing in wrong place

In particular, setting the sourceMapPathOverrides property. Finally got my breakpoints to work in Visual Studio Code using Vue.js. :)

Debug vue-cli 3 generated app from Visual Studio Code

2 Answers2

Linked