概覽#
無論是檢查某個 Request 是否成功、或是要從時間線分析效能瓶頸，每次打開 Network panel 都該帶著一個明確目標。在請求一多、廣告與追蹤碼又夾雜的情況下，肉眼掃描完全是大海撈針。
本章說明怎麼用 Network 面板的 Filter 與 Search 功能，把海量 Network log 縮減到真正想分析的範圍。
過濾（Filter）#
Filter 用來保留或排除特定 Request，下面整理可在 Filter 欄位使用的規則類別。
By name#
最直觀的方式是直接輸入字串或 Regex pattern 比對 Request 的 URL，例如 Domain、檔案路徑、檔名、副檔名。前面加上減號 - 則會反向排除符合的項目。
直接輸入 pattern 只會比對 URL name，通常需要搭配 By type 或 By properties 才能做到精準過濾。
By type#
Filter 輸入框右側列出許多 Request 類型，點擊其中一個會排除其他類型的 Request；按住 Command 可以同時選多個。
選擇 CSS 類別並不等於輸入
.css。檔案類型由 Network 面板判定，例如某 CSS 檔若是透過 XHR/Fetch 載入，就不會出現在 CSS 類別。Font 類別代表的是.woff2、.ttf等字體檔；WebSocket 則對應wss://開頭的 Request。
By properties#
以屬性過濾是最強大的方式。輸入屬性名稱加冒號時會跳出下拉選單列出該屬性可用的值。前面加上 - 同樣可以反向排除。
domain#
domain:*.com -domain:google.com支援 wildcard *，比直接輸入 Domain 字串更彈性。輸入 domain: 還會列出當下記錄包含的 Domain。
has-response-header#
has-response-header:Content-Type依 Response Header 過濾。
is#
is:running：WebSocket Request。is:from-cache：來自快取的 Response，包括 ServiceWorker、Memory cache、Disk cache。Network log 的 Size 欄位會顯示實際的快取類型，Memory cache 效能比 Disk cache 高，但關閉瀏覽器後消失。is:service-worker-initiated：由 ServiceWorker 發起的 Request。is:service-worker-intercepted：被 ServiceWorker 攔截的 Request。
self.addEventListener("fetch", (event) => {
event.respondWith(caches.match(event.request));
});ServiceWorker 可以實作各種快取策略，例如先以快取回應、背景再去更新資源，下次請求才拿到新版本。
larger-than#
larger-than:520
larger-than:8k單位為 byte，會列出網路實際傳輸量大於指定大小的 Request；快取資源因為傳輸量為 0，不會被列入。
method#
method:GET依 HTTP method 過濾。
mime-type#
mime-type:image/jpeg依 Response 的 Content-Type 過濾，例如 text/html、image/jpeg。
mixed-content#
mixed-content:all
mixed-content:displayedHTTPS 頁面再載入 HTTP 資源稱為 Mixed content，分為：
- Passive mixed content：無法直接攻擊使用者，但內容可能被竄改，如
img、audio、video。 - Active mixed content：危險度高，多數瀏覽器直接擋下，例如
script、link、iframe、XHR/Fetch。
scheme#
scheme:http
scheme:https依 Protocol 過濾，也支援 chrome-extension、data 等。
status-code#
status-code:302依 Response 的 Status code 過濾。
Cookie 系列#
set-cookie-domain、set-cookie-name、cookie-path、cookie-value 等屬性能精準篩選與 Cookie 有關的 Request：
set-cookie-domain:.google.com
-cookie-value:hello前者表示 Response 的 Set-Cookie Header 中 Domain 屬性為 .google.com；後者排除 Request 的 Cookie Header 值為 hello 的項目。
Hide data URLs#
切換是否顯示 data: URL，效果等同於 -scheme:data。
By time#
在 Overview 圖上拖拉可以選定時間區間，只保留起始時間落在此區間內的 Request。
搜尋（Search）#
Network 面板上方的放大鏡（或 Command+F）會打開左側搜尋面板，可輸入字串或 Regex pattern 進行搜尋。
Search 與 Filter 的差別：
- Filter 是主動條件，依類型、屬性等收斂列表。
- Search 則是被動關鍵字比對，會搜尋 Header key、Response body、URL 等內容。
點擊搜尋結果中的 Request，右側會自動開啟並切到關鍵字所在的分頁。但若關鍵字命中的是圖片內容，Response 分頁就無法顯示。
小結#
熟悉 Filter 與 Search 後，從幾百筆 Network log 中找到目標就只是幾秒鐘的事。下一章會進入 Network log 的細部分析。