不多介紹，以下內(nèi)容直接 copy 了項(xiàng)目的 README.md

簡(jiǎn)介

vConsole 是一個(gè)網(wǎng)頁(yè)前端調(diào)試面板，專為手機(jī) web 頁(yè)面量身設(shè)計(jì)，幫助開發(fā)者更為便捷地進(jìn)行開發(fā)調(diào)試工作。

手機(jī)預(yù)覽

http://wechatfe.github.io/vconsole/demo.html

使用方法

1.下載模塊

checkout 文件 dist/vconsole.min.js 到本地。

2.引入模塊

(1) 如果未使用 AMD/CMD 規(guī)范，可直接在 HTML 中引入 vConsole 模塊：

<script src="path/to/vconsole.min.js"></script>   

(2) 如果使用了 AMD/CMD 規(guī)范，可在 module 內(nèi)使用 require() 引入模塊：

var vConsole = require('path/to/vconsole.min.js');   

3.打印 log 日志

(1) 與 PC 端打印 log 一致，可直接使用 console.log() 等方法直接打印日志：

console.log('Hello World');   

未加載 vConsole 模塊時(shí)， console.log() 會(huì)直接打印到原生控制臺(tái)中；加載 vConsole 后，日志會(huì)打印到頁(yè)面前端+原生控制臺(tái)。

(2) 支持 4 種不同類型的日志，會(huì)以不同的顏色輸出到前端面板：

console.log('foo'); // 白底黑字   console.info('bar'); // 白底紫字   console.debug('oh'); // 白底黃字   console.warn('foo'); // 黃底黃字   console.error('bar'); // 紅底紅字   

(3) 支持打印 Object 對(duì)象，會(huì)以 JSON 字符串格式輸出：

var obj = {};   obj.foo = 'bar';   console.log(obj); // 打印出 {foo: 'bar'}   

(4) 支持傳入多個(gè)參數(shù)，會(huì)以空格隔開：

var uid = 233;   console.log('UserID:', uid); // 打印出 UserID: 233   

(5) 引入模塊后，vConsole 會(huì)有一段很小的延遲來用于初始化工作。此時(shí)若需打印日志，請(qǐng)使用 vConsole.ready() 方法：

// 若未通過 AMD/CMD 方式加載模塊， // vConsole 會(huì)自動(dòng)掛載在全局 window 對(duì)象中，即 window.vConsole vConsole.ready(function() {       console.log('Hello World'); }); 

注意事項(xiàng)

引入 vConsole 模塊后，頁(yè)面前端將會(huì)在右下角出現(xiàn) vConsole 的懸停按鈕，可展開/收起面板。

若不希望普通用戶看到面板，請(qǐng)不要在生產(chǎn)環(huán)境中引入 vConsole 模塊。動(dòng)態(tài)引入模塊的方法可參考 example/demo2.php 示例。