vscode使用断点

1.安装并激活扩展

• Debugger for Chrome (弃用 --> JavaScript Debugger)
• Debugger for Firefox

2. 配置config文件

打开 config/index.js 并找到 devtool property。将其更新为：

如果你使用的是 Vue CLI 2，请设置并更新 config/index.js 内的 devtool property

devtool: 'source-map'

如果你使用的是 Vue CLI 3，请设置并更新 vue.config.js 内的 devtool property：

module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}

3. 配置launch.json文件

点击在 Activity Bar 里的 Debugger 图标来到 Debug 视图，然后点击那个齿轮图标来配置一个 launch.json 的文件，选择 Chrome/Firefox：Launch 环境。然后将生成的 launch.json 的内容替换成为相应的配置：

0808 项目对应的端口

{
  "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}/*"
      }
    },
    {
      "type": "firefox",
      "request": "launch",
      "name": "vuejs: firefox",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
    }
  ]
}

4.设置断点

5.F5运行调试

运行调试后,出现新的工具栏以及鼠标悬浮在断点数据上,可以看到当前的数据内容.

问题

1.如果断点显示以下错误,可能是 映射sourcemap路径 错误

2.设置允许任何文件中设置断点
vscode工具中 文件 -> 首选项 -> 设置 -> 功能 -> 调试