移動端調試工具vConsole

時間 2020-05-22

標籤移動調試工具 vconsole 欄目無線简体版

原文原文鏈接

項目開發時常常須要debug調試，但在移動端debug則會阻斷代碼運行，而且很難判斷出錯在哪裏，這裏咱們須要藉助第三方插件 vConsole前端

安裝：

1.下載模塊：

下載 vConsole 的最新版本或使用 npm 安裝：git

npm install vconsole

而後複製 dist/vconsole.min.js 到本身的項目中github

2.引入模塊：

(1) 若是未使用 AMD/CMD 規範，可直接在 HTML 中引入 vConsole 模塊。爲了便於後續擴展，建議在 <head> 中引入：npm

<head>
  <script src="path/to/vconsole.min.js"></script>
  <script>
    var vConsole = new VConsole(); </script>
</head>

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

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

請注意，VConsole 只是 vConsole 的原型，而非一個已實例化的對象。因此在手動 new 實例化以前，vConsole 不會被插入到網頁中。ui

使用方法：

初始化 & 配置

引入後, 須要手動初始化 vConsole：spa

var vConsole = new VConsole(option);

option 是一個選填的 object 對象，具體配置定義請參閱公共屬性及方法。插件

使用 setOption() 來更新 option：debug

vConsole.setOption('maxLogNumber', 5000); // 或者：
vConsole.setOption({maxLogNumber: 5000});

打印日誌

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

console.log('Hello World');

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

日誌類型

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

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

其餘方法

支持如下 console 方法：

console.time('foo');    // 啓動名爲 foo 的計時器
console.timeEnd('foo'); // 中止 foo 計時器並輸出通過的時間

Object/Array 結構化展現

支持打印 Object 或 Array 變量，會以結構化 JSON 形式輸出（並摺疊）：

var obj = {}; obj.foo = 'bar'; console.log(obj); /* Object { foo: "bar" } */

多態

支持傳入多個參數，會以空格隔開：

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

特殊格式

支持使用 [system] 做爲第一個參數，來將 log 輸出到 System 面板：

console.log('[system]', 'foo'); // 'foo' 會輸出到 System 面板
console.log('[system] bar'); // 這行日誌會輸出到 Log 面板而非 System 面板

若編寫自定義 log 面板插件，亦可經過上述格式將 log 輸出到自定義面板：

console.log('[myplugin]', 'bar'); // 'myplugin' 爲自定義面板插件的 id

內置插件

Network 網絡

全部 XMLHttpRequest 請求都會被顯示到 Network tab 中。

若不但願一個請求顯示在面板中，可添加屬性 _noVConsole = true 到 XHR 對象中：

var xhr = new XMLHttpRequest(); xhr._noVConsole = true; // 不會顯示到 tab 中
xhr.open("GET", 'http://example.com/'); xhr.send();

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。