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

標籤：手機版   控制   控制台   releases   網頁   body   comment   最新   手機   

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

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

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

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

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

答案是肯定的。

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

使用方法

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

npm install vconsole

 

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

12345

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

如果是通過npm安裝，採用webpack的項目可以通過在main.js中這樣引用：

let VConsole = require(‘vconsole‘);new VConsole(); 然後就可以在移動端通過控制台查看列印了

 

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