在vscode中调试vue代码

官网

先决条件

安装了 VS Code
安装扩展
Debugger for Chrome
Debugger for Firefox

在浏览器中展示源代码

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

devtool: 'source-map',

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

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

配置launch.json 的文件

点击运行和调试旁的下拉，为要调试的项目添加配置，就会自动生成一个launch.json文件，此处的端口号8080应为你项目的端口号

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "http://localhost:8080",
            "sourceMapPathOverrides":{
                "webpack:///src/*":"${workspaceRoot}/src/*"
           }
        }
    ]
}

断点调试工具条

continue（继续）
执行至下一个断点

step over（单步跳过）
从断点处开始，执行单步语句

step in（单步调试）
此行代码的详细步骤，也就是此行代码对应的源码

step out（单步跳出）
与step in相反的操作