標籤：.sh css boolean https 時間 bug demo 資訊 使用者表
我們在開發手機版網頁的時候，常常會出現下面的情景：
(1) 開發時，在自己電腦上運行得好好的，在手機上開啟就掛了，但是手機上又看不到error log；
(2) 上線後，某使用者表示頁面失靈，但我們自己又重現不出來，看不到使用者側的出錯資訊。
如果說(1)還可以通過電腦串連手機以查看log來解決，那(2)在沒有完善的前端上報體系時就非常被動了。
作為開發人員，我們的訴求很簡單：有沒有快捷的方法在手機前端頁面看到log日誌？
答案是肯定的。
vConsole:一個輕量、可拓展、針對手機網頁的前端開發人員調試面板。
特性：
上手
下載 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();});// 用於頁面內展示頂部tipsvar tipsTimer;function showTips() {tipsTimer && clearTimeout(tipsTimer);$(‘#js_tips‘).show();tipsTimer = setTimeout(function() {$(‘#js_tips‘).hide();}, 1500);}</script></html>
手機前端開發調試利器 – vConsole
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
