移动端调试神器 vConsole

移动端真机调试一般想看到简单的数据会使用 alert() 的方式打印，但由于 alert() 会有一个隐形转换成字符串的问题，一些复杂的数据没法看到。而且弹出的对话框会打断一些 js 的进行，体验也很糟糕。

于是微信团队开发的vconsole出来了。
安装：

cnpm i vconsole

引入模块
(1) 如果未使用 AMD/CMD 规范，可直接在 HTML 中引入 vConsole 模块：
找到这个模块下面的 dist/vconsole.min.js ，然后复制到自己的项目中

(2) 如果使用了 AMD/CMD 规范，可在 module 内使用 require() 引入模块：

var vConsole = require('path/to/vconsole.min.js');
使用webpack，然后js代码中
let vConsole = new VConsole() // 初始化

(3)Vue中使用

import VConsole from 'vconsole/dist/vconsole.min.js' //import vconsole
let vConsole = new VConsole() // 初始化

需要注意的是：

vconsole 与 vue 结合使用时若严格使用 eslint 我的会报错误，报错结果如下

error: 'vConsole' is assigned a value but never used (no-unused-vars) at src\main.js:9:5:

解决办法在 src/main.js 入口文件引用时候使用 use 就没事了。

import Vconsole from 'vconsole';
const vConsole = new Vconsole();
Vue.use(vConsole);
console.log("hello Vconsole");

使用时与 PC 端打印 log 一样，可直接使用 console.log() 等方法直接打印日志。未加载 vConsole 模块时，console.log() 会直接打印到原生控制台中；加载 vConsole 后，日志会打印到页面前端+原生控制台。
打印一下运行效果图：

了解这些就够使用了，更详细的 API 去看下面这个的博客：
https://segmentfault.com/a/1190000017320562#item-1