1. 程式人生 > >Fiddler教程(Web調試工具)

Fiddler教程(Web調試工具)

intro watch 基於 network logo web調試 客戶端和服務器 com cookie

轉載地址:寫得很不錯的fildder教程 http://kb.cnblogs.com/page/130367/

Fiddler的基本介紹

  Fiddler的官方網站: www.fiddler2.com

Fiddler的官方幫助:http://docs.telerik.com/fiddler/knowledgebase/quickexec

  Fiddler官方網站提供了大量的幫助文檔和視頻教程, 這是學習Fiddler的最好資料。

  Fiddler是最強大最好用的Web調試工具之一,它能記錄所有客戶端和服務器的http和https請求,允許你監視,設置斷點,甚至修改輸入輸出數據,Fiddler包含了一個強大的基於事件腳本的子系統,並且能使用.net語言進行擴展

  你對HTTP 協議越了解, 你就能越掌握Fiddler的使用方法。你越使用Fiddler,就越能幫助你了解HTTP協議。

  Fiddler無論對開發人員或者測試人員來說,都是非常有用的工具。

  Fiddler的工作原理

  Fiddler 是以代理web服務器的形式工作的,它使用代理地址:127.0.0.1,端口:8888。當Fiddler退出的時候它會自動註銷,這樣就不會影響別的 程序。不過如果Fiddler非正常退出,這時候因為Fiddler沒有自動註銷,會造成網頁無法訪問。解決的辦法是重新啟動下Fiddler。

技術分享

技術分享

  同類的其它工具

  同類的工具有: httpwatch, firebug, wireshark

  Fiddler 如何捕獲Firefox的會話

  能支持HTTP代理的任意程序的數據包都能被Fiddler嗅探到,Fiddler的運行機制其實就是本機上監聽8888端口的HTTP代理。 Fiddler2啟動的時候默認IE的代理設為了127.0.0.1:8888,而其他瀏覽器是需要手動設置的,所以將Firefox的代理改為 127.0.0.1:8888就可以監聽數據了。

  Firefox 上通過如下步驟設置代理

  點擊: Tools -> Options, 在Options 對話框上點擊Advanced tab - > network tab -> setting.

  Fiddler如何捕獲HTTPS會話

  默認下,Fiddler不會捕獲HTTPS會話,需要你設置下, 打開Fiddler Tool->Fiddler Options->HTTPS tab

技術分享

  選中checkbox, 彈出如下的對話框,點擊"YES"

  

技術分享

技術分享

  點擊"Yes" 後,就設置好了。

  Fiddler的基本界面

  看看Fiddler的基本界面

技術分享

  Fiddler的HTTP統計視圖

  通過陳列出所有的HTTP通信量,Fiddler可以很容易的向您展示哪些文件生成了您當前請求的頁面。使用Statistics頁簽,用戶可以通過選擇多個會話來得來這幾個會話的總的信息統計,比如多個請求和傳輸的字節數。

  選擇第一個請求和最後一個請求,可獲得整個頁面加載所消耗的總體時間。從條形圖表中還可以分別出哪些請求耗時最多,從而對頁面的訪問進行訪問速度優化

技術分享

  QuickExec命令行的使用

  Fiddler的左下角有一個命令行工具叫做QuickExec,允許你直接輸入命令。

  常見得命令有:

  help 打開官方的使用頁面介紹,所有的命令都會列出來

  cls 清屏 (Ctrl+x 也可以清屏)

  select 選擇會話的命令

  ?.png 用來選擇png後綴的圖片

  bpu 截獲request

技術分享

  Fiddler中設置斷點修改Request

  Fiddler最強大的功能莫過於設置斷點了,設置好斷點後,你可以修改httpRequest的任何信息包括host, cookie或者表單中的數據。設置斷點有兩種方法:

  第一種:打開Fiddler 點擊Rules-> Automatic Breakpoint ->Before Requests(這種方法會中斷所有的會話)

  如何消除命令呢? 點擊Rules-> Automatic Breakpoint ->Disabled

  第二種: 在命令行中輸入命令: bpu www.baidu.com (這種方法只會中斷www.baidu.com)

  如何消除命令呢? 在命令行中輸入命令 bpu

