170 lines
5.4 KiB
HTML
170 lines
5.4 KiB
HTML
|
<!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"/>
|
|||
|
|
|
|||
|
|
<!-- 引入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">发起GET Request</a>
|
|||
|
|
<a href="javascript:;" class="weui_btn weui_btn_default js_btn_ajax_post">发起POST Request</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: () => {
|
|||
|
|
console.log('vConsole is ready.');
|
|||
|
|
},
|
|||
|
|
onClearLog: () => {
|
|||
|
|
console.log('on clearLog');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
console.info('欢迎使用 vConsole。vConsole 是一个由微信前端团队研发的 Web 前端开发者面板，可用于展示 console 日志，方便开发、调试。');
|
|||
|
|
|
|||
|
|
// 定义一些快捷方法
|
|||
|
|
const DOM = document.querySelector.bind(document);
|
|||
|
|
const DOMs = document.querySelectorAll.bind(document);
|
|||
|
|
const BindTap = (selector, fn) => {
|
|||
|
|
const $elm = typeof selector === 'string' ? DOM(selector) : selector;
|
|||
|
|
$elm.addEventListener('touchend', fn);
|
|||
|
|
};
|
|||
|
|
const Ajax = (method, url, data, callback) => {
|
|||
|
|
const xhr = new XMLHttpRequest();
|
|||
|
|
if (method === 'GET') {
|
|||
|
|
const params = [];
|
|||
|
|
for (let k in data) {
|
|||
|
|
params.push(k + '=' + data[k]);
|
|||
|
|
}
|
|||
|
|
url += '?' + params.join('&');
|
|||
|
|
}
|
|||
|
|
xhr.open(method, url);
|
|||
|
|
xhr.send(data);
|
|||
|
|
xhr.onload = () => {
|
|||
|
|
callback(xhr.response);
|
|||
|
|
};
|
|||
|
|
xhr.onerror = () => {
|
|||
|
|
console.log('XHR Error');
|
|||
|
|
};
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
DOMs('.js_btn_log').forEach(($elm) => {
|
|||
|
|
BindTap($elm, (e) => {
|
|||
|
|
const type = e.target.dataset.type;
|
|||
|
|
console[type](type); // 例如，console.log(type)
|
|||
|
|
showTips();
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
BindTap('.js_btn_log_obj', (e) => {
|
|||
|
|
const obj = {
|
|||
|
|
'foo': 'bar',
|
|||
|
|
'obj': {'bool': true},
|
|||
|
|
'arr': [9, 8, 7],
|
|||
|
|
'tips': 'JS对象可以折叠展示'
|
|||
|
|
};
|
|||
|
|
console.log(obj);
|
|||
|
|
showTips();
|
|||
|
|
});
|
|||
|
|
BindTap('.js_btn_trigger_error', (e) => {
|
|||
|
|
showTips();
|
|||
|
|
const err = undefined;
|
|||
|
|
err.a = 1;
|
|||
|
|
});
|
|||
|
|
BindTap('.js_btn_log_sys', (e) => {
|
|||
|
|
// 输出到系统面板
|
|||
|
|
console.log('[system]', '当前时间戳:', (+new Date()));
|
|||
|
|
showTips();
|
|||
|
|
});
|
|||
|
|
BindTap('.js_btn_ajax_get', (e) => {
|
|||
|
|
// 发起一个AJAX
|
|||
|
|
Ajax('GET', 'ajax.json', { id: Math.ceil(Math.random() * 10000), action: 'Get' }, (resp) => {
|
|||
|
|
console.log(resp);
|
|||
|
|
});
|
|||
|
|
showTips();
|
|||
|
|
});
|
|||
|
|
BindTap('.js_btn_ajax_post', (e) => {
|
|||
|
|
// 发起一个AJAX
|
|||
|
|
Ajax('POST', 'ajax.json', { id: Math.ceil(Math.random() * 10000), action: 'Post' }, (resp) => {
|
|||
|
|
console.log(resp);
|
|||
|
|
});
|
|||
|
|
showTips();
|
|||
|
|
});
|
|||
|
|
BindTap('.js_btn_clear', (e) => {
|
|||
|
|
console.clear();
|
|||
|
|
});
|
|||
|
|
BindTap('.js_btn_hideswitch', (e) => {
|
|||
|
|
const $elm = e.target;
|
|||
|
|
if ($elm.classList.contains('weui_btn_disabled')) {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
$elm.classList.add('weui_btn_disabled');
|
|||
|
|
window.vConsole.hideSwitch();
|
|||
|
|
let count = 6;
|
|||
|
|
const cb = () => {
|
|||
|
|
count--;
|
|||
|
|
if (count == 0) {
|
|||
|
|
window.vConsole.showSwitch();
|
|||
|
|
$elm.classList.remove('weui_btn_disabled');
|
|||
|
|
$elm.innerHTML = '隐藏按钮';
|
|||
|
|
clearInterval(timer);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
$elm.innerHTML = '隐藏按钮(' + count + ')';
|
|||
|
|
}
|
|||
|
|
cb();
|
|||
|
|
let timer = setInterval(cb, 1000);
|
|||
|
|
});
|
|||
|
|
BindTap('.js_btn_destroy', (e) => {
|
|||
|
|
const $elm = e.target;
|
|||
|
|
if ($elm.classList.contains('weui_btn_disabled')) {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
DOMs('.weui_btn').forEach(($elm) => {
|
|||
|
|
$elm.classList.add('weui_btn_disabled');
|
|||
|
|
});
|
|||
|
|
window.vConsole.destroy();
|
|||
|
|
$elm.innerHTML = '刷新页面以重载vConsole';
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 用于页面内展示顶部tips
|
|||
|
|
let tipsTimer;
|
|||
|
|
const showTips = () => {
|
|||
|
|
tipsTimer && clearTimeout(tipsTimer);
|
|||
|
|
DOM('#js_tips').style.display = 'block';
|
|||
|
|
tipsTimer = setTimeout(() => {
|
|||
|
|
DOM('#js_tips').style.display = 'none';
|
|||
|
|
}, 1500);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
</html>
|