saber酱的抱枕

Vive la France

09/30
01:39
软件

前端console 调试面板:vConsole

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

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

要使用vConsole,需要先在github下载完整的压缩包,解压之后再引入主js文件。(单独用那一个js文件是不行的)

一般情况下我们这么引入就可以了:

<script src="vConsole/dist/vconsole.min.js"></script>
<script>
var vConsole = new VConsole();
</script>

之后网页右下角就会出现vConsole的按钮:

console vConsole 控制台 移动端 调试

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

点击这个按钮就可以显示vConsole的面板,目前版本(3.0.0)的面板如下:

console vConsole 控制台 移动端 调试

可以看到主要功能有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