概覽

無論是在開發簡單的網站，檢查一個 Request 是否成功發送並收到預期的 Response，還是從 Network log 的時間線來分析網站效能問題，每次打開 Network log 列表時，總會有一個明確的目標，此時用肉眼從所有 Network log 中尋找特定的幾條就非常沒有效率，尤其網頁較為複雜又有一堆廣告、追蹤碼參雜時，完全是大海撈針。

本篇文章將會說明如何利用 Network 面板的 Filter、Search 功能快速的從 Network log 海中萃取出想要分析的目標。

過濾（Filter）

Filter 的目的較為清晰，用來留下或排除特定的 Request，以下是所有能在 Filter 填入的規則類別。

By name

最簡單的方式是直接輸入字串或 Regex pattern 來留下比對到的 Request name，例如 Domain、檔案路徑、檔名、副檔名，也可以在字串前面加一個減號來排除 Request。

然而直接輸入 pattern 的過濾方式僅限於 Request 的 URL name，通常會搭配其他 Filter 來做到更進階的過濾。

By type

在 Filter 輸入框右側列出了許多 Request 類型，點擊其中一個就會排除掉其他類型的 Request，也可以按住 Command 來同時選擇多種類型。

注意選擇 CSS 類並不等於在 Filter 內輸入 .css，Request 的檔案類型是由 Network 面板判定，例如某 CSS 檔是來自 XHR/Fetch 的話，就不會顯示在 CSS 類別裡。

同理選擇 Font 類別就不會是 .font 結尾，而是 .woff2、.ttf 等等，WS (WebSocket) 類別則會看到 wss:// 開頭的 Request。

By properties

以屬性（Property）過濾是最強大的方式，Network 面板支援的 Property filter 有非常多種，最特別的是輸入 Property 時會跳出下拉選單，列出該 Propert 在目前的 Request 中能使用的值。

輸入冒號來觸發下拉選單

以下為所有可用的 Property，在前方加入減號一樣可以變為排除 Request：

domain

domain:*.com -domain:google.com

比起直接在 Filter 輸入網域名，可以用 wildcard 字元 * 做到更彈性的過濾，例如用 *.com 顯示所有 .com 結尾的 Request domain，加入減號來排除 Domain 出現 google.com 的 Request。

輸入 domain: 時就能看到目前的 Request 記錄中大概包含哪些 Domain

has-response-header

has-response-header:Content-Type

以 Reponse 的 Header 來過濾 Request。

is

• is:running – WebSocket Request
• is:from-cache – 來自快取的 Response，包括 ServiceWorker、Memory cache、Disk cache，在 Network log 的 Size 欄位會顯示實際傳輸的網路流量，如果是來自 Cache 也會顯示對應的類型，Memory cache 相對 Disk cahce 效能更好，不過關閉瀏覽器後會被清除。
• is:service-worker-initiated – 從 ServiceWorker 發出的 Request
• is:service-worker-intercepted – 被 ServiceWorker 攔截的 Request。在 ServiceWorker 中可以用 JavaScript 實作不同的快取機制，例如將重要的檔案建立快取，每次都先以快取回應並在背景更新資源，下次請求才能取得新版本。

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request);
  );
});

在 ServiceWorker 中攔截 Fetch 事件

larger-than

larger-than:520、larger-than:8k

單位為 bytes，顯示網路實際傳輸量大於該數字的 Request，因此不會顯示被 Cache 的資源。

method

method:GET

以 GET、POST 等 Method 過濾請求。

mime-type

mime-type:image/jpeg

過濾 Response 的 Content-Type Header，如 text/html、image/jpeg 等等。

mixed-content

mixed-content:all、mixed-content:displayed

以 HTTPS 載入 HTML 後，後續載入其他 HTTP 資源就稱為 Mixed content，其又分為兩種：

• Passive mixed content – 無法主動攻擊被影響的使用者，但內容可能被修改，如 img、audio、video。
• Active mixed content – 在大部分的瀏覽器中會直接被阻擋，能做到在瀏覽器中執行任意 JavaScript 這種危險的攻擊，如 script、link、iframe、XHR/Fetch。

當網站載入 Passive mixed content 但還是顯示出來時就會出現警告，看看更多關於 Mixed content 的資訊。

scheme

scheme:http、scheme:https

以 Protocol 過濾 Request，其他如 chrome-extension、data 等等都可以使用。

status-code

status-code:302

以 Response 的 Status code 來過濾。

Cookie 系列

set-cookie-domain、set-cookie-name、cookie-path、cookie-value

由於 Cookie header 可能有很多個組，很難直接用肉眼搜尋，善用 Cookie 系列 Property 就能快速過濾 Request，例如：

• set-cookie-domain:.google.com – 當 Response 的 Set-Cookie Header 的 Domain 屬性是 .google.com。
• -cookie-value:hello – 當 Request 的 Cookie Header 值不是 hello。

Hide data URLs

可以開關，效果同 -scheme:data。

By time

在 Overview 圖上可以用拖拉來 Filter 特定的時間區間，只留下起始時間在範圍內的 Request。

Search

Network 面板上方有一個放大鏡圖示，點擊圖示或是按 Command+F 都會開啟左側的搜尋面板，可以在 Search 輸入 Regex pattern 或字串來搜尋 Request。

相較 Filter 為主動利用 Type、Property 等等來過濾 Request，Search 則較為被動的用關鍵字從 Header key、Response body、URL 來進行比對。

點擊找到的 Request，該 Request 會顯示在右方，並切換到關鍵字所在的分頁。但有時候會有比對到圖片內容等等情況，此時在 Response 分頁就無法顯示。

小結

熟悉了 Filter 和 Search 的用法，下一篇文章就要開始進行 Network log 的分析。