vue-devtools : vue的调试工具及log显示工具 vconsole

使用 devtools 有很多好处，比如它可以让你能够实时编辑数据属性并立即看到其反映出来的变化。另一个主要的好处是能够为 Vuex 提供时间旅行式的调试体验。

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

 

vue-devtools安装:

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

源代码安装： 

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，这样不改变调用方式的情况下，可以优雅的打印出复杂变量，相当好！重点是移动端调试同样可以打印。