內部分享時總結了一下fiddler的使用，總是想寫一篇fiddler的文章，寫之前搜了一下，發現園子裡已經有介紹的大作了：Fiddler 教程 ，不過還是總結下，如有雷同，還請見諒啊，哈哈。fiddler是什麼相信大家都很清楚了，用句通俗的話就是抓包工具，下面我們就從實際的功能來說下它是什麼，能幹什麼？

工作原理

先上個圖

此圖一目瞭然，可以看出fiddler在請求中所處的位置，我們就可以確定它能幹些什麼。

它實際工作在本機的8888埠http代理，我們啟動fiddler時，它會自動更改代理設定：

從此我們可以看出，只要是http的請求，在請求發起離開本機之前都會經過fiddler，當response回來，沒有達到實際請求者時，也會經過fiddler：這樣我們就可以在輕易的實現修改請求和響應的內容，這樣我們就可以輕鬆的除錯現網的程式。

與其它工具的區別

       firebug、IE和chrome自帶的開發者工具：這是前端開發的利器了，它們監聽瀏覽器發起的請求和給瀏覽器的響應，顯示請求資料和響應資料，這個fiddler基本功能一致，但它只是監聽，只是對請求和響應資料的記錄，而fiddler完全是接管了請求和響應。另外可以對呈現給瀏覽器html、css內容實現動態的修改，對頁面製作人員簡直有如再生父母的感覺；強大的js除錯功能，前端開發人員的福音啊，這兩點都是fiddler不具備的。

       wireshark更變態了，貌似監視的是網絡卡，所有通過網絡卡的資料都會被記錄。

       下面說一下fiddler的強大功能。

fiddler強大功能之一 斷點

在正式開始之前，我們就不介紹fiddler的基本介面了，可以看開頭推薦的文章。

我們在命令輸入區域輸入help，回車會開啟一頁面，這個頁面詳細介紹了fiddler的所有命令,其中有關於斷點的命令：bpu在請求開始裡中斷,bpafter在響應到達時中斷,bps在特定http狀態碼時中斷,bpv/bpm在特定請求method時中斷。

除此之外，在選單欄：

也可以設定斷點，不過這個會對所有的請求，不太實用。

下面我們就以bpu為例來說一下斷點功能：

1，以百度為例子，開啟百度首頁

2，在fiddler命令輸入區輸入 bpu www.baidu.com

3，然後在剛開啟的百度頁面輸入fiddler點選搜尋

4，此時我們會在fidller會話面板看到

紅色小圖示開頭的會話，雙擊。

5，檢視右邊面板

6，此在斷點在請求未發出時，上半部分是請求的資料內容，切到webforms我們可以看到更直觀的資料的請求資料：

在這裡我們可以看到wd和oq引數都是我們輸入的關鍵字fiddler，可以修改，是的可以修改的，全部改成fiddler2。這裡只是就實現修改了請求資料，其它的post資料，甚至是headers裡的cookie、referer、user-agent等都可以修改。

7，看面板中間的

兩個按鈕和一個下拉選擇框：break on response，點選這個按鈕，就會在發出請求，在響應資料回到fiddler時再次中斷；run to complete，點選就會正常處理，不會再中斷請求。

開啟下拉選擇框：

這裡有很多的操作選擇，就是選擇輸出內容，選擇之後，實際的響應資料就會這些操作替代，特別是最後一個find a file：這個我們可以中斷一個圖片，然後這裡選擇本地的一張圖片，這樣我們就可以替換頁面的圖片。比較強大的場景就是例如現網js出了問題，但是一般現網的js是壓縮過的，在firebug中根本無法除錯，這樣我們可以把它對映到本地的一個原始版本，這樣firebug就會拿到一份原始的js，就可以方便的除錯了。這個功能大家自己動手去實驗吧。

8，點選break on response，這時在右邊面板下部分就有內容了，就是響應內容，fiddler再次中斷，響應內容已經回到本機，但是還在fiddler代理這裡，還沒有到瀏覽器。

切到webview:

我們可以看到我們關鍵詞已經變成了fiddler2，返回是fiddler2的搜尋結果。

切到textview面板，我們可以看到返回的html內容，對，在這裡，我們可以再次修改響應的內容，例如我們找到title標籤加一些內容。

當然不只這些，我們知道firebug這些工具是不能修改js的，我們用fiddler就可以中斷我們要修改的js檔案，然後在這裡修改部分程式碼，之後再借助firebug就可以完美除錯現網程式碼。

9，看右邊面板中間的操作區域，

此時我們仍然可以通過下拉選擇特定的響應內容替代伺服器的響應。

10，點選run to complete.

此時檢視瀏覽器標籤區：

是我們修改過的內容了。

另外：命令列輸入 go 會斷續執行所有中斷，再次輸入 bpu 會清除所有的斷點。

fiddler強大功能之二 AutoResponder

這個面板，這個功能和上邊我們介紹的choose response的功能大概相同，就是針對一些匹配的請求，讓請求者得到的我們指定的資料，而不是服務端返回的真實資料。

不過這個面板確定啟用了建立好的規則之後，每次匹配都會使用指定的響應內容，比上邊要每次中斷時指定方便。

