注意：请留意如果页面使用了一个生产环境/压缩后的 Vue.js 构建版本 (例如来自一个 CDN 的标准的链接)，devtools 的审查功能是默认被禁用的，所以 Vue 面板不会出现。如果你切换到一个非压缩版本，你可能需要强制刷新该页面来看到它。

vue-devtools安装:

chrome商店直接安装: vue-devtools可以从chrome商店直接下载安装，非常简单，这里就不过多介绍了。不过要注意的一点就是，需要翻墙才能下载。

源代码安装：

1、     git clone https://github.com/vuejs/vue-devtools.git
然后进入目录：

2、  npm install      //如果太慢的话，可以安装一个cnpm, 然后命令换成 cnpm install
3、  修改manifest.json文件：  把"persistent":false改成true

4、  npm run build

5、  游览器输入地址“chrome://extensions/”进入扩展程序页面，点击“加载已解压的扩展程序...”按钮，选择vue-devtools>shells下的chrome文件夹。

当我们添加完vue-devtools扩展程序之后，我们在调试vue应用的时候，chrome开发者工具中会看一个vue的一栏，点击之后就可以看见当前页面vue对象的一些信息。vue-devtools使用起来还是比较简单的，上手非常的容易。即运行vue项目时, 打开f12, 选择vue就可以使用了.

js显示console.log的时候由于一些复杂的object无法打印，或者打印出来是看不懂的东西，可以使用vconsole，它会托管库里原来的的console，这样不改变调用方式的情况下，可以优雅的打印出复杂变量，相当好！重点是移动端调试同样可以打印。

巴特西