前端讀者 | 前端開發者調試面板vConsole

來着微信團隊開源的一個調試工具，[GitHub地址]https://github.com/Tencent/vConsole

一個輕量、可拓展、針對手機網頁的前端開發者調試面板。

特性

• 查看 console 日誌
• 查看網絡請求
• 查看頁面 element 結構
• 查看 Cookies 和 localStorage
• 手動執行 JS 命令行
• 自定義插件

上手

下載 vConsole 的最新版本。（不要直接下載 dev 分支下的 dist/vconsole.min.js）

或者使用 npm 安裝：

npm install vconsole

引入 dist/vconsole.min.js 到項目中：

<script src="path/to/vconsole.min.js"></script>
<script>
  // 初始化
  var vConsole = new VConsole();
  console.log('Hello world');
</script>

若是使用了 AMD/CMD 規範，可在 module 內使用 require() 引入模塊：

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

打印日誌

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

console.log('Hello World');

未加載 vConsole 模塊時，console.log() 會直接打印到原生控制檯中；加載 vConsole 後，日誌會打印到頁面前端+原生控制檯

• 支持 4 種不一樣類型的日誌，會以不一樣的顏色輸出到前端面板

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

• 支持打印 Object 對象，會以 JSON 字符串格式輸出

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

手機預覽