技術分享

  看個實例,模擬博客園的登錄, 在IE中打開博客園的登錄頁面,輸入錯誤的用戶名和密碼,用Fiddler中斷會話,修改成正確的用戶名密碼。這樣就能成功登錄:

  1. 用IE 打開博客園的登錄界面 http://passport.cnblogs.com/login.aspx

  2. 打開Fiddler, 在命令行中輸入bpu http://passport.cnblogs.com/login.aspx

  3. 輸入錯誤的用戶名和密碼,點擊登錄

  4. Fiddler 能中斷這次會話,選擇被中斷的會話,點擊Inspectors tab下的WebForms tab 修改用戶名密碼,然後點擊Run to Completion 如下圖所示。

  5. 結果是正確地登錄了博客園

技術分享

  Fiddler中設置斷點修改Response

  當然Fiddler中也能修改Response:

  第一種:打開Fiddler 點擊Rules-> Automatic Breakpoint ->After Response (這種方法會中斷所有的會話)

  如何消除命令呢? 點擊Rules-> Automatic Breakpoint ->Disabled

  第二種: 在命令行中輸入命令: bpuafter www.baidu.com (這種方法只會中斷www.baidu.com)

  如何消除命令呢? 在命令行中輸入命令 bpuafter,

技術分享

  具體用法和上節差不多,就不多說了。

  Fiddler中創建AutoResponder規則

  Fiddler 的AutoResponder tab允許你從本地返回文件,而不用將http request 發送到服務器上。

  看個實例:

  1. 打開博客園首頁,把博客園的logo圖片保存到本地,並且對圖片做些修改。

  2. 打開Fiddler 找到logo圖片的會話, http://static.cnblogs.com/images/logo_2012_lantern_festival.gif, 把這個會話拖到AutoResponer Tab下

  3. 選擇Enable automatic reaponses 和Unmatched requests passthrough

  4. 在下面的Rule Editor 下面選擇 Find a file... 選擇本地保存的圖片. 最後點擊Save 保存下。

  5. 再用IE博客園首頁, 你會看到首頁的圖片用的是本地的。

技術分享

技術分享

  Fiddler中如何過濾會話

  每次使用Fiddler, 打開一個網站,都能在Fiddler中看到幾十個會話,看得眼花繚亂。最好的辦法是過濾掉一些會話,比如過濾掉圖片的會話。Fiddler中有過濾的功能, 在右邊的Filters tab中,裏面有很多選項, 稍微研究下,就知道怎麽用。

  Fiddler中會話比較功能

  選中2個會話,右鍵然後點擊Compare,就可以用WinDiff來比較兩個會話的不同了(當然需要你安裝WinDiff)

技術分享

  Fiddler中提供的編碼小工具

  點擊Fiddler 工具欄上的TextWizard, 這個工具可以Encode和Decode string.

技術分享

  Fiddler中查詢會話

  用快捷鍵Ctrl+F打開Find Sessions的對話框,輸入關鍵字查詢你要的會話。 查詢到的會話會用黃色顯示。

技術分享

  Fiddler中保存會話

  有些時候我們需要把會話保存下來,以便發給別人或者以後去分析。 保存會話的步驟如下:

  選擇你想保存的會話,然後點擊File->Save->Selected Sessions

  Fiddler的script系統

  Fiddler最復雜的莫過於script系統了,官方的幫助文檔: http://www.fiddler2.com/Fiddler/dev/ScriptSamples.asp。

  首先先安裝SyntaxView插件,Inspectors tab->Get SyntaxView tab->Download and Install SyntaxView Now... 如下圖

技術分享

  安裝成功後Fiddler 就會多了一個Fiddler Script tab,如下圖:

技術分享

  在裏面我們就可以編寫腳本了, 看個實例讓所有cnblogs的會話都顯示紅色。

  把這段腳本放在OnBeforeRequest(oSession: Session) 方法下,並且點擊"Save script"

if (oSession.HostnameIs("www.cnblogs.com")) {

  oSession["ui-color"] = "red";

}

  這樣所有的cnblogs的會話都會顯示紅色。

  如何在VS調試網站的時候使用Fiddler

  我們在用visual stuido 開發ASP.NET網站的時候也需要用Fiddler來分析HTTP, 默認的時候Fiddler是不能嗅探到localhost的網站。不過只要在localhost後面加個點號,Fiddler就能嗅探到。

  例如:原本ASP.NET的地址是 http://localhost:2391/Default.aspx, 加個點號後,變成 http://localhost.:2391/Default.aspx 就可以了

技術分享

HTTP Request header

  使用Fiddler 能很方便的查看Reques header, 點擊Inspectors tab -> Request tab -> headers 如下圖所示.

