1.引言

在當前web開發工具滿天飛的年代，很難想象當時在沒有這些工具的年代，我們是怎麼挺過來的。既然時代已經賦予我們如(rú)此之多的精良工具，那麼就在工作之中(zhōng)盡情享用吧。

在需要截獲客戶端與服務器(qì)端之間的通(tōng)訊數據時，我們會使用httpwatch或firebug。

在跟蹤樣式或調試js代碼時，我們會在浏覽器(qì)下(xià)按下(xià)F12，來啟用開發者工具；會在js代碼中(zhōng)加上window或借助開發者工具的斷點（breakpoint）進行逐步調試。

以上工具或方法都能很好的解決我們面臨的問(wèn)題，但如(rú)果服務器(qì)在遠(yuǎn)程而非本地，在我們不能登錄到服務器(qì)的情況下(xià)，我們如(rú)何在代碼中(zhōng)添加window，或者又如(rú)何修改一些代碼嘗試看看運行效果呢(ne)？此時我們必須借助另一利器(qì)：Fiddler。

ps: Fiddler官方網站(zhàn)及下(xià)載地址 www.fiddlertool.com ， 它是個(gè)免費軟件。 同類的商(shāng)業(yè)産品有HTTPWatch:http://www.httpwatch.com 。

2.Fiddler代理工作原理

Fiddler是微軟開發的一個(gè)工具，可(kě)用來截獲本機與服務器(qì)之前的所有http通(tōng)信，在這個(gè)過程中(zhōng)充當一個(gè)代理的角色。

在我們啟動(dòng)Fiddler的時候，Fiddler便已經作為了一個(gè)代理服務器(qì)，如(rú)下(xià)圖所示：

作為系統代理，所有的來自互聯網服務（WinInet）的http請求在到達目标Web服務器(qì)的之前都會經過Fiddler；同樣的，所有的Http響應都會在返回客戶端之前流經Fiddler。如(rú)下(xià)圖所示：

3.Fiddler界面描述

4.Fiddler請求中(zhōng)斷

可(kě)以進入菜單“Rules/Automatic Breakpoints”來設置對請求進行中(zhōng)斷，設計的時機可(kě)以是Before Requests、After Response。這樣我們就可(kě)以利用工具修改提交到服務器(qì)的數據信息（如(rú)：請求頭或請求體等），也可(kě)以修改從服務器(qì)端返回的數據。

• 以下(xià)為截獲提交到百度的數據，我們可(kě)以對提交的信息進行修改。

• 以下(xià)為截獲到百度返回的數據，我們可(kě)以對返回的信息進行修改。（注意：如(rú)果返回的數據進行了壓縮，那麼默認将為亂碼，可(kě)以使用頂部菜單“Rules/Remove All Encodings”來解碼。）

5.Fiddler請求内容替換

在“Fiddler請求中(zhōng)斷”章節，我們已經介紹了如(rú)何修改提交到服務器(qì)端的數據及修改服務器(qì)端返回的數據，但如(rú)果覺得這樣仍不過瘾，我們也可(kě)以完全用本地文(wén)件來代替需要從服務器(qì)下(xià)載的文(wén)件，這在我們診斷跟蹤一些js文(wén)件但卻不能修改js文(wén)件時非常有用。

比如(rú)：在用浏覽器(qì)測試P頁面時，P頁面引入了一個(gè)js資(zī)源文(wén)件R.js，由于R.js文(wén)件在服務器(qì)S上，而我此時又不能登錄S服務器(qì)（沒有S服務器(qì)的帳号），此時我們就可(kě)以通(tōng)過浏覽器(qì)将R.js文(wén)件下(xià)載到本地，然後對本地的R.js文(wén)件進行調整，最後通(tōng)過設置Fiddler，将R.js文(wén)件的請求使用本地的R.js文(wén)件。截圖如(rú)下(xià)：

其中(zhōng)

EXACT表示完整匹配URL時，才進行映射處理

regext:(?insx)表示可(kě)以使用正則來匹配哪些URL需要進行映射處理

其他一些參數不再一一說明。