沐鳴:_使用 Fiddler 代理調試本地手機頁面

從事前端開發的同學一定對 Fiddler 不陌生，它是一個非常強大的http(s)協議分析工具，如果你不知道它是什麼，可以自行 Google 一下，本文不再作科普，簡單的說它可以代替Chrome開發人員工具中 Network 面板或 Firefox 的 HttpWatch 插件的功能。

我們知道如何在電腦上調試頁面請求，但在手機端你沒有這麼多強大好用的調試工具來調試你的webapp，如果你需要查看在手機上打開頁面時，所產生的http請求卻又不知道怎麼做，那就繼續往下看。（當然，大部分情況下，你可以直接在電腦上用Chrome或Firefox模擬手機瀏覽器來看）

Fiddler支持代理的功能，也就是說你所有的http請求都可以通過它來轉發，Fiddler代理默認使用端口8888，不知道的同學有可能因此無法使用翻牆，因為端口衝突。

利用這點，我們可以在手機端設置http代理為Fiddler的代理服務器，使得手機應用的請求都通過Fiddler來轉發，從而實現查看手機端頁面請求的功能。

首先我們打開Fiddler->Tools->Fiddler Options在Connection面板里將Allow remote computers to connect勾選起來，確定后，關閉Fiddler並重新打開Fiddler。

此時，為了確保代理是正常工作的，我們可以在cmd里執行netstat -anop tcp查看Fiddler進程是否正常監聽8888端口，如果服務沒有正常開啟，可以嘗試使用其他端口，端口修改的位置，如上圖位置。

從上圖我們看到，進程ID為8392的Fiddler正在監聽8888端口，說明代理已經在工作了。那麼接下來我們要把手機端的代理設置為Fiddler的代理，代理設置需要一個ip和一個端口，ip就是Fiddler所運行的電腦的局域網ip地址，端口默認是Fiddler代理的端口8888，請確保手機所在的網段可以訪問到電腦所在的網段，同一個局域網裡一般沒什麼問題。

我的手機刷的是MIUI，設置代理比較簡單，直接在對應的WIFI中設置一下就可以了。手機代理設置不懂的也可以留言或自行查找相關資料。接下來讓我們來測試一下效果。

在手機端打開豆瓣，看下Fiddler監聽到的請求：

正如我們所期望的，你可以開始調試你的手機端webapp請求了。

FAQ：
1.為什麼我訪問頁面提示代理服務器連接失敗？
在確認所有設置都沒有錯的情況下，可以嘗試關閉防火牆或帶防火牆功能的殺毒軟件，如果關閉后可以訪問，可以在防火牆設置里為Fiddler放行。