forked from Tencent/vConsole
-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo1.html
142 lines (132 loc) · 4.71 KB
/
demo1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
<title>vConsole/Demo1</title>
<link href="./lib/weui.min.css" rel="stylesheet"/>
<link href="./lib/demo.css" rel="stylesheet"/>
<script src="./lib/zepto.min.js"></script>
<script src="./lib/zepto.touch.min.js"></script>
<!-- 引入vConsole的JS库 -->
<script src="../dist/vconsole.min.js"></script>
</head>
<body ontouchstart>
<div class="page">
<h1 class="page_title">Demo 1</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_get">发起AJAX(GET)</a>
<a href="javascript:;" class="weui_btn weui_btn_default js_btn_ajax_post">发起AJAX(POST)</a>
<a href="javascript:;" class="weui_btn weui_btn_default js_btn_clear">清除日志</a>
<a href="javascript:;" class="weui_btn weui_btn_warn js_btn_hideswitch">隐藏按钮</a>
<a href="javascript:;" class="weui_btn weui_btn_warn js_btn_destroy">销毁vConsole</a>
</div>
<div class="weui_toptips weui_notice" id="js_tips">已打印log</div>
</body>
<script>
// 初始化vConsole
window.vConsole = new window.VConsole({
defaultPlugins: ['system', 'network', 'element', 'storage'], // 可以在此设定要默认加载的面板
maxLogNumber: 1000,
// disableLogScrolling: true,
onReady: function() {
console.log('vConsole is ready.');
},
onClearLog: function() {
console.log('on clearLog');
}
});
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) {
var obj = {
'foo': 'bar',
'obj': {'bool': true},
'arr': [9, 8, 7],
'tips': 'JS对象可以折叠展示'
};
console.log(obj);
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_get').on('tap', function(e) {
// 发起一个AJAX
$.get('ajax.php', { id: Math.random(), action: 'Get' }, function(resp) {
console.log(resp);
});
showTips();
});
$('.js_btn_ajax_post').on('tap', function(e) {
// 发起一个AJAX
$.post('ajax.php', { id: Math.random(), action: 'Post' }, function(resp) {
console.log(resp);
});
showTips();
});
$('.js_btn_clear').on('tap', function(e) {
console.clear();
});
$('.js_btn_hideswitch').on('tap', function(e) {
var that = this;
if ($(this).hasClass('weui_btn_disabled')) {
return false;
}
$(this).addClass('weui_btn_disabled');
window.vConsole.hideSwitch();
var count = 6;
var cb = function() {
count--;
if (count == 0) {
window.vConsole.showSwitch();
$(that).removeClass('weui_btn_disabled');
$(that).html('隐藏按钮');
clearInterval(timer);
return;
}
$(that).html('隐藏按钮(' + count + ')');
}
cb();
var timer = setInterval(cb, 1000);
});
$('.js_btn_destroy').on('tap', function(e) {
if ($(this).hasClass('weui_btn_disabled')) {
return false;
}
$('.weui_btn').addClass('weui_btn_disabled');
window.vConsole.destroy();
$(this).html('刷新页面以重载vConsole');
});
// 用于页面内展示顶部tips
var tipsTimer;
function showTips() {
tipsTimer && clearTimeout(tipsTimer);
$('#js_tips').show();
tipsTimer = setTimeout(function() {
$('#js_tips').hide();
}, 1500);
}
</script>
</html>