Saber 酱的抱枕

vConsole（github主页）是由腾讯公司开源的一个前端调试面板，功能和各个浏览器的控制台（console）类似（当然还没那么强大）。

PC上的各大浏览器都自带了控制台，但是手机上的浏览器我还没见过可以显示控制台的。当页面在手机浏览器上有异常时，调试起来很不方便。现在有了vConsole，就比以前好了不少。

要使用vConsole，先在github下载主js文件。（/dist/vconsole.min.js）

之后引入vconsole.min.js：

<script src="vConsole/dist/vconsole.min.js"></script>

最后在 body 标签之后使用：

<script>
var vConsole = new VConsole();
</script>

这样就可以了，网页右下角就会出现vConsole的按钮：

（如果网页上这个位置有其他悬浮元素，则可能遮挡住vConsole的按钮）

点击这个按钮就可以显示vConsole的面板，目前版本（3.0.0）的面板如下：

可以看到主要功能有log、系统、网络、DOM、存储这几部分。

log区域也可以捕捉到浏览器原生控制台的输出，比如页面上有处js错误，vConsole也可以捕捉到。

vConsole的log区域支持以下几种输出模式，也支持输出对象或者输出多个参数：

console.log('foo'); // 白底黑字  
console.info('bar'); // 白底紫字  
console.debug('oh'); // 白底黄字  
console.warn('foo'); // 黄底黄字  
console.error('bar'); // 红底红字  

网络部分好像不会显示页面载入的文件，似乎是只显示ajax类通信？（猜测）

其他几部分没必要多说了。总之vConsole还是个挺有用的工具，大家需要的时候可以尝试~

前端console 调试面板：vConsole