一個針對手機網頁的前端 console 調試面板。
簡介
vConsole 是一個網頁前端調試面板，專為手機 web 頁面量身設計，幫助開發者更為便捷地進行開發調試工作。
手機預覽
http://wechatfe.github.io/vconsole/demo.html
使用方法
1.下載模塊
checkout 文件 dist/vconsole.min.js 到本地。
2.引入模塊
(1) 如果未使用 AMD/CMD 規范，可直接在 HTML 中引入 vConsole 模塊。為了便於后續擴展，建議在 <head> 中引入：
<head>
<script src="path/to/vconsole.min.js"></script> </head>
(2) 如果使用了 AMD/CMD 規范，可在 module 內使用 require() 引入模塊：
var vConsole = require('path/to/vconsole.min.js');
3.打印 log 日志
(1) 與 PC 端打印 log 一致，可直接使用 console.log() 等方法直接打印日志：
console.log('Hello World');
未加載 vConsole 模塊時，console.log() 會直接打印到原生控制台中；加載 vConsole 后，日志會打印到頁面前端+原生控制台。
(2) 支持 4 種不同類型的日志，會以不同的顏色輸出到前端面板：
console.log('foo'); // 白底黑字 console.info('bar'); // 白底紫字 console.debug('oh'); // 白底黃字 console.warn('foo'); // 黃底黃字 console.error('bar'); // 紅底紅字
(3) 支持打印 Object 對象，會以 JSON 字符串格式輸出：
var obj = {}; obj.foo = 'bar'; console.log(obj); // 打印出 {foo: 'bar'}
(4) 支持傳入多個參數，會以空格隔開：
var uid = 233; console.log('UserID:', uid); // 打印出 UserID: 233
(5) 引入模塊后，vConsole 會有一段很小的延遲來用於初始化工作。此時若需打印日志，請使用 vConsole.ready() 方法：
// 若未通過 AMD/CMD 方式加載模塊，
// vConsole 會自動掛載在全局 window 對象中，即 window.vConsole vConsole.ready(function() { console.log('Hello World'); });
注意事項
引入 vConsole 模塊后，頁面前端將會在右下角出現 vConsole 的懸停按鈕，可展開/收起面板。
若不希望普通用戶看到面板，請不要在生產環境中引入 vConsole 模塊。動態引入模塊的方法可參考 example/demo2.php 示例。
參考：https://github.com/WechatFE/vConsole