vConsole

一個針對手機網頁的前端 console 調試面板。

簡介

vConsole 是一個網頁前端調試面板，專為手機 web 頁面量身設計，幫助開發者更為便捷地進行開發調試工作。

手機預覽

使用方法

1.下載模塊

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

2.引入模塊

(1) 如果未使用 AMD/CMD 規范，可直接在 HTML 中引入 vConsole 模塊。為了便于后續擴展，建議在

中引入：

(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 示例。

更新記錄

License

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的html页面手机端console,GitHub - MobileHTML5/vConsole: 一个针对手机网页的前端 console 调试面板。...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。