WEB/HTTP 調試利器 Fiddler 的一些技巧分享

一、原理簡介：

Fiddler 是目前最強大最好用的 Web 調試工具之一，它能記錄全部客戶端和服務器的http和https請求， 容許你監視，設置 CGI 請求的斷點，甚至修改輸入輸出數據。同類的工具還有httpwatch，firebug，wireshark，google審查元素。與這些基於網頁瀏覽 器的工具不一樣，fiddler是一個富客戶端桌面工具，不只能監聽瀏覽器對網頁的請求和對瀏覽器的響應（http和https請求）， 並且能夠監聽其餘程序（好比java桌面應用）的http請求（固然須要額外的設置，在此不贅述）。另外，值得一提的是，即使在瀏覽器的調試中，它也能勝 任其餘工具，好比IE瀏覽器，當咱們須要彈出一個模式對話框（modalDialog）時，這些瀏覽器監聽插件就派不上用場了，還得fiddler出場。

fiddler 和常見的底層抓包（網卡） 工具不同（如 wincap、wireshark），它是在 web server 和 web browser 之間搭了一層 proxy，全部的請求都會通過它，以下圖所示

   fiddler在客戶瀏覽器及web服務器之間充當了一個請求及響應的代理角色，它會在本地創建一個默認代理服務，端口爲8888，爲此咱們訪問一下此端口，可見以下效果：

二、一些經常使用技巧介紹：

（1）Fiddler中設置斷點修改Request

第一種：打開Fiddler 點擊Rules-> Automatic Breakpoint  ->Before Requests(這種方法會中斷全部的會話)
如何消除命令呢？  點擊Rules-> Automatic Breakpoint  ->Disabled
第二種:  在命令行中輸入命令:  bpu www.baidu.com   (這種方法只會中斷www.baidu.com)
如何消除命令呢？  在命令行中輸入命令 bpu

（2）Fiddler中設置斷點修改Response

第一種：打開Fiddler 點擊Rules-> Automatic Breakpoint  ->After Response  (這種方法會中斷全部的會話)
如何消除命令呢？  點擊Rules-> Automatic Breakpoint  ->Disabled
第二種:  在命令行中輸入命令:  bpafter www.baidu.com   (這種方法只會中斷www.baidu.com)
如何消除命令呢？  在命令行中輸入命令 bpafter,

（3）自動重定向 AutoResponder 到本地文件

建立重定向規則，例如將目標請求是這個js的HTTP請求重定向到本地文件

請參考阿里 UED 的這篇：使用Fiddler提升前端工做效率 (實例篇)

 

假設咱們發現這個頁面有問題，須要修改所引用的js文件（http://www.aliued.cn/wp-includes/js/comment-reply.js?ver=20090102）。

第一步：用Fiddler查看頁面的數據流列表，找到這個js文件的session

tip: 最好是沒有緩存的返回內容（Result Code是200），這樣能夠進行下一步的保存。不是200也不要緊，你只要本地硬盤上有這個文件就行了。

第二步：將js文件保存到本地（若是本地已經有這個文件，能夠跳過這步）

在這個js session上右鍵點擊，選擇「Save – Response –Response Body…」，將js文件的內容保存到本地。記住存的位置，下面咱們會用到這個保存下來的文件。

第三步：開啓Fiddler的請求自動重定向功能

打開AutoResponder標籤設置。有沒有看到界面上有兩個複選框？第一個的做用是開啓或禁用自動重定向功能，咱們就能夠在下面添加劇定向規則了。第二個複選框框勾上時，不影響那些沒知足咱們處理條件的請求。

第四步：建立重定向規則，將目標是這個js的HTTP請求重定向到本地文件

咱們能夠經過「Add…」按鈕手動添加規則，不過這個URL已經出如今咱們的session列表中，能夠直接拖動過來。在左側的Session列表中選擇第一步找到的session，拖動到AutoResponse標籤中。這樣就建立了一個針對這個URL的規則。

Fiddler幫咱們生成的規則是：

• 當URL爲：http://www.aliued.cn/wp-includes/js/comment-reply.js?ver=20090102
• 返回200，使用和Session 4如出一轍的內容返回

咱們須要修改這個規則，

選擇「Find a file…」，就能夠選擇本地的文件做爲返回的body內容。

選擇咱們剛剛保存下來的文件。

刷新一下瀏覽器頁面，看一下session列表，若是像下面這樣，這個session的底色是灰色的，那麼恭喜你，你已經成功將這個請求重定向到本地文件了！

tip: 若是瀏覽器用的是Firefox，記得先清一下臨時文件緩存，由於Firefox是真正的緩存，當判斷文件的緩存還未過時時，就不會再發請求出來，Fiddler就獲取不到了。

第五步：修改本地文件，進行測試

咱們在本地的js文件中加一句alert(‘hello’)

刷新瀏覽器，看看效果，若是alert出來，那就成功了。

繼續修改這個文件並測試，成功修復問題後，咱們就能夠發佈修改後的文件了。

