【總結(jié)】1769- 移動(dòng)端調(diào)試神器 Whistle

移動(dòng)端調(diào)試神器 Whistle

在前端開發(fā)中移動(dòng)端開發(fā)技能必不可少。當(dāng)我們遇到類似于這樣的問題：

1. 移動(dòng)端Canvas渲染失敗

2. 微信獲取openId回調(diào)頁(yè)不匹配

3. 微信瀏覽器文件上傳失敗

4. 支付寶，微信H5支付域名校驗(yàn)不匹配

5. 生產(chǎn)環(huán)境BUG，dev，test環(huán)境無法復(fù)現(xiàn)

6. 當(dāng)后端接口啟用cors跨域時(shí)，本地環(huán)境無法訪問

7. …

Chrome模擬器和微信開發(fā)者工具等都無法完美復(fù)現(xiàn)我們遇到的問題，這時(shí)候我們需要用到whistle來實(shí)現(xiàn)真機(jī)調(diào)試

Whistle原理

Whistle是一個(gè)Node實(shí)現(xiàn)的跨平臺(tái)Web調(diào)試代理工具。它的作用可以理解為用Node開一個(gè)代理服務(wù)器，將我們需要調(diào)試的設(shè)備代理到whistle后，由whistle進(jìn)行代理請(qǐng)求。同時(shí)whistle支持類似于hosts的轉(zhuǎn)發(fā)規(guī)則，我們可以通過正則或者內(nèi)置的一些指令對(duì)我們需要進(jìn)行代理的域名進(jìn)行轉(zhuǎn)發(fā)，添加插件等。

安裝whistle

npm install -g whistle

啟動(dòng)whistle

w2 start or w2 start -p 10086

?  ~ w2 start
[!] [email protected] is running
[i] 1. use your device to visit the following URL list, gets the IP of the URL you can access:
       http://127.0.0.1:8899/
       http://192.168.97.12:8899/
       Note: If all the above URLs are unable to access, check the firewall settings
             For help see https://github.com/avwo/whistle
[i] 2. configure your device to use whistle as its HTTP and HTTPS proxy on IP:8899
[i] 3. use Chrome to visit http://local.whistlejs.com/ to get started
復(fù)制代碼

此時(shí)我們已經(jīng)開啟了whistle的代理，通過瀏覽器訪問http://127.0.0.1:8899/即可看到 whistle控制臺(tái)。

接下來我將介紹在window、mac、iPhone、Android中分別如何利用whistle進(jìn)行代理抓包。

設(shè)置代理

移動(dòng)端設(shè)置代理

連接到同一個(gè)WIFI下，iPhone及Android在wifi中設(shè)置代理，代理IP為：192.168.97.12（即是上面打印出來的局域網(wǎng)IP），端口號(hào)為：8899（也可以通過-p 10086 ）指定自定義端口號(hào)。保存后我們的移動(dòng)端設(shè)備就已經(jīng)連接上了whistle。

PC端設(shè)置代理

因?yàn)槲覀冊(cè)赑C日常開發(fā)中，常用Chrome瀏覽器，所以這里只展示下Chrome瀏覽器下的代理設(shè)置。

PC端Chrome代理時(shí)，我這里推薦使用 Proxy switchyOmega（Chrome插件） 下載完成后，進(jìn)入SwitchOmege配置。默認(rèn)安裝后，會(huì)有一個(gè)名為proxy的情景模式，我們將其改名為Whistle。

修改完名字后，我們將我們的局域網(wǎng)IP及whistle的端口號(hào)填入到代理服務(wù)器中并應(yīng)用選項(xiàng)。

此時(shí)，我們就可以進(jìn)行whistle在PC端的代理，這里還推薦修改一個(gè)配置。默認(rèn)代理模式為系統(tǒng)代理，因?yàn)楸娝苤脑颍旧铣绦騿T都會(huì)進(jìn)行科學(xué)上網(wǎng)，所以這里將默認(rèn)配置改為系統(tǒng)代理，避免我們?nèi)粘Ｊ褂脮r(shí)被代理到whistle，無法科學(xué)上網(wǎng)的問題。

安裝HTTPS證書

現(xiàn)在基本上絕大多數(shù)域名都是走HTTPS協(xié)議，所以想要whistle進(jìn)行HTTPS協(xié)議的代理我們還需要安裝HTTPS證書。

下載證書

PC端：點(diǎn)擊頂部工具欄中的HTTPS，打開whistle的HTTPS證書彈框，點(diǎn)擊Download RootCA下載HTTPS證書。

移動(dòng)端：連接上whistle代理后，通過瀏覽器掃碼，會(huì)自動(dòng)下載證書

window安裝證書

下載完成后雙擊打開，將證書安裝到受信任的根證書頒發(fā)機(jī)構(gòu) 完成安裝即可。

Mac安裝證書

下載完成后雙擊打開，將證書安裝到本地項(xiàng)目或者登錄都可以，之后在你安裝的地方搜索whistle，雙擊打開，選擇信任，設(shè)置為始終信任

iPhone安裝證書

設(shè)置----通用-----關(guān)于本機(jī)------證書信任設(shè)置------>找到whistle證書打開信任

Android安裝證書

視各個(gè)廠商系統(tǒng)而定，可以在具體掃碼后根據(jù)提示設(shè)置。

Weinre調(diào)試

