前后端分離的利器：fiddler的實用功能舉例

# 前后端分離的利器：fiddler的實用功能舉例 ##what's fiddler fiddler是一款代理軟件，對於前后端分離開發非常重要。可以說，如果前端開發沒有用上fiddler或類似軟件，那還不能算是真正的前端開發。fiddler有三大實用功能：做代理，造響應（反向代理），造請求。 下載安裝請自行用搜索引擎查找。安裝完之后要把相應的軟件代理設置為fiddler，默認的代理為http://127.0.0.1:8888/。可以在fiddler Options中修改端口。 。 ##原理 `代理`功能是fiddler所有功能的來源。  如圖所示，fiddler在客戶端跟服務端之前架設了一層代理，所有的請求經過fiddler轉發，所有的響應也是。於是，fiddler在得到這些數據之后，就能提供一系列的功能：**捕獲並監控本機所有的http請求，顯示或修改其內容**。（左下角有捕獲開關）並且提供針對JSON,XML,圖片,二進制等的詳細查看，或者其中的認證、cookies等等，以及其中的時間分析，對於http熟悉的人都知道請求的組成部分，不啰嗦了。對於響應也會有相應的功能。簡而言之，通過http傳送的數據，都會被記錄並分析，甚至改造。 ##做代理 時下移動設備流行的時代，要調試其上面的http請求不容易，狹小的屏幕一般提供給用戶去使用，很少留下開發的位置，此時可以利用fiddler對其進行監控。要想讓移動設備走fiddler代理（也就是圖2所示的通道，而不是直接訪問服務端），需要在fiddler中開啟相應的選項，如圖  記下端口，勾上**Allow remote computers to connect**，再在移動設備的wifi里面，找到其高級設置（一般是按住具體的wifi連接），設置代理，填好ip和端口即可。此時在移動設備上的所有請求及其響應會顯示在fiddler的主窗口里面。 ##造響應 fiddler在得到服務端的響應后，如果只是乖乖地按原樣響應回來，那就太單調了，其非常實用的功能是對響應進行加工處理，改成你想要的模樣。通常在開發中我們需要的是把響應改成本地文件（在后台接口未完成之前）  如圖，在被監控的http請求/響應中拖放一條到`AutoResponder`頁面，則可對其“動手動腳”，可以利用正則表達式匹配多個請求，把`EXACT`改成`regex`即可。具體的操作可以自己摸索一下。 這一點功能的意義非常重大 * 前端的開發能與后台接口開發並行，只需要在本地造一些實驗數據，把請求的響應指向該數據文件，即可進行大多數的代碼開發。 * 有時候線上的應用有bug，我們不可能對其頻繁進行修改提交，則可以利用此功能進行本地調試（把線上代碼指向本地），OK了才上線。 ##反向代理 同樣在`AutoResponder`的頁面，還能進行反向代理的功能。通俗地理解為對請求進行轉發。應用情景如下：我有開發環境http://A/wsdl/，另外有測試環境http://B/wsdl/，這兩個環境明顯區別是數據不一樣，有時候開發好的代碼，想換一個環境測試一下能不能跑正確？怎么處理？費很大的勁部署到B上嗎？，其實不需要，只需要加一條規則 |if request matches...|then repond with...| |--|--| |regex:http://A/wsdl/|http://B/wsdl/| 要注意url最后的`/`不能略去，這屬於http基礎。那么指向A的請求自動變成B的請求，並且不會引起跨域。這對於前端調試接口（**url固定，參數不一定**）非常有用，開發、測試、生產環境可以隨時切換，本人實踐起來非常好用。 ##造請求 調試接口有時候還需要直接發送數據，此時我們可以造請求。跟造響應類似，切換到`Composer`頁面，把一個請求拖放過來，即可對其內容進行任意修改，修改完之后再`Execute`發送回去即可。可以立馬造出自己想要的數據格式對接口發出請求。 ##其他功能 * 對於參數格式，我們還可以用其自帶的`TextWizard`進行格式轉化，base64,url編碼(%形式）,html編碼(&#開頭）,js unicode(\u開頭)等等，可以自行探索一下。 * 可以自行用腳本的方式定制fiddler的規則，首先要安裝SyntaxView插件。參考：http://kb.cnblogs.com/page/130367/#script * 打斷點調試等高級功能目前還沒涉及到。 ## 歸根到底，fiddler作為代理，能對http數據進行顯示分析，也能進行修改，並配套相關的輔助功能。