小結：自動重定向功能是Fiddler最實用的功能，這裏的Rule能夠自由地設定，可使用搜索（默認）、精確匹配（EXACT）、正則表達式匹配（REGEX）。處理方式能夠選擇使用文件，也能夠選擇合適的時間暫停數據流（*bpu、*bpafter），人工干預。經過以上幾個步驟，咱們演示了怎樣將HTTP請求重定向到本地的文件，進行web調試。這種調試方式不須要發佈到線上再驗證，避免了修改不成功、對用戶形成影響的風險，並且不須要搭建複雜的開發服務器等開發環境，很是適合快速web調試。

延伸閱讀：

1. Fiddler使用幫助
2. Fiddler AutoResponder標籤說明

 

 

 

（4）過濾會話 session list filter：

好比你可能在debug某些網頁時，會遇到上百個請求，看的你眼花繚亂，這是你能夠啓用 fiddler 強大的過濾機制：

（5）請求構建器（Request Builder）、對兩個數據流進行比較

（6）文本編碼和解碼：開啓Tools -> Text Encode/Decode

（7）模擬user-agent：Rules->Customize Rules、模擬慢速網絡

（8）fiddler 打印 cgi log：

       http://my.oschina.net/leejun2005/blog/65259

（9）fiddler-使用技巧：

       http://vdisk.weibo.com/s/CcitC7ClCn_vr

       http://www.slideshare.net/bencalie/fiddler-7859272

（10）FiddlerScript：

         http://fiddler2.com/blog/blog/2013/07/15/understanding-fiddlerscript

（11）Filters Reference：

          http://fiddler2.com/documentation/KnowledgeBase/Filters

（12）Add Columns to the Web Sessions List：

          能夠看上圖的藍色方框就是自定義列

         http://fiddler2.com/documentation/KnowledgeBase/FiddlerScript/AddColumns

回到頂部

三、注意的問題及解決方法

（1）chrome和firefox瀏覽器沒法被監聽

fiddler安裝以後，默認會在IE瀏覽器中安裝一個fiddler的插件，因此它對IE及國內基於IE內核的各種瀏覽器都能實現監聽，但其餘內核的瀏覽器沒法被監聽。 
解決辦法：禁用chrome和firefox中具備代理 功能的插件，好比個人chrome安裝了switchSharp，禁用它或選擇「使用系統代理設置」，或在switchSharp中新配置一個代理項（比 如名爲fiddler，用於指向代理127.0.0.1，端口8888，以下圖），便可實現監聽。

（2）沒法代理本地web服務器的訪問請求

使用fiddler的時候，咱們更多的是基於本地程序的調試，惋惜fiddler捕捉不了本地（localhost或127.0.0.1）的http請求。難道fiddler就一籌莫展了嗎？固然不是。 
通常咱們訪問安裝在本地的服務器程序時，使用的localhost或127.0.0.1，默認會繞過代理，直接訪問目標服務器，經過fiddler特有的請求方式，可使本地請求及響應都被fiddler攔截。

方法一：在localhost後增長.fiddler
好比請求http://localhost:8080改成http://localhost.fiddler:8080便可
方法二：更簡單，在localhost或127.0.0.1後增長一個點便可
好比http://localhost.:8080

具體請參考：http://www.ichatter.cn/2013/06/19/666/

（3）Fiddler不能監聽Java HttpURLConnection請求，請看：

http://www.cnblogs.com/tt-0411/archive/2012/03/18/2404355.html

http://stackoverflow.com/questions/8549749/how-to-capture-https-with-fiddler-in-java

回到頂部

四、其它

爲何想來總結一下呢，是由於最近有個測試需 求，須要檢測某個網頁指定的 url 請求個數，測試的同窗還爲此專門用  JPCAP 開發了一個系統來監聽指定的網卡，抓包、解包，分析請求的數據包，而後得出指定 url 的個數。感受這個有點大材小用了，呵呵。由於這個 fiddler 就已經能夠搞定了，而後 ctrl - a、ctrl - c 便可知足需求了，只是沒有徹底自動化而已，呵呵。

最後題外話一下有關 JPCAP 的東西：

       衆所周知，JAVA語言雖然在TCP/UDP傳輸方面給予了良好的定義，但對於網絡層如下的控制，倒是無能爲力的。JPCAP擴展包彌補了這一點。
        JPCAP實際上並不是一個真正去實現對數據鏈路層的控制，而是一箇中間件，JPCAP調用wincap/libpcap，而給JAVA語言提供一個公 共的接口，從而實現了平臺無關性。在官方網站上聲明，JPCAP支持FreeBSD 3.x, Linux RedHat 6.1, Fedora Core 4, Solaris, and Microsoft Windows 2000/XP等系統。JPCAP的整個結構大致上跟wincap/libpcap是很相像的，例如NetworkInterface類對應wincap 的typedef struct _ADAPTERADAPTER，getDeviceList()對應pcap_findalldevs()等等。 使用 JPCAP 實現監聽利用的是所謂的「ARP欺騙」技術。具體請參考：

http://fulong258.blog.163.com/blog/static/17895044200801145924745/