我們可以直接從左側會話面板直接拖拉會話到這個面板，例如我們直接從左側面板拖baidu的記錄到這個面板，看下面的編輯區域

然後在第二行裡，選擇404_plain.dat，點選save儲存。

面板中會有

這樣的一條記錄。

再去重新整理baidu，會得到

就這樣，我們就可以會為某一個請求如js的請求，返回本地的一個js資料，在配合firebug完美除錯頁面前端。

不想使用時，直接去此面板上面的勾，或者去掉某條規則上的勾。

fiddler強大功能之三 請求構造器

顧名思意，就是構造請求，然後點選execute按鈕可以發起請求。

我們可以自己手動規定請求的各個內容，同樣的我們可以從會話面板拖一個會話到此面板，此時面板會顯示這個會話發起請求的所有資料，這樣我們可以在此基礎上修改這些資料，然後點選execute按鈕來發起一次請求。

fiddler強大功能之四 自定義指令碼

通過修改指令碼檔案，我們可以在fiddler本身的邏輯之上，加入自己的特殊處理。

我們可以

調出指令碼進行修改，也可以在

這個面板上直接修改。

令廣大.net同學高興的是，fiddler本身是C#寫的，再加上較為詳細的註釋，這個指令碼檔案對於我們來說還是比較容易上手的，具體自己去體會吧。

fiddler強大功能之五 效能測試

我們從會話列表中選擇一個或多個會話，然後檢視右邊statistics面板：

在這個面板中，我們可以看到這些請求各個階段的時間，傳送和接受資料量，還會有一個在世界不同地方訪問這些請求一個評估。

最下面還有一個 show chat的連結點選我們可以看到一個直觀的各種型別資料在總的資料的圖形。

除了這些統計之外，我們還可以在會話列表檢視，檢視我們請求內容的是否做了瀏覽器快取和快取時間。

還可以在選單中

勾選這兩項顯示會話響應結束時間，同時在選單的第二項和最後一項我們可以禁用或總啟用瀏覽器的快取。

看清楚這個選單的第一項 對 模擬網速，當我們勾選這個項之後，然後在自定義腳本里找到：

它們分別是：每上傳1KB資料時暫停300ms和每下載1KB資料時暫停150ms，我們可以通過修改這些值來達到模擬網速的效果。

另外，我們選擇一個會話，然後在右側

來檢視這些請求是否啟用了gzip壓縮，然後選擇各個壓縮的位元組大小，來直觀的看到我們啟用壓縮之後能節省多少的資料流量。

“Chunked Transfer-Encoding” --  分塊傳輸編碼 ; 求或者使用塊傳輸編碼 。該功能還可以4個選項，可能會導致 右側raw區 和 hexview區是否能夠顯示正常的字元編碼， 這兩個區的內容顯示的是對應的編碼下的內容。但無論是哪種編碼情況下，xml和json都能顯示正常的編碼，這兩個區的內容顯示的是人類可讀的編碼格式，能夠顯示正常的字元。例如（有道詞典提醒功能）：

當選擇未壓縮時，463位元組。

當選擇gzip編碼時，329位元組。

綜上，當因傳輸編碼格式不正常，而導致應答的顯示無法正常閱讀時，上面會有一條黃色的提示欄，點選後，會自動切換為 no compress編碼。

fiddler強大功能之六 強大的命令

這裡就不介紹了，在命令輸入區域，輸入help，回車之後，開啟的頁面上介紹挺全的，真的很強大。

fiddler強大功能之七 過濾器

你有時會不會開啟fiddler來抓取這個頁面的，但是其它的各種請求的資料也會被記錄，然後再費勁查詢，這時就啟用過濾器吧。

啟用之後，就可以根據自己的意志去加條件，不過這裡不對這些做介紹，而是給大家說一個更簡單的工具：

工具欄上

這個工具，我們滑鼠摁住這個按鈕，然後拖動到我們要抓取的瀏覽器標籤頁之上，然後鬆開，就會看到

這樣的效果，這樣fiddler就會只抓取該程序的請求。這個按鈕還可以拖動到其它的任何程式上甚至是桌面上：

不過explorer貌似不會發起http請求，呵呵。

       除了這些主要功能之外，fiddler的工具欄上提供了一些非常實用的其它功能，例如刪除按鈕，可以選擇刪除特定內容；keep:All sessions按鈕，可以選擇會話面板只儲存多少個會話，查詢，清理快取等操作，最後說兩個比較有挺有意思的：

1，工具欄的

點中之後，它會為那些編碼的資料自動的解碼，利於閱讀。

2，工具欄差不多最右邊有個工具

點選，彈出一個小工具：讓我們可以進行各種形式的編碼和解碼。

3，最下方狀態列

左邊一個點選下，可以讓fiddler不再抓包，通過IE代理處可以檢視，其實是清除了代理設定，再點選就可以再次開始抓包；右邊這個按鈕我們可以決定讓fiddler抓取瀏覽器發起或其它程式發起的http請求。

     細心檢視，你也可能會發現fiddler其它強大的功能。不用多說，fiddler絕對是前端開發的利器，開發者工具firebug之類的配合可以解決很多前端開發中的很多問題。