我們在開發手機版網頁的時候，常常會出現下面的情景：
(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 本體：