技術分享

  header 有很多,比較難以記憶,我們也按照Fiddler那樣把header 進行分類,這樣比較清晰也容易記憶。

  Cache 頭域

  If-Modified-Since

  作用: 把瀏覽器端緩存頁面的最後修改時間發送到服務器去,服務器會把這個時間與服務器上實際文件的最後修改時間進行對比。如果時間一致,那麽返回304,客戶端 就直接使用本地緩存文件。如果時間不一致,就會返回200和新的文件內容。客戶端接到之後,會丟棄舊文件,把新文件緩存起來,並顯示在瀏覽器中。

  例如:If-Modified-Since: Thu, 09 Feb 2012 09:07:57 GMT

  實例如下圖

技術分享

  If-None-Match

  作用: If-None-Match和ETag一起工作,工作原理是在HTTP Response中添加ETag信息。 當用戶再次請求該資源時,將在HTTP Request 中加入If-None-Match信息(ETag的值)。如果服務器驗證資源的ETag沒有改變(該資源沒有更新),將返回一個304狀態告訴客戶端使用 本地緩存文件。否則將返回200狀態和新的資源和Etag. 使用這樣的機制將提高網站的性能

  例如: If-None-Match: "03f2b33c0bfcc1:0"

  實例如下圖

技術分享

  Pragma

  作用: 防止頁面被緩存, 在HTTP/1.1版本中,它和Cache-Control:no-cache作用一模一樣

  Pargma只有一個用法, 例如: Pragma: no-cache

  註意: 在HTTP/1.0版本中,只實現了Pragema:no-cache, 沒有實現Cache-Control

  Cache-Control

  作用: 這個是非常重要的規則。 這個用來指定Response-Request遵循的緩存機制。各個指令含義如下

  Cache-Control:Public 可以被任何緩存所緩存()

  Cache-Control:Private 內容只緩存到私有緩存中

  Cache-Control:no-cache 所有內容都不會被緩存

  還有其他的一些用法, 我沒搞懂其中的意思, 請大家參考其他的資料

  Client 頭域

  Accept

  作用: 瀏覽器端可以接受的媒體類型,

  例如: Accept: text/html 代表瀏覽器可以接受服務器回發的類型為 text/html 也就是我們常說的html文檔,

  如果服務器無法返回text/html類型的數據,服務器應該返回一個406錯誤(non acceptable)

  通配符 * 代表任意類型

  例如 Accept: */* 代表瀏覽器可以處理所有類型,(一般瀏覽器發給服務器都是發這個)

  Accept-Encoding:

  作用: 瀏覽器申明自己接收的編碼方法,通常指定壓縮方法,是否支持壓縮,支持什麽壓縮方法(gzip,deflate),(註意:這不是只字符編碼);

  例如: Accept-Encoding: gzip, deflate

  Accept-Language

  作用: 瀏覽器申明自己接收的語言。

  語言跟字符集的區別:中文是語言,中文有多種字符集,比如big5,gb2312,gbk等等;

  例如: Accept-Language: en-us

  User-Agent

  作用:告訴HTTP服務器, 客戶端使用的操作系統和瀏覽器的名稱和版本.

  我們上網登陸論壇的時候,往往會看到一些歡迎信息,其中列出了你的操作系統的名稱和版本,你所使用的瀏覽器的名稱和版本,這往往讓很多人感到很 神奇,實際上,服務器應用程序就是從User-Agent這個請求報頭域中獲取到這些信息User-Agent請求報頭域允許客戶端將它的操作系統、瀏覽 器和其它屬性告訴服務器。

  例如: User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; CIBA; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; InfoPath.2; .NET4.0E)

  Accept-Charset

  作用:瀏覽器申明自己接收的字符集,這就是本文前面介紹的各種字符集和字符編碼,如gb2312,utf-8(通常我們說Charset包括了相應的字符編碼方案);

  例如:

  Cookie/Login 頭域

  Cookie:

  作用: 最重要的header, 將cookie的值發送給HTTP 服務器

  Entity頭域

  Content-Length

  作用:發送給HTTP服務器數據的長度。

  例如: Content-Length: 38

  Content-Type

  作用:

  例如:Content-Type: application/x-www-form-urlencoded

  Miscellaneous 頭域

  Referer:

  作用: 提供了Request的上下文信息的服務器,告訴服務器我是從哪個鏈接過來的,比如從我主頁上鏈接到一個朋友那裏,他的服務器就能夠從HTTP Referer中統計出每天有多少用戶點擊我主頁上的鏈接訪問他的網站。

  例如: Referer:http://translate.google.cn/?hl=zh-cn&tab=wT

  Transport 頭域

  Connection

  例如: Connection: keep-alive 當一個網頁打開完成後,客戶端和服務器之間用於傳輸HTTP數據的TCP連接不會關閉,如果客戶端再次訪問這個服務器上的網頁,會繼續使用這一條已經建立的連接

  例如: Connection: close 代表一個Request完成後,客戶端和服務器之間用於傳輸HTTP數據的TCP連接會關閉, 當客戶端再次發送Request,需要重新建立TCP連接。

  Host(發送請求時,該報頭域是必需的)

  作用: 請求報頭域主要用於指定被請求資源的Internet主機和端口號,它通常從HTTP URL中提取出來的

  例如: 我們在瀏覽器中輸入:http://www.guet.edu.cn/index.html

  瀏覽器發送的請求消息中,就會包含Host請求報頭域,如下:

  Host:http://www.guet.edu.cn

  此處使用缺省端口號80,若指定了端口號,則變成:Host:指定端口號

HTTP Response header

  同樣使用Fiddler 查看Response header, 點擊Inspectors tab ->Response tab-> headers 如下圖所示

技術分享

  我們也按照Fiddler那樣把header 進行分類,這樣比較清晰也容易記憶。

  Cache頭域

  Date

  作用: 生成消息的具體時間和日期

  例如: Date: Sat, 11 Feb 2012 11:35:14 GMT

  Expires

  作用: 瀏覽器會在指定過期時間內使用本地緩存

  例如: Expires: Tue, 08 Feb 2022 11:35:14 GMT

  Vary

  作用:

  例如: Vary: Accept-Encoding

  Cookie/Login 頭域

  P3P

  作用: 用於跨域設置Cookie, 這樣可以解決iframe跨域訪問cookie的問題

  例如: P3P: CP=CURa ADMa DEVa PSAo PSDo OUR BUS UNI PUR INT DEM STA PRE COM NAV OTC NOI DSP COR

  Set-Cookie

  作用: 非常重要的header, 用於把cookie 發送到客戶端瀏覽器, 每一個寫入cookie都會生成一個Set-Cookie.

  例如: Set-Cookie: sc=4c31523a; path=/; domain=.acookie.taobao.com

技術分享

  Entity頭域

  ETag

  作用: 和If-None-Match 配合使用。 (實例請看上節中If-None-Match的實例)

  例如: ETag: "03f2b33c0bfcc1:0"

  Last-Modified:

  作用: 用於指示資源的最後修改日期和時間。(實例請看上節的If-Modified-Since的實例)

  例如: Last-Modified: Wed, 21 Dec 2011 09:09:10 GMT

  Content-Type

  作用:WEB服務器告訴瀏覽器自己響應的對象的類型和字符集,

  例如:

  Content-Type: text/html; charset=utf-8

  Content-Type:text/html;charset=GB2312

  Content-Type: image/jpeg

  Content-Length

  指明實體正文的長度,以字節方式存儲的十進制數字來表示。在數據下行的過程中,Content-Length的方式要預先在服務器中緩存所有數據,然後所有數據再一股腦兒地發給客戶端。

  例如: Content-Length: 19847

  Content-Encoding

  WEB服務器表明自己使用了什麽壓縮方法(gzip,deflate)壓縮響應中的對象。

  例如:Content-Encoding:gzip

  Content-Language

  作用: WEB服務器告訴瀏覽器自己響應的對象的語言者

  例如: Content-Language:da

  Miscellaneous 頭域

  Server:

  作用:指明HTTP服務器的軟件信息

  例如:Server: Microsoft-IIS/7.5

  X-AspNet-Version:

  作用:如果網站是用ASP.NET開發的,這個header用來表示ASP.NET的版本

  例如: X-AspNet-Version: 4.0.30319

  X-Powered-By:

  作用:表示網站是用什麽技術開發的

  例如: X-Powered-By: ASP.NET

  Transport頭域

  Connection

  例如: Connection: keep-alive 當一個網頁打開完成後,客戶端和服務器之間用於傳輸HTTP數據的TCP連接不會關閉,如果客戶端再次訪問這個服務器上的網頁,會繼續使用這一條已經建立的連接

  例如: Connection: close 代表一個Request完成後,客戶端和服務器之間用於傳輸HTTP數據的TCP連接會關閉, 當客戶端再次發送Request,需要重新建立TCP連接。

  Location頭域

  Location

  作用: 用於重定向一個新的位置, 包含新的URL地址

http://www.cnblogs.com/anny-1980/p/4537922.html

Fiddler教程(Web調試工具)