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

问题

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 vue@2.5.17.

回答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}/*"
  }
}

回答2:

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

来源：https://stackoverflow.com/questions/52460829/breakpoints-are-triggered-incorrectly-in-visual-studio-code-with-vue-js-project

标签

Vue.js

visual-studio-code