使用場景
在日常開發(fā)中悴侵，往往會碰到許多在真機(jī)上才會出現(xiàn)的問題箱叁，在測試環(huán)境尚且可以通過發(fā)布代碼解決铡羡，遇到線上問題時积蔚，怎么去快速定位問題調(diào)試代碼呢？這里推薦調(diào)試神器whistle烦周，有了神器尽爆，你可以：
- 在電腦本地編碼，手機(jī)上直接看頁面效果读慎，無需發(fā)布到服務(wù)器漱贱，調(diào)試效率up！up夭委！up幅狮！
- 可在微信及瀏覽器或其他允許代理的app中調(diào)試h5頁面，通過代理模擬線上請求環(huán)境，提前進(jìn)行生產(chǎn)驗(yàn)證崇摄，無需等前端發(fā)布擎值。
- 可以抓包生產(chǎn)返回的數(shù)據(jù)，定位問題
- （其他暫未發(fā)掘的功能逐抑，如有補(bǔ)充鸠儿，評論區(qū)討論哈...）
使用步驟
whistle 安裝：
Node安裝成功后，執(zhí)行如下npm命令安裝whistle
sudo npm install -g whistle
whistle 啟動：
whistle start
然后會自動生成代理地址和端口厕氨。
訪問 http://127.0.0.1:8899/#rules 可以進(jìn)入規(guī)則配置頁进每。
網(wǎng)絡(luò)代理設(shè)置
ios 手機(jī)設(shè)置
WI-FI選擇
手機(jī)和電腦需要連接同一個網(wǎng)段下的wifi，才支持代理測試
https 證書信任
進(jìn)入 whistle 管理臺命斧，點(diǎn)擊頭部 https 按鈕田晚，選中 Capture TUNNEL CONNECTs， Enable HTTP/2国葬，相機(jī)掃碼打開鏈接下載證書（如果掃碼不行就直接下載了再傳到手機(jī)贤徒，ios下需要隔空投送才能打開證書安裝）。
先設(shè)置-通用-描述文件與設(shè)備管理胃惜，安裝證書泞莉。
再選擇通用-關(guān)于本機(jī)-證書信任設(shè)置，信任 whistle 證書船殉。
以上是ios的設(shè)置鲫趁，安卓也類似，需要安裝證書利虫，信任證書挨厚，打開開發(fā)者調(diào)試。
pc端設(shè)置
mac下糠惫，系統(tǒng)偏好設(shè)置-網(wǎng)絡(luò)-wifi-高級-代理-網(wǎng)頁代理疫剃，填寫網(wǎng)絡(luò)代理服務(wù)器：127.0.0.1，端口：8899硼讽，點(diǎn)擊好巢价，點(diǎn)擊應(yīng)用即可。
然后就可以配置whsitle規(guī)則固阁，使用測試環(huán)境的鏈接進(jìn)行代理本地的開發(fā)代碼壤躲，可解決本地不能登錄測試環(huán)境的問題
代理設(shè)置
手機(jī)連接和電腦一樣的wifi，將wifi設(shè)置手動代理為 whistle 啟動時顯示的 ip 和 端口备燃。
whistle 規(guī)則設(shè)置
將 whistle 規(guī)則配置為代理的域名指向本地開發(fā) ip 和端口碉克。比如訪問 https://test.whistle.com/s/home/ 時代理到本地開發(fā)環(huán)境http://0.0.0.0:5000/ 配置如下：
# 配置 host
https://test.whistle.com/s/home/ http://0.0.0.0:5000/
# 配置資源
/test.whistle.com\/js\/(.*)\.(.*)/ http://0.0.0.0:5000/js/$1.$2
具體參考匹配原則 。
最后
最后可以愉快的在本地進(jìn)行開發(fā)并齐，手機(jī)真機(jī)上快速顯示效果啦漏麦。
Weinre
weinre 是一個強(qiáng)大的移動端調(diào)試工具客税，whistle 已經(jīng)將它集成在內(nèi)了。通過它我們可以調(diào)試各種樣式真機(jī)兼容問題撕贞。
新建 Values weinre如下更耻，key 可以為空。
再新建規(guī)則
test.whistle.com weinre://test
選擇 test 匹配麻掸，打開新頁酥夭。
刷新手機(jī)頁面，這時就看到 html 調(diào)試頁面脊奋。
