我們在開發(fā)手機版網(wǎng)頁的時候，常常會出現(xiàn)下面的情景：
(1) 開發(fā)時，在自己電腦上運行得好好的，在手機上打開就掛了，但是手機上又看不到error log；
(2) 上線后，某用戶表示頁面失靈，但我們自己又重現(xiàn)不出來，看不到用戶側(cè)的出錯信息。
如果說(1)還可以通過電腦連接手機以查看log來解決，那(2)在沒有完善的前端上報體系時就非常被動了。
作為開發(fā)者，我們的訴求很簡單：有沒有快捷的方法在手機前端頁面看到log日志？
答案是肯定的。
vConsole:一個輕量、可拓展、針對手機網(wǎng)頁的前端開發(fā)者調(diào)試面板。
特性：
- 查看 console 日志
- 查看網(wǎng)絡(luò)請求
- 手動執(zhí)行 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>
``
<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"``>調(diào)試日志(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"``>觸發(fā)JS Error</a>
<a href=``"javascript:;" class``=``"weui_btn weui_btn_default js_btn_log_sys"``>打印到系統(tǒng)面板</a>
<a href=``"javascript:;" class``=``"weui_btn weui_btn_default js_btn_ajax"``>發(fā)起AJAX</a>
</div>
<div ``class``=``"weui_toptips weui_notice" id=``"js_tips"``>已打印log</div>
</body>
<script>
console.info(``'歡迎使用 vConsole。vConsole 是一個由微信公眾平臺前端團(tuán)隊研發(fā)的 Web 前端開發(fā)者面板，可用于展示 console 日志，方便開發(fā)、調(diào)試。'``);
$(``'.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) {
// 輸出到系統(tǒng)面板
console.log(``'[system]'``, ``'當(dāng)前時間戳:'``, (+``new Date()));
showTips();
});
$(``'.js_btn_ajax'``).on(``'tap'``, ``function``(e) {
// 發(fā)起一個AJAX
$.get(``'ajax.html'``, ``function``(resp) {
console.log(resp);
});
showTips();
});
// 用于頁面內(nèi)展示頂部tips
var tipsTimer;
function showTips() {
tipsTimer && clearTimeout(tipsTimer);
$(``'#js_tips'``).show();
tipsTimer = setTimeout(``function``() {
$(``'#js_tips'``).hide();
}, 1500);
}
</script>
</html>
|
