內(nèi)部分享時(shí)總結(jié)了一下fiddler的使用，總是想寫一篇fiddler的文章,，寫之前搜了一下,，發(fā)現(xiàn)園子里已經(jīng)有介紹的大作了：Fiddler 教程 ，不過還是總結(jié)下,，如有雷同,，還請見諒啊，哈哈,。fiddler是什么相信大家都很清楚了,，用句通俗的話就是抓包工具，下面我們就從實(shí)際的功能來說下它是什么,，能干什么,？

工作原理

先上個(gè)圖

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

它實(shí)際工作在本機(jī)的8888端口http代理,，我們啟動(dòng)fiddler時(shí),，它會(huì)自動(dòng)更改代理設(shè)置：

從此我們可以看出，只要是http的請求,，在請求發(fā)起離開本機(jī)之前都會(huì)經(jīng)過fiddler,，當(dāng)response回來，沒有達(dá)到實(shí)際請求者時(shí),，也會(huì)經(jīng)過fiddler：這樣我們就可以在輕易的實(shí)現(xiàn)修改請求和響應(yīng)的內(nèi)容,，這樣我們就可以輕松的調(diào)試現(xiàn)網(wǎng)的程序。

與其它工具的區(qū)別

       firebug,、IE和chrome自帶的開發(fā)者工具：這是前端開發(fā)的利器了,，它們監(jiān)聽瀏覽器發(fā)起的請求和給瀏覽器的響應(yīng)，顯示請求數(shù)據(jù)和響應(yīng)數(shù)據(jù),，這個(gè)fiddler基本功能一致,，但它只是監(jiān)聽，只是對請求和響應(yīng)數(shù)據(jù)的記錄，而fiddler完全是接管了請求和響應(yīng),。另外可以對呈現(xiàn)給瀏覽器html,、css內(nèi)容實(shí)現(xiàn)動(dòng)態(tài)的修改，對頁面制作人員簡直有如再生父母的感覺,；強(qiáng)大的js調(diào)試功能,，前端開發(fā)人員的福音啊，這兩點(diǎn)都是fiddler不具備的,。

       wireshark更變態(tài)了,，貌似監(jiān)視的是網(wǎng)卡，所有通過網(wǎng)卡的數(shù)據(jù)都會(huì)被記錄,。

       下面說一下fiddler的強(qiáng)大功能,。

fiddler強(qiáng)大功能之一 斷點(diǎn)

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

我們在命令輸入?yún)^(qū)域輸入help，回車會(huì)打開一頁面,，這個(gè)頁面詳細(xì)介紹了fiddler的所有命令,其中有關(guān)于斷點(diǎn)的命令：bpu在請求開始里中斷,bpafter在響應(yīng)到達(dá)時(shí)中斷,bps在特定http狀態(tài)碼時(shí)中斷,bpv/bpm在特定請求method時(shí)中斷,。

除此之外，在菜單欄：

也可以設(shè)置斷點(diǎn),，不過這個(gè)會(huì)對所有的請求,，不太實(shí)用。

下面我們就以bpu為例來說一下斷點(diǎn)功能：

1,，以百度為例子,，打開百度首頁

2，在fiddler命令輸入?yún)^(qū)輸入 bpu www.baidu.com,，這樣就可中斷url中包含這個(gè)地址的請求

3,，然后在剛打開的百度頁面輸入fiddler點(diǎn)擊搜索

4，此時(shí)我們會(huì)在fidller會(huì)話面板看到

紅色小圖標(biāo)開頭的會(huì)話,，雙擊,。

5，查看右邊面板

6,，此在斷點(diǎn)在請求未發(fā)出時(shí),，上半部分是請求的數(shù)據(jù)內(nèi)容，切到webforms我們可以看到更直觀的數(shù)據(jù)的請求數(shù)據(jù)：

在這里我們可以看到wd和oq參數(shù)都是我們輸入的關(guān)鍵字fiddler,，可以修改,，是的可以修改的，全部改成fiddler2,。這里只是就實(shí)現(xiàn)修改了請求數(shù)據(jù),，其它的post數(shù)據(jù),，甚至是headers里的cookie、referer,、user-agent等都可以修改,。

7，看面板中間的

兩個(gè)按鈕和一個(gè)下拉選擇框：break on response,，點(diǎn)擊這個(gè)按鈕,，就會(huì)在發(fā)出請求，在響應(yīng)數(shù)據(jù)回到fiddler時(shí)再次中斷,；run to complete,，點(diǎn)擊就會(huì)正常處理，不會(huì)再中斷請求,。

打開下拉選擇框：

