手机前端开发调试利器 vConsole

MIT
JavaScript
跨平台
腾讯
2016-04-28
红薯

1 前言

我们在开发手机版网页的时候,常常会出现下面的情景:

 (1) 开发时,在自己电脑上运行得好好的,在手机上打开就挂了,但是手机上又看不到error log; 

 (2) 上线后,某用户表示页面失灵,但我们自己又重现不出来,看不到用户侧的出错信息。

如果说(1)还可以通过电脑连接手机以查看log来解决,那(2)在没有完善的前端上报体系时就非常被动了。

作为开发者,我们的诉求很简单:有没有快捷的方法在手机前端页面看到log日志?

2 vConsole前端调试面板

莫慌,抱紧vConsole!

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

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

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

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

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

vConsole面板

默认情况下,vConsole的面板是隐藏起来的。我们可以点击右下角的“面板”悬浮按钮来显示vConsole面板。

3 使用方法

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'); 
});

4 在线demo

微信扫描以下二维码(或微信内长按图片识别二维码),即可体验vConsole面板。

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

的码云指数为
超过 的项目
加载中

评论(15)

laozhong__
laozhong__
eruda比这猛多了
言久荣
言久荣
敢不敢放个再大点的二维码图片,浏览器都快显示不下了
sup9278
sup9278
不错啊~就是有点小问题,import方式引入请求永远是pending,time永远不显示
neonlite
neonlite
这个是腾讯的,和微信的这玩意贼像。https://alloyteam.github.io/AlloyLever/
靳太阳
靳太阳
厉害
Sohnny
Sohnny
要有类似开原的了,比你这功能强大
颜风
颜风
曹忠
曹忠
不错的工具 #vConsole#
101TAT101
101TAT101
这个可以有。 #vConsole#
taohe
taohe
强大 #vConsole#

vConsole 3.3.0 发布,手机前端开发调试利器

vConsole是一款由微信公众平台前端团队打造的前端调试面板,专治手机端看log难题。 目前vConsole自带有 2 个面板,默认为“日志”面板,负责展示log。 本次更新如下: 【特性】新增自动合并相...

02/03 08:15

vConsole 3.2.2 发布,手机前端开发调试利器

vConsole是一款由微信公众平台前端团队打造的前端调试面板,专治手机端看log难题。 目前vConsole自带有2个面板,默认为“日志”面板,负责展示log。 本次更新如下: 【特性】新增控制台输入提...

01/20 07:10

没有更多内容

加载失败,请刷新页面

没有更多内容

暂无问答

手机前端开发调试利器 vConsole

vConsole 详细介绍 1 前言 我们在开发手机版网页的时候,常常会出现下面的情景: (1) 开发时,在自己电脑上运行得好好的,在手机上打开就挂了,但是手机上又看不到error log; (2) 上线后,某...

2017/11/01 17:44
835
0
VConsole的使用

手机端控制台打印输出,方便bug的排查。 首先需要引入vconsole.min.js 文件,然后在文件中创造实例。就能直接使用了。 var vConsole = new VConsole(); vConsole的文件地址......

2018/06/24 18:52
61
0
vue.config.js添加webpack插件的写法

写法: module.exports = { chainWebpack: config => { config .pugin('插件名字') .use(引入的插件的变量, 一定不要使用new 关键字) .tag: c => { // c 是一个数组 c[0] = {插件的配置项} r...

03/29 20:47
0
0
H5通过vConsole查看真机调试日志

1、微信打开下面链接 https://debugx5.qq.com/ 我用草料二维码生成器给大家生成了下面的图片,方便大家微信扫描,贴心吧,哈哈 2、在“信息”栏,找到“打开vConsole调试功能”进行勾选即可 ...

03/13 11:31
44
0
vue中使用vconsole--移动端调试神器

Vue中使用vconsole调试手机移动端的点击事件 先使用npm install vconsole下载安装依赖包 在Vue项目中新建 vconsole.js 文件 ,在文件中写入 import Vconsole from 'vconsole' const vConsole...

2018/11/30 16:18
133
0
VConsole 移动网页上查看console等控制台信息

移动网页上查看console等控制台信息 项目安装插件 VConsole。并且在项目入口文件里引入: 1 2 let VConsole = require('../node_modules/vconsole/dist/vconsole.min');//路径根据项目自己找...

02/26 13:20
5
0
解决微信 JS SDK ios 走wx.config没有回调

<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> //加入这个 <script type="text/javascript" src="https://res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/vconso...

2018/07/27 12:35
103
0
关于微信公众号 微信JSSDK 获取经纬度

代码如下: <script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>//重点 引入这句 <!-- <script type="text/javascript" src="https://res.wx.qq.com/mmbizwap/zh_CN/ht...

2018/07/27 12:46
131
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部