开放原子开发者工作坊

方式1：vue-devtools插件

vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率。

使用步骤

1、 到github下载：https://github.com/vuejs/vue-devtools

2、 在vue-devtools目录下安装依赖包

cd vue-devtools
cnpm install

3、 扩展Chrome插件

Chrome浏览器 > 更多程序 > 拓展程序

4、 vue-devtools使用

vue项目, 打开f12, 选择vue就可以使用了。

使用debugger和sourcemap调试Vue组件（重点）

针对vue-cli webpack官方脚手架，打开build/webpack.dev.conf.js文件，找到下面这句：

devtool: '#cheap-module-eval-source-map',

新版本也可在config/index.js中找到，注意是在开发环境里（dev），

修改为：

devtool: '#eval-source-map',

好了，一不小心要改的配置已经改完了~

使用：

现在是具体调试了。假设我们想调试App.vue这个组件，可以在想要调试的代码前添加debugger方法。