神器whistle實現(xiàn)移動端頁面調(diào)試的三種姿勢
背景
移動端開發(fā)過程中，查看打印的log是必不可少的，一般的做法都是在開發(fā)環(huán)境下通過webpack注入vconsole，但是對于線上頁面的調(diào)試，這一招就不靈了。來看看新一代抓包工具whistle如何實現(xiàn)頁面調(diào)試的。
whistle介紹
whistle 是一款用 Node 實現(xiàn)的跨平臺的 Web 調(diào)試代理工具，支持查看修改 http(s)、Websocket 連接的請求和響應內(nèi)容。簡而言之就是 Node 版的 Fiddler、Charles，不過這個工具能遠比后兩者更加適合 Web 開發(fā)者、使用更簡單、功能也更加實用。筆者在用了一段時間以后，已經(jīng)徹底放棄了charles、fiddler，擁抱了whistle。
頁面調(diào)試的三種姿勢
whistle有兩種方式可以讓開發(fā)者查看log
1. Tools中自帶的console功能
只需要在rules中配置下當前頁面域名的log就可以了，然后手機訪問頁面，就可以在下圖中的console面板中看到打印的日志
效果：
2. 頁面注入vconsole
這里需要科普下，whistle中的配置分為rules和values，
- rules主要用于設置匹配規(guī)則，及匹配后的操作行為
- values主要是設置操作行為用到的值，比如替換接口json、js文件等
- 在rules中使用jsPrepend（自帶api）配置注入vconsole和初始化的代碼
- 將vconsole及初始化的代碼粘貼到values中文件中
- 用手機或電腦訪問匹配規(guī)則的頁面，就可以在當前頁面注入vconsole了。
3. Weinre真機遠程調(diào)試
Weinre(Web Inspector Remote)是一款基于Web Inspector(Webkit)的遠程調(diào)試工具， 它使用JS編寫， 可以讓我們在電腦上直接調(diào)試運行在手機上的遠程頁面。與傳統(tǒng)的Web Inspector的使用場景不同， Weinre的使用場景如下圖， 調(diào)試的頁面在手機上， 調(diào)試工具在PC的chrome， 二者通過網(wǎng)絡連接通信。
whistle內(nèi)置了Weinre這個工具，方便我們進行遠程調(diào)試，最大的用處就是我們可以在PC電腦上調(diào)試手機端頁面
- 配置規(guī)則：
juejin.cn/user/ weinre://
- 點開whistle中的標簽weinre -> anonymous
- 用手機上任意一款app（我用的微信）掃碼打開測試頁面地址（https://juejin.cn/user/2875978150319527）
- 打開后，在電腦的weinre頁面會看到Targets部分變成綠色，表示調(diào)試過程沒問題，刷新頁面可以看到頁面的打印、dom等信息。
使用總結(jié)
個人感覺whistle有以下幾個明顯的優(yōu)點：
- 所有配置都是文本命令式的，配置比較快捷、便于復制給同事復用，而charles、fiddler界面操作配置相對繁瑣，不便于給他人復用。
- whistle和瀏覽器插件Proxy SwitchyOmega（代理切換工具）配合使用，可以快捷的切換代理
- 接口數(shù)據(jù)重定向本地json時，往往會遇到跨域問題，whistle只需一行配置就可以解決跨域
pattern file://{本地.json}
pattern resCors://enable
總之，這款代理工具，功能還是十分強大的，而且配置規(guī)則極其方便快捷，使用文檔也是中文的。