小東西快快學快快記，大知識按計劃學，不拖延
本來手機調試是放在 whistle 入門介紹那篇內容的，但是由於那篇篇幅太長，這部分內容又比較獨立，所以就單獨放一篇來說了
whistle 可以幫助我們更好地調試，當然也包括手機調試
如果沒看過 whistle 入門的，可以先去看哈 前端調試必備-whistle 入門
下面就按三個部分寫
1、配置手機代理
2、快速注入 vConsole
3、whistle 查看移動端 console 打印
4、whistle 查看移動端 頁面信息
本文很簡單，前提看過 前端調試必備-whistle 入門
手機配置代理
之前我們whistle 在 PC 端配置了 代理，讓瀏覽器的請求 通過 工具 轉發到 whistle，whistle 再轉發到 真實服務器。
同樣的，如果我們想要抓 手機的包，那麼我們也要配置 手機的代理 ，讓請求走到 whsitle
1、保證 手機和 PC 在同一局域網
比如連着同一個 wifi
2、查看 PC 的IP 端口
在 whistle 界面快速查看 PC ip 端口
3、手機配置wifi代理到PC 的 IP 端口
點擊連接的wifi 配置，下拉到最後，代理改成手動輸入 PC 端的 IP 和 端口，然後點擊保存即可。
可以在移動端瀏覽器隨便打開個網頁看看，請求是否出現在 whistle 的 network 菜單中
注入vConsole
之前手機調試大多數是項目加上一個 vConsole 吧，其實只是開發需要用到的東西，沒有必要放在代碼裏，還很容易帶到生產環境
我們現在可以利用 whistle 直接注入
www.test.com localhost:5500 whistle.inspect://vConsoleok，這樣就方便多了
whistle 查看移動端 console 輸出
我們可以利用 whistle 更加方便在 PC 端查看移動端的 console 輸出
PC端 調試 總是 比 移動端要 方便很多
協議是 log ，這麼配置
www.test.com localhost:5500 log://寫個例子
1、在頁面中加入一段打印
2、點擊 whistle 界面的 network 菜單，右側面板的 Tool 菜單
3、移動端訪問頁面
whistle就會捕獲到頁面的console
console 區分界面
可以看到，我們配置了 www.test.com 轉發到了 localhost:5500，但是一般情況下，某個域名下是會有很多頁面的啊
如果所有頁面的 console 都輸出到一起，就會十分混亂
所以我們可以給 whistle 的 console 輸出區分頁面這時候我們就需要給 log 協議加上一個 頁面別名
現在有兩個頁面了
然後訪問他們之後，我們來驗證下
可惜的是，你切換的時候，並不會清空上一個頁面的 console，仍然會保留有。這應該是一個 bug
whistle 查看移動端頁面信息
如果只是爲了查看 log 輸出，那麼上面已經夠用了
但是有時我們還需要查看移動端的其他信息，比如 dom 結構啊，localstorage 的存儲啊 之類的
雖然我們可以使用 vConsole 看，但是就是不方便，移動端調試非常地麻煩！！
我們今天可以使用 whistle 的 weinre 協議進行更高級的 移動端調試！
老規矩，配置一個頁面爲例
www.test.com localhost:5500 weinre://page1協議後面也是 頁面的 別名，隨便命名
注意！我們一定要先在移動端訪問 這個界面，whistle 捕獲到之後才能進行調試
1、點擊頂部菜單的 Wenire
出現一個菜單，裏面有我們配置的 頁面別名
2、點擊我們Weinre 中 配置的頁面，page1
進入到一個新 頁面，有各種信息tab，都是有關於這個頁面的
如果點擊 tab，發現沒有內容，就在移動端刷新下頁面就好了
是不是很驚喜？移動端調試的麻煩，真是個痛啊
現在我們僅僅利用 whistle 就可以幫助我們在移動端調試 的效率提高 N 倍！主要是不那麼煩了
鑑於本人能力有限，難免會有疏漏錯誤的地方，請大家多多包涵， 如果有任何描述不當的地方，歡迎後臺聯繫本人，領取紅包
本文分享自微信公衆號 - 神仙朱（skying-zhu）。
如有侵權，請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。