vue调试三种方式

debug是必备技巧

方式一：通过vue.js devtools

最常用，最方便，适合观察值的变化，不太适合理清代码执行流程

效果

使用

安装如下插件即可

方式二：在浏览器中展示源代码

这种方式还可以配合vue.js devtools一起使用

效果

使用

项目的添加如下内容即可

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

然后就可以F12看到对应的vue文件了

参考

在浏览器中展示源代码

方式三：使用vscode插件Debugger for Chrome

这种方式打断点最方便，但是不能配合vue.js devtools

效果

使用

安装插件

配置并且debug运行

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

然后先npm run serve运行项目

就可以通过点击绿色的debug按钮进入debug模式了

参考

VS Code 使用 Debugger for Chrome 调试vue