Network 面板詳細記錄著每個請求、回應的結果，除了用來檢查單次的請求是否完成，更好用的是對所有請求的搜尋、過濾、分析，以及客製化的介面。

概覽

Network 面板主要由上方的工具列和下方的 Network log 組成，預設會開啟中間的 Overview，將各個請求的時間關係以視覺化的方式呈現。

在面板 Overview 中可以看到 DOMContentLoaded 和 load 事件觸發的時間線，分別以藍色和橘（紅）色標示，下方的資訊列則會顯示請求的總數、實際網路傳輸量、所有資源的大小以及總花費時間。

一般來說只要開著 DevTools 就會記錄 Network log，如果想要完整觀察網頁中的所有請求，只需要重整頁面，預設 Network log 會按照請求開始時間排序。

按下 F5 或重新整理會直接開始錄製 Network log

另外在開啟 DevTools 的狀況下按住或右鍵點擊重整按鈕會有更多選項：

• Hard Reload – 重整時忽略快取，DevTools 關閉時也可以透過快捷鍵使用
• Empty Cache and Hard Reload – 清除快取後再 Hard Reload

其差別在於頁面讀取完畢後可能還會透過 JavsScript 動態請求其他資源（XHR/Fetch），只有單純使用 Hard Reload 而沒有清除快取的狀況下還是會觸發快取。

透過快捷鍵（Shift+Command+R）可以在沒有開啟 DevTools 時 Hard Reload

講完了 Network 面板的基本用途，當然還有許多細節在各個功能中，接下來會把 Network 面板的功能分為以下三大類，並從 Network 的設定開始講起：

• Network 的設定
• Network log 的篩選、排序和搜尋
• 分析 Network log 的重點

工具列

工具列主要包含了功能的開關，以圖示或 Checkbox 來表示，另外還有 Network settings 小齒輪，主要包含了影響面板視覺的選項。

Record network log

只有開啟時也就是亮紅時才會錄製 Network log，預設開啟，重整時也會自動開啟。

Clear

清空 Network log 列表。

Filter

顯示/隱藏 Filter 選項區，隱藏時會呈現灰色，如果有加入 Filter 條件則不論是否收合都繪顯示紅色。

Search

按下 Command+F 或是放大鏡圖示會展開左側的搜尋面板，用來搜尋 Network log 的內容。

Network log 的 Filter 和 Search 詳細用法將會是下一篇文章的主題

Preserve log

預設在重整或換頁時會清除所有 Network log，勾選時可以避免清除紀錄，適合用在需要連續紀錄多次跳轉的 Network log。

Disable cache

不使用快取，注意只有在 DevTools 開啟時才有效，可以來模擬初次來訪的使用者。

Throttling

只在 DevTools 開起時有效，可用來模擬低網速的環境，有時會因為網路速度影響資源請求順序或是網頁行為，筆者曾經在客製化影片播放器時，發現網速過慢就會產生錯誤，當時就將網速調整為 Slow 3G 來找出問題。

此外透過降低網速拉長請求時間也能更清楚的觀察各個請求的時間關係，在優化網頁資源請求時可以嘗試。

而完全關閉網路 Offline 除了可以測試 Service worker 的請求攔截、快取機制以及離線瀏覽功能，還可以玩小恐龍。

其實在網址列輸入chrome://dino 就可以玩了，而且是全螢幕的！

Import/Export HAR file

HAR 為 HTTP Archive 格式的副檔名，主要用來分析網頁效能問題，透過 Export HAR file 能將目前的 Network log 匯出，反之可用 Import HAR file 匯入其他 HAR 檔，將 Network 面板作為分析工具。

除了 Chrome DevTools，其他瀏覽器如 Firefox、Safari 的 DevTools 也有 HAR 分析工具，另外也可以直接把 HAR 檔匯入到 HAR Analyzer 進行分析，一般來說在分析時會使用無痕模式來模擬較真實的使用情境，以免被其他請求干擾，如 Service worker、Extension 等等。

設定

點擊工具列右方的小齒輪（Settings）會展開四個設定選項，開關時會改變面板顯示的內容，通常會在需要觀察特定問題的時候才會更動選項。

Use large request rows

切換為寬版的 Network log 來顯示更多資訊，不過來源 URL 和原本只能在寬版看到的未壓縮檔案大小自從 Chrome 75 以後，在窄版的列表也能透過 Hover Network log 顯示未壓縮大小。

以下圖為例，可以看到檔案原始大小為 1.2 MB，但網路實際傳輸量只有 377 kB，一般網頁的資源都在傳輸前進行壓縮，再傳送到前端，可以大幅縮小實際傳輸的流量，常見的壓縮格式有 gzip、deflate、Brotli 等等，在請求時可以用 accept-encoding Header 列出瀏覽器支援的壓縮格式，回應則會以 content-encoding Header 表示該資源使用的壓縮格式。

Hover Network log 時顯示檔案大小資訊

此處的 br 代表用了 Brotli 壓縮格式，常見於壓縮文字檔。

Group by frame

勾選時會將來自同個 iframe 的 Network log 收和在一起。

可以從 Console 面板的 Context 選單看目前有哪些 frame，另外也可以用 window.frames 取得 window 目前開啟哪些 frame，但由於安全問題無法存取不同網域的 Frame。

console.log(Array.from(window.frames));

Show overview

預設是開啟的，功能和 Waterfall 一樣，用線條來視覺化 Network log 的時間關係，會動態改變時間軸來顯示從開始記錄時到目前所有的 Network log。

Capture screen shots

開啟後重整會將頁面讀取過程一一截圖，Hover 截圖時可以看到 Overview 中有一條黃線時間線，代表截圖的時間，此外雙擊截圖可以放大，點擊截圖則隱藏截圖時間之後的 Network log。

Drawer

在任意面板中按下 ESC 可以打開 Drawer，裡面會有額外的功能，和 Network 相關的有以下幾個：

Network conditions

和 Drawer 中的 Console 面板相同，方便在 Network 面板以外的地方調整 Network 面板的設定，有三個功能：

• Disable cache
• Network throttling
• User agent -- 在 Network conditions 才可以使用，可以設定任意 User agent，一般的瀏覽器預設 User agent 會透露出作業系統、瀏覽器型號等資訊，Endpoint 也可能依據 User agent 回傳不同的 Response，例如判定為較舊的瀏覽器時進行 Polyfill 或簡單阻擋爬蟲等等。

Request blocking

想要模擬特定資源無法取得的情境時，可以在 Request blocking 分頁中輸入要阻擋的 URL pattern。

小畫家開不起來了

小結

今天先講解了 Network 面板中關於設定的部分，明天將會介紹如何以篩選、排序、搜尋等方式來觀察特定的 Network log。