從事前端開發的同學一定對 Fiddler 不陌生,它是一個非常強大的http(s)協議分析工具。我們知道如何在電腦上調試頁面請求,但在手機端你沒有這么多強大好用的調試工具來調試你的webapp,如果你需要查看在手機上打開頁面時,所產生的http請求卻又不知道怎么做,那就繼續往下看。(當然,大部分情況下,你可以直接在電腦上用Chrome或Firefox模擬手機瀏覽器來看)
Fiddler支持代理的功能,也就是說你所有的http請求都可以通過它來轉發,Fiddler代理默認使用端口8888,不知道的同學有可能因此無法使用翻牆,因為端口沖突。利用這點,我們可以在手機端設置http代理為Fiddler的代理服務器,使得手機應用的請求都通過Fiddler來轉發,從而實現查看手機端頁面請求的功能。
1,安裝設置Fiddler
(1)首先我們打開Fiddler->Tools->Fiddler Options在HTTPS面板里將Decry HTTPS traffic和Ignore server certificate errors(unsafe)勾選起來,確定。
(2)其次Fiddler->Tools->Fiddler Options在Connection面板里將Allow remote computers to connect
勾選起來,端口使用默認8888,確定后,關閉Fiddler並重新打開Fiddler。
(3)為了確保代理是正常工作的,我們可以在cmd里執行netstat -anop tcp查看Fiddler進程是否正常監聽8888端口,如果服務沒有正常開啟,可以嘗試使用其他端口,端口修改的位置,如上圖位置。
從上圖我們看到,進程ID為8392的Fiddler正在監聽8888端口,說明代理已經在工作了。那么接下來我們要把手機端的代理設置為Fiddler的代理,代理設置需要一個ip和一個端口,ip就是Fiddler所運行的電腦的局域網ip地址,端口默認是Fiddler代理的端口8888,請確保手機所在的網段可以訪問到電腦所在的網段,同一個局域網里一般沒什么問題。
2, 手機訪問本地環境(手機和電腦必須是同一個局域網絡,常用方法是連接同一個網絡或者電腦開啟熱點)
在電腦上利用360免費wifi開啟熱點,比如hello_111/123456,利用手機連接這個無線網絡后,選擇修改網絡,顯示高級選項,代理服務器主機名輸入以太網適配器,以太網2的ip地址,代理服務器端口輸入8888。
3,在手機上訪問本地環境下h5頁面,進行調試。
注:大部分服務升級https了,所以代理需要支持https,在fiddler中生成密鑰,客戶端(手機)下載密鑰后,即可正常訪問。
tools-fiddler options--https---Actions---Trust Root certificate即可。
手機端瀏覽器中輸入198.168.11.10:8888(電腦ip加代理端口),會打開fiddler echo service頁面,選擇you can download fiddler root certificCate ,即可手機端下載密鑰。即可正常訪問。
手機可以連接筆記本,也可以連接筆記本所處同一局域網,代理服務器填寫筆記本ip即可。
有時手機連不上電腦,需要將電腦防火牆關閉。