這里有很多的操作選擇,，就是選擇輸出內(nèi)容，選擇之后,，實(shí)際的響應(yīng)數(shù)據(jù)就會(huì)這些操作替代,，特別是最后一個(gè)find a file：這個(gè)我們可以中斷一個(gè)圖片，然后這里選擇本地的一張圖片,，這樣我們就可以替換頁面的圖片,。比較強(qiáng)大的場景就是例如現(xiàn)網(wǎng)js出了問題，但是一般現(xiàn)網(wǎng)的js是壓縮過的,，在firebug中根本無法調(diào)試,，這樣我們可以把它映射到本地的一個(gè)原始版本，這樣firebug就會(huì)拿到一份原始的js,，就可以方便的調(diào)試了,。這個(gè)功能大家自己動(dòng)手去實(shí)驗(yàn)吧。

8,，點(diǎn)擊break on response,，這時(shí)在右邊面板下部分就有內(nèi)容了，就是響應(yīng)內(nèi)容,，fiddler再次中斷，響應(yīng)內(nèi)容已經(jīng)回到本機(jī),，但是還在fiddler代理這里,，還沒有到瀏覽器。

切到webview:

我們可以看到我們關(guān)鍵詞已經(jīng)變成了fiddler2,，返回是fiddler2的搜索結(jié)果,。

切到textview面板，我們可以看到返回的html內(nèi)容,，對,，在這里,，我們可以再次修改響應(yīng)的內(nèi)容，例如我們找到title標(biāo)簽加一些內(nèi)容,。

當(dāng)然不只這些,，我們知道firebug這些工具是不能修改js的，我們用fiddler就可以中斷我們要修改的js文件,，然后在這里修改部分代碼,，之后再借助firebug就可以完美調(diào)試現(xiàn)網(wǎng)代碼。

9,，看右邊面板中間的操作區(qū)域,，

此時(shí)我們?nèi)匀豢梢酝ㄟ^下拉選擇特定的響應(yīng)內(nèi)容替代服務(wù)器的響應(yīng)。

10,，點(diǎn)擊run to complete.

此時(shí)查看瀏覽器標(biāo)簽區(qū)：

是我們修改過的內(nèi)容了,。

另外：命令行輸入 go 會(huì)斷續(xù)執(zhí)行所有中斷，再次輸入 bpu 會(huì)清除所有的斷點(diǎn),。

fiddler強(qiáng)大功能之二 AutoResponder

這個(gè)面板,，這個(gè)功能和上邊我們介紹的choose response的功能大概相同，就是針對一些匹配的請求,，讓請求者得到的我們指定的數(shù)據(jù),，而不是服務(wù)端返回的真實(shí)數(shù)據(jù)。

不過這個(gè)面板確定啟用了建立好的規(guī)則之后,，每次匹配都會(huì)使用指定的響應(yīng)內(nèi)容,，比上邊要每次中斷時(shí)指定方便。

我們可以直接從左側(cè)會(huì)話面板直接拖拉會(huì)話到這個(gè)面板,，例如我們直接從左側(cè)面板拖baidu的記錄到這個(gè)面板,，看下面的編輯區(qū)域

然后在第二行里，選擇404_plain.dat,，點(diǎn)擊save保存,。

面板中會(huì)有

這樣的一條記錄。

再去刷新baidu,，會(huì)得到

就這樣,，我們就可以會(huì)為某一個(gè)請求如js的請求，返回本地的一個(gè)js數(shù)據(jù),，在配合firebug完美調(diào)試頁面前端,。

不想使用時(shí)，直接去此面板上面的勾,，或者去掉某條規(guī)則上的勾,。

fiddler強(qiáng)大功能之三 請求構(gòu)造器

顧名思意，就是構(gòu)造請求,，然后點(diǎn)擊execute按鈕可以發(fā)起請求,。

我們可以自己手動(dòng)規(guī)定請求的各個(gè)內(nèi)容,，同樣的我們可以從會(huì)話面板拖一個(gè)會(huì)話到此面板，此時(shí)面板會(huì)顯示這個(gè)會(huì)話發(fā)起請求的所有數(shù)據(jù),，這樣我們可以在此基礎(chǔ)上修改這些數(shù)據(jù),，然后點(diǎn)擊execute按鈕來發(fā)起一次請求。

fiddler強(qiáng)大功能之四 自定義腳本

通過修改腳本文件,，我們可以在fiddler本身的邏輯之上,，加入自己的特殊處理。

我們可以

調(diào)出腳本進(jìn)行修改,，也可以在

這個(gè)面板上直接修改,。

