使用Fiddler代理調試本地手機頁面


從事前端開發的同學一定對 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即可。

有時手機連不上電腦,需要將電腦防火牆關閉。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM