一個針對手機網頁的前端console調試面闆，并将其開源了，一個非常有用的開發調試工具。
項目位址： https://github.com/WechatFE/vConsole 。
不多介紹，以下内容直接 copy 了項目的 README.md
簡介
vConsole 是一個網頁前端調試面闆，專為手機 web 頁面量身設計，幫助開發者更為便捷地進行開發調試工作。
效果預覽
預覽二維碼
使用方法
1.下載下傳子產品
checkout 檔案 dist/vconsole.min.js 到本地。
2.引入子產品
(1) 如果未使用 AMD/CMD 規範，可直接在 HTML 中引入 vConsole 子產品：
<script src="path/to/vconsole.min.js"></script>
1.
(2) 如果使用了 AMD/CMD 規範，可在 module 内使用 require() 引入子產品：
var vConsole = require('path/to/vconsole.min.js');
1.
3.列印 log 日志
(1) 與 PC 端列印 log 一緻，可直接使用 console.log() 等方法直接列印日志：
console.log('Hello World');
1.
未加載 vConsole 子產品時， console.log() 會直接列印到原生控制台中；加載 vConsole 後，日志會列印到頁面前端+原生控制台。
(2) 支援 4 種不同類型的日志，會以不同的顔色輸出到前端面闆：
console.log('foo'); // 白底黑字
console.info('bar'); // 白底紫字
console.debug('oh'); // 白底黃字
console.warn('foo'); // 黃底黃字
console.error('bar'); // 紅底紅字
1.
2.
3.
4.
5.
(3) 支援列印 Object 對象，會以 JSON 字元串格式輸出：
var obj = {};
obj.foo = 'bar';
console.log(obj); // 列印出 {foo: 'bar'}
1.
2.
3.
(4) 支援傳入多個參數，會以空格隔開：
var uid = 233;
console.log('UserID:', uid); // 列印出 UserID: 233
1.
2.
(5) 引入子產品後，vConsole 會有一段很小的延遲來用于初始化工作。此時若需列印日志，請使用 vConsole.ready() 方法：
// 若未通過 AMD/CMD 方式加載子產品，
// vConsole 會自動挂載在全局 window 對象中，即 window.vConsole
vConsole.ready(function() {
console.log('Hello World');
});
1.
2.
3.
4.
5.
注意事項
引入 vConsole 子產品後，頁面前端将會在右下角出現 vConsole 的懸停按鈕，可展開/收起面闆。
若不希望普通使用者看到面闆，請不要在生産環境中引入 vConsole 子產品。動态引入子產品的方法可參考 example/demo2.php 示例。
http://www.grycheng.com/?p=2483