手機前端開發調試利器 – vConsole

標籤：git   idt   latest   預覽   png   請求   https   最新版本   ima   

我們在開發手機版網頁的時候，常常會出現下面的情景：

(1) 開發時，在自己電腦上運行得好好的，在手機上開啟就掛了，但是手機上又看不到error log；

(2) 上線後，某使用者表示頁面失靈，但我們自己又重現不出來，看不到使用者側的出錯資訊。

如果說(1)還可以通過電腦串連手機以查看log來解決，那(2)在沒有完善的前端上報體系時就非常被動了。

作為開發人員，我們的訴求很簡單：有沒有快捷的方法在手機前端頁面看到log日誌？

答案是肯定的。

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

特性：

• 查看 console 日誌
• 查看網路請求
• 手動執行 JS 命令列
• 自訂外掛程式

上手

下載 vConsole 的最新版本。（不要直接下載 dev 分支下的 dist/vconsole.min.js）
或者使用 npm 安裝：

1	npm install vconsole

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

12345

<script src="path/to/vconsole.min.js"></script><script>console.log(‘Hello world‘);// 然後點擊右下角 vConsole 按鈕即可查看到 log</script>

手機預覽

手機掃描下方二維碼或訪問：http://www.w3cways.com/demo/vconsole/

文檔

vConsole 本體：

使用教程 | 公用屬性及方法 | 輔助函數

手機前端開發調試利器 – vConsole