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

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

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

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

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

答案是肯定的。

vConsole:一个轻量、可拓展、针对手机网页的前端开发者调试面板。

特性：

  • 查看 console 日志
  • 查看网络请求
  • 手动执行 JS 命令行
  • 自定义插件

上手

下载 vConsole 的最新版本。（不要直接下载 dev 分支下的 dist/vconsole.min.js）
或者使用 npm 安装：

npm install vconsole

引入 dist/vconsole.min.js 到项目中：

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

<script>

console.log('Hello world');

// 然后点击右下角 vConsole 按钮即可查看到 log

</script>

demo代码：

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title>vConsole/Demo</title>

	<link href="weui.min.css" rel="stylesheet"/>

	<link href="demo.css?v=1.1.0" rel="stylesheet"/>

	<script src="zepto.min.js"></script>

	<script src="zepto.touch.min.js"></script>

	<!-- 引入vConsole的JS库 -->

	<script src="vconsole.min.js?v=2.2.0"></script>

</head>

<body ontouchstart>

	<div class="page">

		<h1 class="page_title">vConsole</h1>

		<div class="weui_text_area">

			<p class="weui_msg_desc">点击下面的按钮，即可打印 log。<br/>点击右下角按钮，即可查看 log。</p>

		</div>

		<a href="javascript:;" class="weui_btn weui_btn_primary js_btn_log" data-type="log">普通日志(log)</a>

		<a href="javascript:;" class="weui_btn weui_btn_primary js_btn_log" data-type="info">信息日志(info)</a>

		<a href="javascript:;" class="weui_btn weui_btn_primary js_btn_log" data-type="debug">调试日志(debug)</a>

		<a href="javascript:;" class="weui_btn weui_btn_primary js_btn_log" data-type="warn">警告日志(warn)</a>

		<a href="javascript:;" class="weui_btn weui_btn_primary js_btn_log" data-type="error">报错日志(error)</a>

		<a href="javascript:;" class="weui_btn weui_btn_default js_btn_log_obj">打印Object</a>

		<a href="javascript:;" class="weui_btn weui_btn_default js_btn_trigger_error">触发JS Error</a>

		<a href="javascript:;" class="weui_btn weui_btn_default js_btn_log_sys">打印到系统面板</a>

		<a href="javascript:;" class="weui_btn weui_btn_default js_btn_ajax">发起AJAX</a>

	</div>

	<div class="weui_toptips weui_notice" id="js_tips">已打印log</div>

</body>

<script>

console.info('欢迎使用 vConsole。vConsole 是一个由微信公众平台前端团队研发的 Web 前端开发者面板，可用于展示 console 日志，方便开发、调试。');

$('.js_btn_log').on('tap', function(e) {

	var type = $(this).data('type');

	console[type](type); // 例如，console.log(type)

	showTips();

});

$('.js_btn_log_obj').on('tap', function(e) {

	console.log({

		string: 'foobar',

		number: 233,

		boolean: true,

		object: {

			foo: 'bar'

		},

		array: [8, 7, 6],

		func: function() {}

	});

	showTips();

});

$('.js_btn_trigger_error').on('tap', function(e) {

	showTips();

	var err = undefined;

	err.a = 1;

});

$('.js_btn_log_sys').on('tap', function(e) {

	// 输出到系统面板

	console.log('[system]', '当前时间戳:', (+new Date()));

	showTips();

});

$('.js_btn_ajax').on('tap', function(e) {

  // 发起一个AJAX

  $.get('ajax.html', function(resp) {

    console.log(resp);

  });

  showTips();

});

// 用于页面内展示顶部tips

var tipsTimer;

function showTips() {

	tipsTimer && clearTimeout(tipsTimer);

	$('#js_tips').show();

	tipsTimer = setTimeout(function() {

		$('#js_tips').hide();

	}, 1500);

}

</script>

</html>
 