令廣大.net同學(xué)高興的是，fiddler本身是C#寫的,，再加上較為詳細(xì)的注釋,，這個(gè)腳本文件對于我們來說還是比較容易上手的，具體自己去體會(huì)吧,。

fiddler強(qiáng)大功能之五 性能測試

我們從會(huì)話列表中選擇一個(gè)或多個(gè)會(huì)話,，然后查看右邊statistics面板：

在這個(gè)面板中，我們可以看到這些請求各個(gè)階段的時(shí)間,，發(fā)送和接受數(shù)據(jù)量,，還會(huì)有一個(gè)在世界不同地方訪問這些請求一個(gè)評估。

最下面還有一個(gè) show chat的鏈接點(diǎn)擊我們可以看到一個(gè)直觀的各種類型數(shù)據(jù)在總的數(shù)據(jù)的圖形,。

除了這些統(tǒng)計(jì)之外,，我們還可以在會(huì)話列表查看，查看我們請求內(nèi)容的是否做了瀏覽器緩存和緩存時(shí)間,。

還可以在菜單中

勾選這兩項(xiàng)顯示會(huì)話響應(yīng)結(jié)束時(shí)間,，同時(shí)在菜單的第二項(xiàng)和最后一項(xiàng)我們可以禁用或總啟用瀏覽器的緩存。

看清楚這個(gè)菜單的第一項(xiàng) 對 模擬網(wǎng)速,，當(dāng)我們勾選這個(gè)項(xiàng)之后,，然后在自定義腳本里找到：

它們分別是：每上傳1KB數(shù)據(jù)時(shí)暫停300ms和每下載1KB數(shù)據(jù)時(shí)暫停150ms，我們可以通過修改這些值來達(dá)到模擬網(wǎng)速的效果,。

另外,，我們選擇一個(gè)會(huì)話，然后在右側(cè)

來查看這些請求是否啟用了gzip壓縮,，然后選擇各個(gè)壓縮的字節(jié)大小,，來直觀的看到我們啟用壓縮之后能節(jié)省多少的數(shù)據(jù)流量。

fiddler強(qiáng)大功能之六 強(qiáng)大的命令

這里就不介紹了,，在命令輸入?yún)^(qū)域，輸入help,，回車之后,，打開的頁面上介紹挺全的,，真的很強(qiáng)大。

fiddler強(qiáng)大功能之七 過濾器

你有時(shí)會(huì)不會(huì)打開fiddler來抓取這個(gè)頁面的,，但是其它的各種請求的數(shù)據(jù)也會(huì)被記錄,，然后再費(fèi)勁查找，這時(shí)就啟用過濾器吧,。

啟用之后,，就可以根據(jù)自己的意志去加條件，不過這里不對這些做介紹,，而是給大家說一個(gè)更簡單的工具：

工具欄上

這個(gè)工具,，我們鼠標(biāo)摁住這個(gè)按鈕，然后拖動(dòng)到我們要抓取的瀏覽器標(biāo)簽頁之上,，然后松開,，就會(huì)看到

這樣的效果，這樣fiddler就會(huì)只抓取該進(jìn)程的請求,。這個(gè)按鈕還可以拖動(dòng)到其它的任何程序上甚至是桌面上：

不過explorer貌似不會(huì)發(fā)起http請求,，呵呵。

       除了這些主要功能之外,，fiddler的工具欄上提供了一些非常實(shí)用的其它功能,，例如刪除按鈕，可以選擇刪除特定內(nèi)容,；keep:All sessions按鈕,，可以選擇會(huì)話面板只保存多少個(gè)會(huì)話，查找,，清理緩存等操作,，最后說兩個(gè)比較有挺有意思的：

1，工具欄的

點(diǎn)中之后,，它會(huì)為那些編碼的數(shù)據(jù)自動(dòng)的解碼,，利于閱讀。

2,，工具欄差不多最右邊有個(gè)工具

點(diǎn)擊,，彈出一個(gè)小工具：讓我們可以進(jìn)行各種形式的編碼和解碼。

3,，最下方狀態(tài)欄

左邊一個(gè)點(diǎn)擊下,，可以讓fiddler不再抓包，通過IE代理處可以查看,，其實(shí)是清除了代理設(shè)置,，再點(diǎn)擊就可以再次開始抓包；右邊這個(gè)按鈕我們可以決定讓fiddler抓取瀏覽器發(fā)起或其它程序發(fā)起的http請求,。

     細(xì)心查看,，你也可能會(huì)發(fā)現(xiàn)fiddler其它強(qiáng)大的功能,。不用多說，fiddler絕對是前端開發(fā)的利器,，開發(fā)者工具firebug之類的配合可以解決很多前端開發(fā)中的很多問題,。