概覽#
網頁體驗和網路息息相關，Network panel 是分析網路問題的主要工具。本章將說明如何透過 Network log 列表觀察各種重要資訊，以及背後幾個關鍵的觀念。
Network Log Detail#
點擊 Network log 列表中任意一筆 Request，右側會展開該 Request 的詳細資訊面板，並依 Request 類型出現不同分頁。
Headers#
General 區塊包含 Request 的基本資訊：URL、Request method、Status code、Remote address 等。下方再分為 Response Headers 與 Request Headers，預設依字母順序排列，可點擊 view source 看原始 Header。
Headers Order#
Header 順序在某些情況會影響結果。例如多個 Accept Header 會被解析端以逗號串接：
Accept: text/html
Accept: application/xhtml+xml, application/xml不同實作下解析結果可能不同，遇到 Header 衝突時要特別注意順序。
Request Payload#
依 Request 帶的資料會出現不同分頁，預設以 key: value 列出，按 view source 可看原始內容：
- Query String：
Query String Parameters。 - Request Payload：
application/x-www-form-urlencoded、application/json。 - Form Data：
multipart/form-data。
Provisional Headers#
Request 失敗或 Response 來自快取時會看到 Provisional Headers 警告，這時 Header 列表的資訊就會非常少。
Response#
顯示原始 Response 內容。因為是原始內容，非文字無法顯示。文字內容可按左下角的 {} 自動格式化。
Preview#
同樣顯示 Response 內容，但 Preview 會根據檔案類型決定呈現方式：
- JSON：JavaScript 物件展開檢視。
- 圖片：直接顯示。
- HTML：Render 成頁面。
- 字體：顯示字體中可用的所有字符。
Initiator#
顯示 Request 的依賴關係與發起原因。
Request Initiator Chain#
以樹狀結構列出完整依賴鏈，可以看出：
- 該 Request 依賴於哪些其他 Request。
- 哪些 Request 又依賴於它。
按住 Shift 並 Hover Request，依賴的 Request 會變綠底，依賴它的 Request 會變紅底。由於預設依時間排序，綠色一定在上、紅色在下，很容易判讀。
Request Call Stack#
由 JavaScript 發起的 XHR/Fetch Request 會顯示調用堆疊（Call Stack），由下往上代表 Function 的呼叫順序，最上層 Function 即為發出 Request 的地方。
Timing#
發起 Request 時要經過 DNS lookup、TCP handshake、SSL negotiation 等階段才能開始下載內容，Timing 分頁會列出每個階段的耗時。
排隊（Queuing）#
下列情境瀏覽器無法立刻發出 Request，必須先排隊：
- 有更高優先（Priority）的 Request 排在前面。
- 使用 HTTP/1.0 或 HTTP/1.1，且該 Domain 已有六個 Request 進行中。
- 瀏覽器內部的準備動作，例如配置快取空間。
開始建立連線#
Stalled 階段成因和 Queuing 接近，可以想像成排隊到了櫃台，店員仍然請你「稍等一下」。
- Stalled：尚未開始建立連線。
- DNS Lookup：透過 DNS Server 解析出 IP。
- Initial connection：包含 TCP handshake 與 SSL negotiating。
送出 Request#
- Request sent：送出 Request 所花的時間。
- Waiting (TTFB)：送出 Request 到開始下載第一個 byte 的時間。
- Content Download：實際下載內容的時間。
分析方向#
依瓶頸落在哪個階段，常見對策：
- Queuing、Stalled 過長：考慮 HTTP/2 或 Domain sharding。
- 建立連線階段過久：使用 Preconnect。
- Waiting 過久：與 Server 效能有關。
- Content download 過久：要看內容大小與壓縮策略。
Server 在處理 CORS 時會先觸發 preflight 請求，這也會反映在這裡的 Timing 上。
Messages#
對 WebSocket Request 展開後可以看到即時訊息、長度與時間，上傳訊息會帶綠色背景。
Cookies#
Request 帶 Cookie 或 Response 帶 Set-Cookie 時就會出現 Cookies 分頁，可以查看每個 Cookie 的屬性。預設不顯示被擋掉的 Cookie，需開啟 show filtered out request cookies 才看得到，Hover 到訊息圖示能看到被擋的原因。
右鍵選單#
Request 的右鍵 Copy 選單裡有幾個常用選項：
- Copy as fetch：把 Request 複製成 fetch 程式碼，方便修改後重發；類似還有 cURL 等格式，爬蟲、API 測試都很實用。
- Copy response：直接複製 Response 內容。
Network log 欄位#
Network log 預設有七個欄位：Name、Status、Type、Initiator、Size、Time、Waterfall。在表頭右鍵能加入更多欄位，下方的 Response Headers 子選單甚至能加入自訂 Header 欄位。
下面挑幾個比較重要的欄位說明。
Priority#
每種 Request 的優先程度不同，瀏覽器也會依此調整行為，例如：
- 會造成 Render blocking 的 CSS 屬於最高優先。
- 不在視野內的圖片優先度較低。
Prefetch屬於最低優先，要等 Network idle 才會發出。
Connection ID#
TCP 連線建立後瀏覽器會保留以重用。打開 Connection ID 欄位後，相同數字的 Request 在第一筆完成連線後，後續就不必重新建立連線。
範例中只有第一筆 80709、80736 看到完整的橘紫色「建立連線」階段。
Waterfall#
Network log 預設依 Request 起始時間排序。Waterfall 欄位的右鍵可切換排序方式：
- Start Time：開始時間（預設）。
- Response Time：開始下載的時間。
- End Time：結束時間。
- Total Duration：開始到結束的總耗時。
- Latency：開始到開始下載的時間，也就是 TTFB。
TTFB 是 Web Vitals 指標的一員，在後續 Performance 章節會以 Web Vitals 為主題深入討論。
小結#
熟悉 Network log 的詳細欄位、Initiator 依賴鏈、Timing 階段與 Waterfall 排序方式，能把網路相關的效能問題收斂到具體階段，再針對該階段對症下藥。