CODEWITHSUNDEEP
vue.jsvuejs2vue-cli
robert
robert

Reputation: 6152

Debug vue-cli 3 generated app from Visual Studio Code

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?

Upvotes: 4

Views: 4979

Answers (2)

robert
robert

Reputation: 6152

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.

Upvotes: 7

R Cooper
R Cooper

Reputation: 11

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. :)

Upvotes: 0

Related Questions