好了，至此我們完成了whistle的所有準(zhǔn)備工作，接下來介紹whistle中給我們提供的功能

redirect 重定向

打開whistle控制臺(tái)，我們可以看到左側(cè)有個(gè)Rules，在這里面我們可以進(jìn)行一些跳轉(zhuǎn)規(guī)則的分組，配置。這里的配置類似于我們?nèi)粘?huì)修改的hosts文件的配置，前面的域名是需要代理的域名，后面的是需要指向的地址。這里我將https://www.baidu.com 重定向到 https://www.bilibili.com。

【！！注意！！這里在iPhone上有個(gè)坑，在iPhone上調(diào)試的時(shí)候，前面的域名一定要加上https，不然在iPhone中會(huì)出現(xiàn)證書驗(yàn)證不過的問題】

然后我們新開tab頁(yè)，切換switchOmega到我們剛剛設(shè)置的Whistle情景模式，輸入https://www.baidu.com 可以看到現(xiàn)在百度已經(jīng)被成功跳轉(zhuǎn)到B站了。

重定向在我們?nèi)粘Ｖ械氖褂眠€是比較廣闊的，舉個(gè)例子：

1. 當(dāng)我們需要在本地訪問線上接口時(shí)，會(huì)有cors跨域問題，這時(shí)候可以通過偽裝域名來繞過這個(gè)限制

2. 當(dāng)我們?cè)陂_發(fā)微信或者支付寶相關(guān)功能時(shí)，此時(shí)微信或支付寶后臺(tái)有安全域名限制，這時(shí)候也可以通過這個(gè)重定向來完成

log 日志打印

移動(dòng)端調(diào)試最痛苦的莫過于完全沒辦法看到log日志，特別是在生產(chǎn)環(huán)境下時(shí)我們也無法通過vconsole或者eruda等工具來輔助我們查看。所以這里我們可以通過在whistle中添加log://關(guān)鍵字來導(dǎo)出console日志。

配置好后，切換到Network選項(xiàng)中，我們可以在這里看到所有http請(qǐng)求，以此來排查接口或者資源請(qǐng)求等問題。選擇到我們打開的域名所在的請(qǐng)求，例如我這里用https://www.baidu.com 舉例。再通過右側(cè)工具欄的Tools即可看到我們頁(yè)面中使用到的console

這個(gè)功能適合我們?cè)谂挪橐恍┥a(chǎn)問題時(shí)，通過log日志去追蹤問題所在，或者看到j(luò)s中出現(xiàn)了那些錯(cuò)誤。在一些機(jī)型兼容問題排查時(shí)有很大的幫助作用。

jsPrepend js注入

whistle支持讓我們?cè)诩虞d網(wǎng)頁(yè)時(shí)進(jìn)行預(yù)制javascript代碼的注入，點(diǎn)擊左側(cè)欄的Values，打開js腳本管理。這里我以注入eruda為例，首先我們?nèi)pm或者bootcdn等類似的網(wǎng)站上找到我們想要注入的一些工具庫(kù)，例如我這里使用了eruda.min.js。通過Create創(chuàng)建一個(gè)新的腳本。將腳本文件拷貝進(jìn)去。

然后新建腳本eruda.js嵌入初始化代碼

OK，做好準(zhǔn)備工作。我們?cè)倩氐?code style="font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 0.87em;word-break: break-word;border-radius: 2px;overflow-x: auto;background-color: rgb(255, 245, 245);color: rgb(255, 80, 44);padding: 0.065em 0.4em;">Rules中進(jìn)行js注入的配置，這里我們注入剛剛寫的eruda.min.js和eruda.js

然后我們?cè)偃ゴ蜷_下https://m.baidu.com查看下效果，可以看到eruda已經(jīng)注入進(jìn)來了

因?yàn)橐苿?dòng)端不像Chrome的devTool一樣，可以自由的修改及運(yùn)行js代碼，所以這個(gè)功能給我們提供了這種可能。同時(shí)也讓我們可以在測(cè)試生產(chǎn)環(huán)境代碼時(shí)可以注入一些方便調(diào)試的工具庫(kù)進(jìn)來。

weinre 移動(dòng)端調(diào)試

weinre是一個(gè)歷史悠久的移動(dòng)端調(diào)試工具，其界面仿照Chrome的DevTool設(shè)計(jì)，可以輕松的看到Dom樹的結(jié)構(gòu)，Network請(qǐng)求，Console等等，不過因?yàn)槠錃v史悠久目前穩(wěn)定性較差，有些時(shí)候并不一定百分百生效，而且配置起來相對(duì)麻煩。whistle中也內(nèi)置了weinre，讓我們能夠輕松快捷的去使用weinre。

同樣，我們打開Rules，然后加https://www.baidu.com中加上weinew://baidu這個(gè)指令（這里最后的baidu是指weinre的實(shí)例名，可以自由指定）

完成后，我們可以通過頂部工具欄的Weinre中可以看到我們添加的baidu實(shí)例，點(diǎn)擊后即可進(jìn)入weinre調(diào)試中。

在瀏覽器中打開https://www.baidu.com后，即可看到weinre中提示百度已經(jīng)連接上來了。

至此，whistle中常用的功能大概介紹完畢了。whistle中支持的功能還有很多，以上只是介紹了一些前端調(diào)試中經(jīng)常用到功能，如果感興趣的同學(xué)可以自行再去研究下whistle文檔