手机前端开发调试利器 – vConsole的更多相关文章

  1. 手机前端开发调试利器-vConsole

    最近因为做抽奖页面,在android上可以使用手机连上电脑后用chrome浏览器chrome://inspect进行页面探测,但是ios中的页面就不能这样探测 在网上搜索后发现此插件,大大解决了问题 ...

  2. Safari 前端开发调试 iOS 完美解决方案

    转http://www.2cto.com/kf/201403/283404.html afari 前端开发调试 iOS 完美解决方案 2014-03-05      0个评论    来源:Safari ...

  3. 手机H5 web调试利器——WEINRE (WEb INspector REmote)

    手机H5 web调试利器--WEINRE (WEb INspector REmote) 调试移动端页面,优先选择使用chrome浏览器调试,如果是hybrid形式的页面,可以使用chrome提供的ch ...

  4. 周记5——随机撒花特效、动态修改伪元素样式、contenteditable属性、手机端调试利器VConsole、浏览器端debug调试

    记录一些小零碎知识点,以便日后查看~ 1.随机撒花特效 教师节快到了,公司的产品提出一个需求:在IM(即时聊天)聊天界面弹出教师节的祝福“广告”,用户点击“发送祝福”按钮,聊天界面会随机撒花.这里的重 ...

  5. 前端读者 | 前端开发者调试面板vConsole

    来着微信团队开源的一个调试工具,[GitHub地址]https://github.com/Tencent/vConsole 一个轻量.可拓展.针对手机网页的前端开发者调试面板. 特性 查看 conso ...

  6. 【远程文件浏览器】Unity+Lua开发调试利器

    Remote File Explorer是一个跨平台的远程文件浏览器,用户通过Unity Editor就能操作运行在手机上的游戏或是应用的的目录文件.比如当项目打包运行到设备上时,可通过Remote ...

  7. 配置移动前端开发调试环境（nodejs+npm+weiner的安装和配置使用)

    这段时间发现做移动端的开发调试是一大难题,网上逛了逛发现有一些工具可用,如chrome的远程调试,实际测试过程中我始终调试不成功,听说被墙后是不行的,所以最终找了如下的方法. 因为基于nodeJS环境 ...

  8. 前端h5开发调试神奇vconsole

    (1)项目中安装vconcole插件 npm install vconcole (2)在vue项目中main.js中引入插件 import Vconsole from 'vconsole'; cons ...

  9. 移动端调试利器-vConsole

    现在移动端开发越来越火,随之而来的问题也越来越多,今天给大家介绍一款移动端调试神器,vconsole. 一.先引用文件,可以从https://www.bootcdn.cn/vConsole/下载,也可 ...

随机推荐

  1. 防止跨站请求伪造(CSRF)攻击 和 防重复提交 的方法的实现

    CSRF的概念可以参考:http://netsecurity.51cto.com/art/200812/102951.htm 本文介绍的是基于spring拦截器的Spring MVC实现 首先配置拦截 ...

  2. django之创建第10-1个项目-图片上传并记录上传时间

    1.百度云盘:django之创建第10-1个项目-图片上传并记录上传时间 2.主要修改的配置文件有3个,forms.views和models3个文件以及html 3.forms.py文件修改 #cod ...

  3. Ubuntu字库安装

    目录 [隐藏] 1 字体相关库的简介 1.1 LibXft 1.2 Cairo 1.3 Fontconfig 1.4 Freetype 1.5 Pango 2 基本概念 2.1 点阵字体与矢量字体 2 ...

  4. 高性能Web服务之lnmp架构应用

    传统上基于进程或线程模型架构的web服务通过每进程或每线程处理并发连接请求,这势必会在网络和I/O操作时产生阻塞,其另一个必然结果则是对内存或CPU的利用率低下.生成一个新的进程/线程需要事先备好其运 ...

  5. java实现simhash算法

    一个牛人分享的,放在github上,用java实现,网络上还有很多用ruby写的   https://github.com/commoncrawl/commoncrawl/blob/master/sr ...

  6. UNIX 家族及Linux

    Unix成长为一个非私有的操作系统,是因为1956年的AT&T公司受命于联邦去经营电报电话服务.当然也可以开发软件,甚至那个软件可以有”合理”收费的许可证,但是这个公司却被禁止从事任何和计算机 ...

  7. jquery实现点击展开列表同时隐藏其他列表 js 对象操作 对象原型操作 把一个对象A赋值给另一个对象B 并且对象B 修改 不会影响 A对象

    这篇文章主要介绍了jquery实现点击展开列表同时隐藏其他列表的方法,涉及jquery鼠标事件及节点的遍历与属性操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jquery实现点击 ...

  8. 浅谈 .NET 中的对象引用、非托管指针和托管指针 理解C#中的闭包

    浅谈 .NET 中的对象引用.非托管指针和托管指针   目录 前言 一.对象引用 二.值传递和引用传递 三.初识托管指针和非托管指针 四.非托管指针 1.非托管指针不能指向对象引用 2.类成员指针 五 ...

  9. idea13注册机

    public class Keygen { /** * @param s * @param i * @param bytes * @return */ public static short getC ...

  10. vfork 挂掉的一个问题

    在知乎上,有个人问了这样的一个问题——为什么vfork的子进程里用return,整个程序会挂掉,而且exit()不会?并给出了如下的代码,下面的代码一运行就挂掉了,但如果把子进程的return改成ex ...