手机前端开发调试利器 – vConsole

最新推荐文章于 2024-03-12 15:13:28 发布

weixin_34375251

最新推荐文章于 2024-03-12 15:13:28 发布

阅读量248

点赞数

文章标签：前端 javascript ViewUI

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

(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>

weixin_34375251

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
手机前端开发调试利器 – vConsole

我们在开发手机版网页的时候，常常会出现下面的情景：(1) 开发时，在自己电脑上运行得好好的，在手机上打开就挂了，但是手机上又看不到error log；(2) 上线后，某用户表示页面失灵，但我们自己又重现不出来，看不到用户侧的出错信息。如果说(1)还可以通过电脑连接手机以查看log来解决，那(2)在没有完善的前端上报体系时就非常被动了。作为开发者，我们的诉求很简单：有没有快捷的方法在手机前端...
复制链接

扫一扫