前端调试技巧3：移动端使用vConsole查看控制台输出

1、什么时候需要用vConsole呢？

比如，我现在正在开发一个app，上线之后发现有个页面有问题，如果是在PC页面，直接F12就可以看到请求响应以及控制台的相关输出了，当app在手机上运行时，就无法看到console.log打印的信息了，要修改bug的话就只好死啃代码，如果手机上能有个像F12一样的功能就好了。此时此刻，欢迎vConsole闪亮登场！

2、vConsole怎么使用

超级简单！

引入js文件 + 初始化全局vConsole变量即可！至于怎么调试修改生产环境的js、html请参考我上一篇博客：前端调试技巧2：fiddler能替换h5项目或者APP中的JS或者HTML嘛？

2.1 引入vConsole的js文件

把下边的script元素引入当前页面即可

<script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>

2.2 初始化vConsole，比如在html页面的head标签中

var vConsole = new VConsole();

就这么2行代码就好了，vConsole就会自动捕获到你使用console输出到控制台的信息了。

3、 超出你的想象

太酸爽了！

除了cosole的内容，Cookies、SessionStorage信息也都能很方便的看到，只能说这个js太太太牛逼了！

4、开始使用

4.1 打开页面后见下图：

4.2控制台

							查看console.log等信息

查看Cookies和StorageSession