Network - 概覽與設定

概覽#

Network panel 詳細記錄每一筆請求和回應，除了用來檢查單次 Request 是否完成，更重要的是在所有 Network log 上做搜尋、過濾、分析，搭配介面設定整理出方便閱讀的視角。

Network 面板由上方工具列與下方 Network log 列表組成，預設會顯示中間的 Overview，將每個請求的時間關係視覺化。

在 Overview 中可以看到：

只要 DevTools 開著就會自動記錄 Network log，想完整觀察一次頁面的請求只需要重整。預設會以請求開始時間排序。

按住或右鍵點擊重整按鈕（須開啟 DevTools）會看到更多選項：

兩者的差別在於頁面載入後可能還會透過 JavaScript 動態請求 XHR/Fetch 資源；只 Hard Reload 不清快取的話，這些動態請求仍可能命中快取。

工具列大多是功能開關，常用項目：

Network log 的 Filter 與 Search 詳細用法將在下一章說明。

Preserve log：跳轉或重整時保留紀錄，適合連續操作流程的觀察。
Disable cache：DevTools 開啟時關閉快取，模擬初次造訪的使用者。
Throttling：限制網速，例如 Slow 3G 用來重現低網速問題；也可以選擇 Offline 來測試 ServiceWorker 攔截、離線瀏覽。
Import/Export HAR file：HAR (HTTP Archive) 是分析網頁效能的標準格式，可匯出目前 Network log 或匯入他人提供的 HAR 檔來分析。

HAR (HTTP Archive) 不限於 Chrome，Firefox、Safari 與線上的 HAR Analyzer 都能解析。分析時建議使用無痕模式，避免 ServiceWorker、Extension 干擾。

工具列右側的小齒輪會展開四個設定，多半在針對特定問題時才會調整。

切到寬版列表可以看到更多資訊。Chrome 75 之後，原本只在寬版才看得到的「未壓縮檔案大小」也能在窄版透過 Hover 行顯示。

範例中可以看到原始大小 1.2 MB 的檔案，網路實際傳輸量只有 377 kB。常見的壓縮格式包括 gzip、deflate、Brotli。請求端用 accept-encoding Header 表達支援格式，回應端用 content-encoding 標示實際採用的格式。

啟用後會把同一個 iframe 來源的 Network log 收合在一起。Console 的 Context 選單可以看到目前有哪些 frame，也能用：

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

不過受同源政策限制，跨 Domain 的 frame 仍無法直接存取。

預設開啟，與 Waterfall 同樣是時間關係視覺化，會動態調整時間軸顯示從錄製開始到當前的所有請求。

開啟後重整會逐張截下頁面載入過程，Hover 截圖時 Overview 會出現一條黃色時間線。雙擊放大、點擊則會隱藏該時間之後的 Network log。

任一面板下按 ESC 都能打開 Drawer，與 Network 相關的有：

方便在其他面板也能調整 Network 設定，提供：

Disable cache。
Network throttling。
User agent：可以自訂 User agent，模擬不同作業系統或瀏覽器型號。某些 Endpoint 會因 User agent 回傳不同的內容，例如為舊瀏覽器補 Polyfill 或阻擋爬蟲。

可輸入 URL pattern 模擬特定資源無法取得的情境，方便確認頁面在資源缺失時的行為。

本章先把 Network 面板的設定面爬過一輪，下一章會進入 Network log 的篩選、排序、搜尋技巧，把海量請求整理成可分析的清單。