提醒：本文最後更新於 1954 天前，文中所描述的資訊可能已發生改變，請謹慎使用。

最近準備給組內的新同學們分享下 Fiddler 這枚神器，可以講的地方太多，我打算把一節課講不完的內容寫在部落格上，大家可以隨便看看。今天先介紹下 Fiddler 的瀑布圖。

每個網路請求都會經歷域名解析、建立連線、傳送請求、接受資料等階段。把多個請求以時間作為 X 軸，用圖表的形式展現出來，就形成了瀑布圖。在 Fiddler 中，只要在左側選中一些請求，右側選擇“Timeline”標籤，就可以看到這些請求的瀑布圖，如下（點選檢視大圖）：

看到這張圖，你是否可以回答這些問題：

1. 圖示的 Y 軸上顯示的是簡化後的 URL。為什麼有些是綠色的，有些是黑色的？
2. 為什麼第一個請求用陰影線來表示，其它請求卻都是實心的？
3. 請求條的不同顏色分別代表什麼？
4. 每個請求中的黑色豎線表示什麼？
5. 請求後面的圖示（如閃電和軟盤）代表了什麼？
6. 每個請求前面兩個小圓圈是什麼，為什麼有的是紅色，有的是綠色？

如果其中一個或者多個你不知道答案也沒關係，下面將一一揭曉。

1、綠色的請求表示這是一個“有條件的請求”。HTTP 協議定義了 5 個條件請求頭部，最常見的兩個是“If-Modified-Since”和“If-None-Match”。伺服器根據這兩個頭部來驗證本地快取是否過期，如果過期則正常返回資源的最新版本；否則僅返回 304 Not Modified，瀏覽器繼續使用本地快取。包含條件請求頭部的請求用綠色顯示，否則用黑色。

2、有陰影線的請求是緩衝模式下的請求，實心的是流模式下的請求。Fiddler 提供了緩衝（Buffering）和流（Streaming）兩種抓包模式：緩衝模式下，Fiddler 會在響應完成時才將資料返回給應用程式（通常是瀏覽器），這種模式下可以控制響應，方便地修改響應內容；流模式下，Fiddler 會實時返回響應資料給瀏覽器，但沒辦法控制響應。一般使用流模式，瀑布圖會更真實一些。這兩種模式可以通過 Fiddler 的工具欄選擇。特別的，通過 Fiddler 的“AutoResponder”功能返回的響應，只能是緩衝模式。

3、請求條的不同顏色對應著不同型別的響應，根據響應頭的 MIME Type 來歸類。如淺綠色表示圖片型別的響應；深綠色是 JavaScript；紫色是 CSS；其它都是藍色。

4、請求中的黑色豎線，表示的是瀏覽器收到服務端響應的第一個位元組這一時刻。這個時間受 DNS 解析、建立連線、傳送請求、等待服務端響應等步驟的影響。

5、請求條後面的圖標表示響應的某些特徵。如軟盤圖標表示這個響應正文從本地獲得，也就是說服務端返回了 304；閃電錶示這是 Fiddler 的“AutoResponder”的響應；向下的箭頭表示響應是 302，需要重定向；紅色感嘆號說明這個請求有錯誤發生（狀態碼是 4XX 或 5XX）。

特別的，如果請求條後面有一個紅色的X，說明服務端響應完這個請求之後，斷開了連線。出現這種情況一般有兩種可能：HTTP/1.0 的響應中沒有 Connection: Keep-Alive；或者是 HTTP/1.1 的響應中包含了 Connection: close。使用持久連線可以省去建立連線的開銷，也可以減小 TCP 慢啟動和其它擁塞控制機制帶來的影響，總之是好處多多。

6、請求前面的紅色圓圈表示這個連線是新建的，綠色表示是複用的。上面的圓圈表示的是瀏覽器到 Fiddler 的連線，下面的圓圈是 Fiddler 到服務端的連線。

現在，再看到 Fiddler 的瀑布圖就一目瞭然了吧。最後再來兩張瀑布圖自己練習下：

--EOF--

發表於 2013-09-04 23:47:48 ，並被新增「 Fiddler 、 HTTP 」標籤 。檢視本文 Markdown 版本 »

提醒：本文最後更新於 1954 天前，文中所描述的資訊可能已發生改變，請謹慎使用。