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

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

(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

 到項目中：

1 2 3 4 5

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

手機預覽

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

文檔

vConsole 本體：

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

插件：

插件：入門 | 插件：編寫插件 | 插件：Event 事件清單