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

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

##what's fiddler

fiddler是一款**軟體，對於前後端分離開發非常重要。可以說，如果前端開發沒有用上fiddler或類似軟體，那還不能算是真正的前端開發。fiddler有三大實用功能：做**，造響應（反向**），造請求。

![fiddler options](

##原理

`**`功能是fiddler所有功能的**。

![fiddler****](

如圖所示，fiddler在客戶端跟服務端之前架設了一層**，所有的請求經過fiddler**，所有的響應也是。於是，fiddler在得到這些資料之後，就能提供一系列的功能：**捕獲並監控本機所有的http請求，顯示或修改其內容**。（左下角有捕獲開關）並且提供針對json,xml,,二進位制等的詳細檢視，或者其中的認證、cookies等等，以及其中的時間分析，對於http熟悉的人都知道請求的組成部分，不囉嗦了。對於響應也會有相應的功能。簡而言之，通過http傳送的資料，都會被記錄並分析，甚至改造。

##做**

時下移動裝置流行的時代，要除錯其上面的http請求不容易，狹小的螢幕一般提供給使用者去使用，很少留下開發的位置，此時可以利用fiddler對其進行監控。要想讓移動裝置走fiddler**（也就是圖2所示的通道，而不是直接訪問服務端），需要在fiddler中開啟相應的選項，如圖

![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上嗎？，其實不需要，只需要加一條規則

要注意url最後的`/`不能略去，這屬於http基礎。那麼指向a的請求自動變成b的請求，並且不會引起跨域。這對於前端除錯介面（**url固定，引數不一定**）非常有用，開發、測試、生產環境可以隨時切換，本人實踐起來非常好用。

##造請求

除錯介面有時候還需要直接傳送資料，此時我們可以造請求。跟造響應類似，切換到`composer`頁面，把乙個請求拖放過來，即可對其內容進行任意修改，修改完之後再`execute`傳送回去即可。可以立馬造出自己想要的資料格式對介面發出請求。

##其他功能

* 對於引數格式，我們還可以用其自帶的`textwizard`進行格式轉化，base64,url編碼(%形式）,html編碼(&#開頭）,js unicode(\u開頭)等等，可以自行探索一下。

* 可以自行用指令碼的方式定製fiddler的規則，首先要安裝syntaxview外掛程式。參考：

* 打斷點除錯等高階功能目前還沒涉及到。

## 歸根到底，fiddler作為**，能對http資料進行顯示分析，也能進行修改，並配套相關的輔助功能。

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

前後端分離

前後端分離

前後端分離

相關推薦