web debugger fiddler 使用小結


 

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

 

工作原理

先上個圖

IC68965

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

它實際工作在本機的8888端口http代理,我們啟動fiddler時,它會自動更改代理設置:

123456

 

從此我們可以看出,只要是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時中斷

除此之外,在菜單欄:

    image

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

 

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

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

2,在fiddler命令輸入區輸入 bpu www.baidu.com,這樣就可中斷url中包含這個地址的請求

3,然后在剛打開的百度頁面輸入fiddler點擊搜索

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

image

紅色小圖標開頭的會話,雙擊。

5,查看右邊面板

image

 

6,此在斷點在請求未發出時,上半部分是請求的數據內容,切到webforms我們可以看到更直觀的數據的請求數據:

image

 

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

7,看面板中間的

image

兩個按鈕和一個下拉選擇框:break on response,點擊這個按鈕,就會在發出請求,在響應數據回到fiddler時再次中斷;run to complete,點擊就會正常處理,不會再中斷請求。

打開下拉選擇框:

image

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

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

image

 

切到webview:

image

 

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

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

當然不只這些,我們知道firebug這些工具是不能修改js的,我們用fiddler就可以中斷我們要修改的js文件,然后在這里修改部分代碼,之后再借助firebug就可以完美調試現網代碼。

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

image

 

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

10,點擊run to complete.

此時查看瀏覽器標簽區:

image

是我們修改過的內容了。

 

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

 

fiddler強大功能之二 AutoResponder

image

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

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

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

image

 

然后在第二行里,選擇404_plain.dat,點擊save保存。

面板中會有

image

 

這樣的一條記錄。

再去刷新baidu,會得到

image

 

就這樣,我們就可以會為某一個請求如js的請求,返回本地的一個js數據,在配合firebug完美調試頁面前端。

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

 

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

image

 

顧名思意,就是構造請求,然后點擊execute按鈕可以發起請求。

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

 

fiddler強大功能之四 自定義腳本

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

我們可以

image

調出腳本進行修改,也可以在

這個面板上直接修改。

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

 

fiddler強大功能之五 性能測試

我們從會話列表中選擇一個或多個會話,然后查看右邊statistics面板:

image

 

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

最下面還有一個 show chat的鏈接點擊我們可以看到一個直觀的各種類型數據在總的數據的圖形。

除了這些統計之外,我們還可以在會話列表查看,查看我們請求內容的是否做了瀏覽器緩存和緩存時間。

還可以在菜單中

image

 

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

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

        if (m_SimulateModem) {
            // Delay sends by 300ms per KB uploaded.
            oSession["request-trickle-delay"] = "300"; 
            // Delay receives by 150ms per KB downloaded.
            oSession["response-trickle-delay"] = "150"; 
        }

 

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

 

另外,我們選擇一個會話,然后在右側

image

 

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

 

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

這里就不介紹了,在命令輸入區域,輸入help,回車之后,打開的頁面上介紹挺全的,真的很強大。

 

fiddler強大功能之七 過濾器

你有時會不會打開fiddler來抓取這個頁面的,但是其它的各種請求的數據也會被記錄,然后再費勁查找,這時就啟用過濾器吧。

image

 

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

工具欄上image

 

這個工具,我們鼠標摁住這個按鈕,然后拖動到我們要抓取的瀏覽器標簽頁之上,然后松開,就會看到

image

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

image

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

 

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

1,工具欄的

image

點中之后,它會為那些編碼的數據自動的解碼,利於閱讀。

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

image

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

3,最下方狀態欄

image

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

 

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM