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 chrome.google.com/webstore/detail/vuejs-devtools/… — Emile Cantero
– Emile Cantero, Commented Jun 21, 2018 at 21:41
Also Vetur vscode extension very useful one marketplace.visualstudio.com/items?itemName=octref.vetur — Emile Cantero
– Emile Cantero, Commented Jun 21, 2018 at 21:43
@EmileCantero: yes, vetur and devtools are great I just started experimenting with them — robert
– robert, Commented Jun 22, 2018 at 20:38

tony19 · Accepted Answer · 2022-07-15 20:49:18Z

7

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.

edited Jul 15, 2022 at 20:49

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 22, 2018 at 20:36

robert

6,1907 gold badges31 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

R Cooper · Accepted Answer · 2018-07-12 07:05:20Z

0

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

answered Jul 12, 2018 at 7:05

R Cooper

112 bronze badges

Collectives™ on Stack Overflow

Debug vue-cli 3 generated app from Visual Studio Code

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related