手机前端开发调试利器 vConsole

时间 2019-11-18

标签手机前端开发调试利器 vconsole 繁體版

原文原文链接

vConsole 详细介绍php

咱们在开发手机版网页的时候，经常会出现下面的情景：前端

(1) 开发时，在本身电脑上运行得好好的，在手机上打开就挂了，可是手机上又看不到error log； git

(2) 上线后，某用户表示页面失灵，但咱们本身又重现不出来，看不到用户侧的出错信息。github

若是说(1)还能够经过电脑链接手机以查看log来解决，那(2)在没有完善的前端上报体系时就很是被动了。浏览器

做为开发者，咱们的诉求很简单：有没有快捷的方法在手机前端页面看到log日志？微信

莫慌，抱紧vConsole！网络

vConsole是一款由微信公众平台前端团队打造的前端调试面板，专治手机端看log难题。微信公众平台

目前vConsole自带有2个面板，默认为“日志”面板，负责展现log。ui

细心的同窗可能会发现上面的log颜色各有不一样。与电脑端的Developer Tools同样，开发者能够经过调用不一样的方法来打出不一样的颜色，以便快速区分日志类型：spa

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

第二个是“系统”面板，vConsole会自动将一些基础信息（如系统版本）打印出来，方便开发者定位问题。若页面是在微信内置浏览器中打开的，vConsole还会打印出微信版本号、当前网络类型等额外信息。

默认状况下，vConsole的面板是隐藏起来的。咱们能够点击右下角的“面板”悬浮按钮来显示vConsole面板。

Talk is cheap, show me the code.

首先，在须要展现日志的页面引入vConsole模块。咱们建议在<head>中而非<body>底部引入，方便后续的新版本vConsole在页面初始化时预埋各类debug钩子。引入后，会自动生成window.vConsole对象实例。

<head> <script src='path/to/vconsole.min.js'></script> </head>

对于更一般的状况，咱们只需在调试模式下才启用vConsole，平时用户无需看到调试面板。这时候就须要开发者自行判断引入模块的时机。以PHP为例，经过判断URL中有无 dev_mode参数来选择性加载vConsole：

<?php if($_GET['dev_mode'=='1'){?> <script src='path/to/vconsole.min.js'></script> <?php}?>

若是项目中用到了CommonJS或SeaJS这种AMD/CMD规范的模块加载方式，能够在module中使用require()引入vConsole：

var vConsole =require('path/to/vconsole.min.js');

好了，怎么打印log呢？与电脑端一致，能够直接使用console.log()等方法来打印日志，目前支持的方法有：

console.log('foo'); console.info('bar'); console.debug('oh'); console.warn('foo'); console.error('bar');

若页面未加载vConsole模块，console.log()会直接输出到原生控制台中；加载模块后，日志则会输出到原生控制台+前端面板。所以没必要担忧兼容性问题。

引入模块后，vConsole会有一小段时间用于初始化工做，在渲染出面板HTML以前将没法当即打印log。所以，若要在引入模块后当即打印log，应使用vConsole.ready()方法：

vConsole.ready(function() { console.log('Hello World'); 
});

微信扫描如下二维码（或微信内长按图片识别二维码），便可体验vConsole面板。

目前vConsole已开源到WeChatFE的Github中。