带有 Vue.js 项目的 Visual Studio Code 中的断点被错误触发

问题描述

我正在尝试设置 VS Code + Vue.js 以处理一些 Vue.js 项目.我已经做了一些步骤，但我无法使断点正常工作.

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.

如果我用

npm run dev

然后用Debugger for Chrome在VS Code中开始调试，并在.vue文件中的某行代码上设置断点，该行通常用红色圆圈标记，但断点在不同的 app.js 文件中触发如下代码:

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?

我的配置:

{
"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',

我的 vue-cli 版本是 [email protected].

my vue-cli version is [email protected].

推荐答案

检查 Vue.js 食谱:

显示源代码

在 config/index.js 中，添加:

In config/index.js, add:

devtool: 'source-map',

和

启动应用程序

您的 launch.config 应如下所示:

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

这篇关于带有 Vue.js 项目的 Visual Studio Code 中的断点被错误触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！