Fiddler工具簡(jiǎn)介
Fiddler是最強(qiáng)大最好用的Web調(diào)試工具之一，它能記錄所有客戶端和服務(wù)器的http和https請(qǐng)求，允許你監(jiān)視，設(shè)置斷點(diǎn)，甚至修改輸入輸出數(shù)據(jù)，F(xiàn)iddler包含了一個(gè)強(qiáng)大的基于事件腳本的子系統(tǒng)，并且能使用.net語(yǔ)言進(jìn)行擴(kuò)展。使用Fiddler無(wú)論對(duì)開發(fā)還是測(cè)試來(lái)說(shuō)，都有很大的幫助。
同類的工具有: httpwatch, firebug, wireshark
Fiddler工具下載
Fiddler的官方網(wǎng)站: www.fiddler2.com
Fiddler工作原理
Fiddler 以代理web服務(wù)器形式工作,它使用代理地址:127.0.0.1, 端口:8888。
當(dāng)Fiddler退出時(shí)，它會(huì)自動(dòng)注銷，不會(huì)影響其他程序；但是當(dāng)Fiddler非正常退出，F(xiàn)iddler不會(huì)自動(dòng)注銷，會(huì)造成網(wǎng)頁(yè)無(wú)法訪問(wèn)。解決的辦法是重新啟動(dòng)下Fiddler。
Fiddler工具使用
Fiddler如何捕獲Firefox會(huì)話
能夠支持HTTP代理的任意程序的數(shù)據(jù)包，都能被Fiddler嗅探到。Fiddler的運(yùn)行機(jī)制，其實(shí)就是本機(jī)上監(jiān)聽8888端口的HTTP代理。
Fiddler2啟動(dòng)時(shí)，默認(rèn)IE的代理設(shè)為127.0.0.1:8888，而其他瀏覽器是需要手動(dòng)設(shè)置，所以將Firefox的代理改為127.0.0.1:8888就可以監(jiān)聽數(shù)據(jù)。
Firefox 上通過(guò)如下步驟設(shè)置代理：
點(diǎn)擊: Tools -> Options, 在Options 對(duì)話框上點(diǎn)擊Advanced tab - > network tab -> setting.
Firefox中安裝Fiddler插件
修改Firefox 的代理比較麻煩，不用fiddler的時(shí)候還需要去掉代理。
建議在firefox中使用fiddler hook 插件, 方便使用Fiddler獲取firefox中的request 和response。
安裝fiddler后，就已經(jīng)裝好Fiddler hook插件，只需要到firefox中去啟用這個(gè)插件
打開firefox tools->Add ons -> Extensions啟動(dòng)FiddlerHook
Fiddler如何捕獲HTTPS會(huì)話
默認(rèn)下，F(xiàn)iddler不會(huì)捕獲HTTPS會(huì)話，需要打開Fiddler Tool->Fiddler Options->HTTPS tab。
選中checkbox, 彈出如下的對(duì)話框，點(diǎn)擊"YES"，設(shè)置成功。
Fiddler的基本界面
Inspectors tab下有很多查看Request或者Response的消息。 其中Raw Tab可以查看完整的消息，Headers tab 只查看消息中的header。
Fiddler的HTTP統(tǒng)計(jì)視圖
通過(guò)陳列出所有的HTTP通信量，F(xiàn)iddler可以很容易展示哪些文件生成當(dāng)前請(qǐng)求的頁(yè)面。使用Statistics頁(yè)簽，用戶可以通過(guò)選擇多個(gè)會(huì)話來(lái)得到這幾個(gè)會(huì)話的總的信息統(tǒng)計(jì)，比如多個(gè)請(qǐng)求和傳輸?shù)淖止?jié)數(shù)。
選擇第一個(gè)請(qǐng)求和最后一個(gè)請(qǐng)求，可獲得整個(gè)頁(yè)面加載所消耗的總體時(shí)間。從條形圖表中還可以分別出哪些請(qǐng)求耗時(shí)最多，從而對(duì)頁(yè)面的訪問(wèn)進(jìn)行訪問(wèn)速度優(yōu)化。
QuickExec命令行的使用
Fiddler的左下角有一個(gè)命令行工具叫做QuickExec,允許你直接輸入命令。
常見得命令有：
help 打開官方的使用頁(yè)面介紹，所有的命令都會(huì)列出來(lái)
cls 清屏 (Ctrl+x 也可以清屏)
select 選擇會(huì)話的命令
?.png 用來(lái)選擇png后綴的圖片
bpu 截獲request
Fiddler中設(shè)置斷點(diǎn)修改Request
Fiddler最強(qiáng)大的功能莫過(guò)于設(shè)置斷點(diǎn)了，設(shè)置好斷點(diǎn)后，你可以修改httpRequest 的任何信息包括host, cookie或者表單中的數(shù)據(jù)。
設(shè)置斷點(diǎn)有兩種方法：
第一種：打開Fiddler 點(diǎn)擊Rules-> Automatic Breakpoint ->Before Requests(這種方法會(huì)中斷所有的會(huì)話)
如何消除命令呢？ 點(diǎn)擊Rules-> Automatic Breakpoint ->Disabled
第二種: 在命令行中輸入命令: bpu www.baidu.com (這種方法只會(huì)中斷www.baidu.com)
如何消除命令呢？ 在命令行中輸入命令 bpu
舉例，模擬博客園的登錄， 在IE中打開博客園的登錄頁(yè)面，輸入錯(cuò)誤的用戶名和密碼，用Fiddler中斷會(huì)話，修改成正確的用戶名密碼，這樣就能成功登錄。
- 使用IE打開博客園的登錄界面 http://passport.cnblogs.com/login.aspx
- 打開Fiddler, 在命令行中輸入
bpu http://passport.cnblogs.com/login.aspx - 輸入錯(cuò)誤的用戶名和密碼，點(diǎn)擊登錄。
-
Fiddler 能中斷這次會(huì)話，選擇被中斷的會(huì)話，點(diǎn)擊Inspectors tab下的WebForms tab 修改用戶名密碼，然后點(diǎn)擊Run to Completion，正確地登錄了博客園。
image.png
Fiddler中設(shè)置斷點(diǎn)修改Response
Fiddler中，修改Response：
第一種：打開Fiddler 點(diǎn)擊Rules-> Automatic Breakpoint ->After Response (這種方法會(huì)中斷所有的會(huì)話)
如何消除命令呢？ 點(diǎn)擊Rules-> Automatic Breakpoint ->Disabled
第二種: 在命令行中輸入命令: bpafter www.baidu.com (這種方法只會(huì)中斷www.baidu.com)
如何消除命令呢？ 在命令行中輸入命令 bpafter
具體用法和上節(jié)差不多。
Fiddler中創(chuàng)建AutoResponder規(guī)則
Fiddler 的AutoResponder tab允許從本地返回文件，而不用將http request 發(fā)送到服務(wù)器上。
舉例：
- 打開博客園首頁(yè)，把博客園的logo圖片保存到本地，并且對(duì)圖片做些修改。
- 打開Fiddler，找到logo圖片的會(huì)話，http://static.cnblogs.com/images/logo_2012_lantern_festival.gif，把這個(gè)會(huì)話拖到AutoResponer Tab下。
- 選擇Enable automatic reaponses 和Unmatched requests passthrough
- 在下面的Rule Editor 下面選擇 Find a file... 選擇本地保存的圖片，最后點(diǎn)擊Save 保存下。
-
再用IE博客園首頁(yè), 你會(huì)看到首頁(yè)的圖片用的是本地的。
image.png
image.png
Fiddler中如何過(guò)濾會(huì)話
Fiddler中有過(guò)濾的功能, 在右邊的Filters tab中，里面有很多選項(xiàng), 稍微研究下，就知道怎么用。
Fiddler中會(huì)話比較功能
選中2個(gè)會(huì)話，右鍵然后點(diǎn)擊Compare，就可以用WinDiff來(lái)比較兩個(gè)會(huì)話的不同了 (當(dāng)然需要你安裝WinDiff)
Fiddler中提供的編碼小工具
點(diǎn)擊Fiddler工具欄上的TextWizard, 這個(gè)工具可以Encode和Decode string。
Fiddler中查詢會(huì)話
用快捷鍵Ctrl+F 打開 Find Sessions的對(duì)話框，輸入關(guān)鍵字查詢你要的會(huì)話。
查詢到的會(huì)話會(huì)用黃色顯示：
Fiddler中保存會(huì)話
保存會(huì)話的步驟如下：
選擇想保存的會(huì)話，然后點(diǎn)擊File->Save->Selected Sessions，即可。
Fiddler的script系統(tǒng)
Fiddler最復(fù)雜的莫過(guò)于script系統(tǒng)，官方幫助文檔: http://www.fiddler2.com/Fiddler/dev/ScriptSamples.asp
首先先安裝SyntaxView插件，Inspectors tab->Get SyntaxView tab->Download and Install SyntaxView Now... ，如下圖：
安裝成功后，F(xiàn)iddler就會(huì)多了一個(gè)Fiddler Script tab。
此時(shí)，就可以在圖示位置編寫腳本。
舉個(gè)例子，讓所有cnblogs的會(huì)話都顯示紅色。
把這段腳本放在OnBeforeRequest(oSession: Session) 方法下，并且點(diǎn)擊"Save script"。
if (oSession.HostnameIs("www.cnblogs.com")) {
oSession["ui-color"] = "red";
}
這樣，所有的cnblogs的會(huì)話都會(huì)顯示紅色。
如何在VS調(diào)試網(wǎng)站的時(shí)候使用Fiddler
在用visual stuido 開發(fā)ASP.NET網(wǎng)站時(shí)，也需要用Fiddler來(lái)分析HTTP， 默認(rèn)Fiddler是不能嗅探到localhost的網(wǎng)站。不過(guò)只要在localhost后面加個(gè)點(diǎn)號(hào)，F(xiàn)iddler就能嗅探到。
例如：原本ASP.NET的地址是http://localhost:2391/Default.aspx，加個(gè)點(diǎn)號(hào)后，變成 http://localhost.:2391/Default.aspx 就可以了。
第二個(gè)辦法就是在hosts文件中加入 127.0.0.1 localsite。
當(dāng)你訪問(wèn)http://localsite:端口號(hào)。這樣，F(xiàn)iddler也能截取到了。
Response 是亂碼的
當(dāng)看到Response中的HTML是亂碼，這是因?yàn)镠TML被壓縮了，可以通過(guò)兩種方法去解壓縮。
- 點(diǎn)擊Response Raw上方的"Response is encoded any may need to be decoded before inspection. click here to transform"。
- 選中工具欄中的"Decode"。這樣會(huì)自動(dòng)解壓縮。
image.png
附：fiddler使用技巧
（1）Fiddler 是什么？
Fiddler是用C#編寫的一個(gè)免費(fèi)的HTTP/HTTPS網(wǎng)絡(luò)調(diào)試器。英語(yǔ)中Fiddler是小提琴的意思，F(xiàn)iddler Web Debugger就像小提琴一樣，可以讓前端開發(fā)變得更加優(yōu)雅。
Fiddler是以代理服務(wù)器的方式，監(jiān)聽系統(tǒng)的網(wǎng)絡(luò)數(shù)據(jù)流動(dòng)。運(yùn)行Fiddler后，就會(huì)在本地打開8888端口，網(wǎng)絡(luò)數(shù)據(jù)流通過(guò)Fiddler進(jìn)行中轉(zhuǎn)時(shí)，可以監(jiān)視HTTP/HTTPS數(shù)據(jù)流的記錄，并加以分析，甚至還可以修改發(fā)送和接收的數(shù)據(jù)。Fiddler還提供了清除IE緩存、請(qǐng)求構(gòu)造器、文本轉(zhuǎn)換工具等等一系列工具，對(duì)前端開發(fā)工作很有價(jià)值。
（2）主要功能
1、分析頁(yè)面性能
2、分析http請(qǐng)求/響應(yīng)數(shù)據(jù)
3、設(shè)置斷點(diǎn)，調(diào)試線上錯(cuò)誤
4、偽造數(shù)據(jù)請(qǐng)求，調(diào)試數(shù)據(jù)接口
（3）Fiddler的界面
image.png
（4）fiddler命令
常用命令：
1、選擇類：?text、>size、<size、=status、@host、
2、blod text、select、allbut、keeponly
3、斷點(diǎn)類：bpafter、bps、bpv、bpm、bpu
4、控制類：hide、start、stop、show、quit
5、其他：cls/clear、dump、g/go、help、urlreplace
image.png
（5）使用fiddler進(jìn)行數(shù)據(jù)分析
image.png
（6）代碼查看器-雙擊session（需下載插件，見后面）
image.png
利用查看器提供的很多形式，我們可以查看數(shù)據(jù)流的內(nèi)容。
（7）請(qǐng)求構(gòu)建器（Request Builder）
image.png
可以創(chuàng)建任意數(shù)據(jù)的請(qǐng)求，如上，輸入url后，點(diǎn)擊Execute按鈕。
（8）過(guò)濾器
image.png
過(guò)濾器可以對(duì)左側(cè)的數(shù)據(jù)流列表進(jìn)行過(guò)濾，可以標(biāo)記、修改或隱藏某些特征的數(shù)據(jù)流。如上圖，通過(guò)過(guò)濾只展現(xiàn)host為p.baidu.com的請(qǐng)求。
（9）AutoResponse功能
image.png
這個(gè)功能。可以算的上是Fiddler最實(shí)用的功能，可以修改服務(wù)器端返回的數(shù)據(jù)，例如讓返回都是HTTP404或者讀取本地文件作為返回內(nèi)容。具體將在實(shí)例中介紹利用AutoResponse功能。
（10）文本編碼和解碼
開啟Tools -> Text Encode/Decode，支持編碼：
1、Base64編碼解碼
2、URL Encode/Decode
3、十六進(jìn)制編碼
4、Unicode編碼解碼
5、HTML實(shí)體化編碼解碼
6、UTF-7編碼解碼
7、Deflated 編碼解碼
image.png
提供了常用的一些文本編解碼的轉(zhuǎn)換。
（11）模擬user-agent
在做mobile上的網(wǎng)頁(yè)開發(fā)時(shí)，經(jīng)常需要修改user-agents為iphone，如下圖 ：
image.png
而通過(guò)fiddler，可以直接修改所有請(qǐng)求的user-agents，這樣很方便，默認(rèn)沒(méi)有iphone的user-agents，需要自己修改配置——可以編輯fiddler Rules來(lái)增加和變更（Rules->Customize Rules）。
（12）模擬慢速網(wǎng)絡(luò)
image.png
（13）對(duì)兩個(gè)數(shù)據(jù)流進(jìn)行比較
image.png
（14）Fiddler提供加載時(shí)間瀑布圖
image.png
（15）Fiddler擴(kuò)展插件安裝
1、代碼高亮插件
http://www.fiddler2.com/redir/?id=SYNTAXVIEWINSTALL
image.png
2、javascript代碼格式化插件
http://www.fiddler2.com/dl/FiddlerJSFormatSetup.exe安裝完畢后，在任何一條js請(qǐng)求后點(diǎn)擊右鍵，選擇Make Javascript Pretty。
3、Gallery
http://www.fiddler2.com/dl/FiddlerGallerySetup.exe展現(xiàn)圖片
更多插件可以到官網(wǎng)下載。
Fiddler插件官網(wǎng)下載：http://www.fiddler2.com/fiddler2/extensions.asp
（16）Fiddler的擴(kuò)展機(jī)制
Fiddler 支持 Jscript.NET 引擎，可以很方便的修改 CustomRules.js 來(lái)擴(kuò)展。修改后立即生效。
開啟：Rules -> Customize Rules…
Handles類兩個(gè)最重要的事件：
1、OnBeforeRequest(oSession: Session)
2、OnBeforeResponse(oSession: Session)
3、OnBeforeRequest范例
image.png
通過(guò)上面代碼，可以將js和css的session分別標(biāo)示為紅色和綠色，效果如下：
image.png
（17）為何有時(shí)捕獲不到：
1、手動(dòng)修改瀏覽器代理ip地址為：127.0.0.1:8888。
2、檢查fiddler捕獲開關(guān)。
image.png
3、檢查過(guò)濾器設(shè)置（filters）。
image.png
