前言

这几天在突然想搞(xian)点(de)东(dan)西(teng)，于是折腾了下公众号相关的接口，然而发现某个api在模拟器上正常，手机上使用微信浏览器无法始终无法执行，但是H5页面又不像小程序一样可以远程调试，又看不到打印日志，于是想起来了社区大佬之前发过的vConsole。

vConsole 是什么？

或许很多人会觉得很陌生，但是开发过小程序的人来说看到下面这个就很熟悉了。

小程序端和web端的区别？

小程序端：

Web端：

从上面2个截图可以看出基本上功能差不多，用法上也没什么区别，Web端可以查看Network和Storage的信息，至于好不好用，自己试试就知道。

Vue项目使用vConsole

npm install vconsole

在入口文件引入模块

import VConsole from 'vconsole'

let vConsole = new VConsole()
Vue.prototype.$vConsole = vConsole;

扩展功能：隐藏Network面板

因为Network信息有时候比较敏感，所以小程序端至今没有开放这个面板，但是理论上来说应该都是有的，可能是官方特意隐藏了，我们在H5页面上也可能会有这种需求，默认的话是都显示出来的，我们可以针对线上环境单独设置隐藏。

vConsole.removePlugin("network")

仓库地址

https://github.com/Tencent/vConsole