Breakpoints are triggered incorrectly in Visual Studio Code with Vue.js project

Question

I am trying to setup VS Code + Vue.js to work on some Vue.js project. I already did some steps, but I cannot make breakpoints work correctly.

if I start the website with

npm run dev

And then start debugging in VS Code with Debugger for Chrome and set a breakpoint on a certain line of code in a .vue file, the line is normally marked with the red circle, but the breakpoint is triggered in different app.js file in the code like this:

// module
exports.push([module.i...
// exports
/***/ }),

what can be wrong with my debugger settings?

my config:

{
"version": "0.2.0",
"configurations": [
  {
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome against localhost",
    "url": "http://localhost:8080",
    "webRoot": "${workspaceRoot}"
  },
  {
    "type": "chrome",
    "request": "attach",
    "name": "Attach to Chrome",
    "port": 9222,
    "webRoot": "${workspaceRoot}"
  }
]
}

devtool: 'source-map',

my vue-cli version is [email protected].

tony19 · Accepted Answer · 2022-07-16 05:13:31Z

1

Check the Vue.js cookbook:

Showing Source Code

In config/index.js, add:

devtool: 'source-map',

and

Launching the Application

Your launch.config should look like this:

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

edited Jul 16, 2022 at 5:13

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Sep 27, 2018 at 13:51

Feetball

563 bronze badges

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

Comments

user10706046 · Accepted Answer · 2020-03-29 14:49:51Z

I've had problems with Feetball's solution from Vue.js Cookbook - it was clear to me it wasn't working correctly because breakpoints would be triggered in wrong places and the debugger would open incorrect files.

I've had better results with this debug configuration from the Microsoft vscode-recipes repository:

The link above has detailed instructions but I'll just paste the launch config. The instructions are the same as in Vue.js cookbook

launch.json:

{
  "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}/*",
        "webpack:///src/*": "${webRoot}/*",
        "webpack:///*": "*",
        "webpack:///./~/*": "${webRoot}/node_modules/*"
      }
    }
  ]
}

And here's the result of it working in a computed property (also works in mounted etc.):

Collectives™ on Stack Overflow

Breakpoints are triggered incorrectly in Visual Studio Code with Vue.js project

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