Fiddler調試技巧

Fiddler是個很強大的抓包代理工具，它在遠程調試、模擬請求等方面都提供了強大的功能支持。下面將列出一些在我工做中使用到的比較實用的技巧。

手機鏈接代理調試

這個是移動端開發中很是經常使用的技巧，在PC端能夠直接在chrome上F12查看網絡請求等數據，但在手機端卻看不到這些數據，因此咱們能夠利用Fiddler來抓包調試。很是簡單，直接手機上配置Fiddler代理地址便可，代理地址爲你PC端ip:Fiddler端口號：

Fiddler鏈接遠程服務器

代理服務器就像一個個攔截器，網絡請求能夠通過多個代理服務器，因此你能夠在你的Fiddler上配置下一個代理服務器。例如，爲了本地開發時域名跟生產保持一致，咱們可能使用nginx代理服務器作處理，那麼若是你將頁面代理到本地Fiddler上而不作其餘配置，就沒有通過原來的nginx代理，這樣可能會致使一些問題，因此你能夠在Fiddler上配置下一個代理。配置方法也很簡單，以下圖：

僞造數據返回

在開發過程當中，可能會遇到後端接口未給出，前端頁面已開發完成了，這時難道咱們就只能苦等後端給接口來聯調嗎？no！這時咱們能夠本身作本地調試：根據接口文檔擬一份json數據，Fiddler攔截請求並返回本地json數據：

強大的Fiddler Script

Fiddler Script是Fiddler的一個腳本文件，是用JScript.NET語言編寫的，相似C#，能夠修改其代碼，修改後無需重啓Fiddler代碼會立刻生效。能夠上Fiddler插件官網下載FiddlerScript Editor，支持語法高亮等。很少說，直接貼圖：

下面舉兩個修改Script腳本的栗子：

模擬低網速網絡環境

頁面的一些樣式問題多是因爲低網速形成的，若是想調試這種狀況，哈，Fiddler恰好也有這種技能哦。下面是Script腳本中定義請求延時和響應延時的相關代碼：

默認值是300和150，能夠按需修改數值，而後再應用：（若是不打勾，上面的m_SimulateModem爲false，不會有網絡延遲）

模擬跨域

聰明的童鞋可能看出上面「僞造數據返回」可能會有跨域問題，若是先後端異域（什麼是跨域？請參考個人另外一篇文章），就會有跨域的問題。根據CORS原理，可使用Fiddler來解決這種問題。假設前端域名client.com發ajax請求給後端server.com，可以下配置解決跨域問題：

console日誌打印

爲了調試方面，咱們常常會使用console打印日誌到控制檯，在Chrome開發者工具下能夠看到輸出結果。可是在移動端呢，可能咱們會選擇用alert這種齪到爆的方式解決吧(╯^╰〉，好吧，我以前就是用這麼齪的方法。。
後來被我發現了一個好用的插件，微信團隊產的rosin。他們家的文檔寫得很詳細了，這裏就再也不贅述了，請看文檔：http://alloyteam.github.io/Ro...