移動前端console調試面板（移動網頁端調試工具）—vConsole

一個針對手機網頁的前端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