網路功能參考資料

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

請參閱這份 Chrome 開發人員工具網路分析功能的完整參考資料，瞭解如何以新方式分析網頁載入情形。

記錄網路要求

根據預設，只要開發人員工具開啟，就會在「Network」面板中記錄所有網路要求。

「網路」面板。

停止記錄網路要求

如要停止錄音請求，請按照下列步驟操作：

  • 按一下「Network」面板上的「Stop recording network log」圖示 停止記錄網路。。變成灰色表示開發人員工具已不再記錄要求。
  • 在「Network」面板獲得焦點時，按下 Command 鍵 + E 鍵 (Mac) 或 Ctrl 鍵 + E 鍵 (Windows、Linux)。

清除要求

按一下「Network」面板上的「Clear」圖示 。，即可清除「Requests」表格中的所有要求。

「清除」按鈕。

在各網頁載入時儲存要求

如要儲存各個網頁載入的要求，請勾選「Network」面板中的「Preserve log」核取方塊。開發人員工具會儲存所有要求，直到您停用「Preserve log」為止。

在網頁載入期間擷取螢幕截圖

擷取螢幕畫面，分析使用者在等待網頁載入時看到的內容。

如要啟用螢幕截圖功能，請在「Network」面板中開啟「Settings」。，然後勾選「Capture screenshots」。

將焦點放在「Network」面板上，然後重新載入網頁，即可擷取螢幕截圖。

擷取螢幕截圖後，您可以透過下列方式與螢幕截圖互動：

  • 將滑鼠游標懸停在螢幕截圖上，即可查看該螢幕截圖的擷取時間點。「總覽」時間軸上會顯示黃色線條。
  • 按一下螢幕截圖的縮圖，即可篩除螢幕截圖擷取後發生的所有要求。
  • 按兩下縮圖即可放大圖片。

已啟用螢幕截圖功能。

重播 XHR 要求

如要重播 XHR 要求，請在「Requests」表格中執行下列任一操作：

  • 選取要求，然後按 R 鍵。
  • 在要求上按一下滑鼠右鍵，然後選取「Replay XHR」。

選取「Replay XHR」。

變更載入行為

停用瀏覽器快取，模擬新訪客

如要模擬首次造訪的使用者如何體驗網站，請勾選「停用快取」核取方塊。開發人員工具會停用瀏覽器快取。這可更準確地模擬初次使用者的體驗，因為重複造訪時，要求會從瀏覽器快取中提供。

「停用快取」核取方塊。

在「網路條件」工具列中停用瀏覽器快取

如果您想在其他 DevTools 面板中停用快取，請使用「網路狀態」抽屜。

  1. 按一下 網路狀況。 圖示，開啟「網路狀況」導覽匣。
  2. 勾選或取消勾選「停用快取」核取方塊。

手動清除瀏覽器快取

如要隨時手動清除瀏覽器快取，請在「請求」表格中任一處按一下滑鼠右鍵，然後選取「清除瀏覽器快取」。

選取「清除瀏覽器快取」。

模擬離線

有一種新的網頁應用程式類別，稱為「漸進式網頁應用程式」，可在服務工作者的協助下離線運作。在建構這類應用程式時，能夠快速模擬沒有資料連線的裝置會很有幫助。

如要模擬完全離線的網路體驗，請在「Disable cache」核取方塊旁的「Network throttling」下拉式選單中，選取「Offline」。

從下拉式選單中選取「離線」。

開發人員工具會在「網路」分頁旁顯示警告圖示，提醒您已啟用離線功能。

模擬網路連線速度緩慢

如要模擬快速 4G、慢速 4G 或 3G，請在頂端動作列的「Throttling」下拉式選單中，選取相應的預設值。

網路節流下拉式選單，其中包含預設值。

開發人員工具會在「Network」面板旁邊顯示警告圖示，提醒您已啟用節流功能。

建立自訂節流設定檔

除了預設值 (例如 4G 速度慢或快) 之外，您也可以新增自己的自訂節流設定檔：

  1. 開啟「Throttling」(頻寬限制) 選單，然後依序選取「Custom」(自訂) >「Add...」(新增...)。
  2. 依照「設定」設定 >「節流」所述，設定新的節流設定檔。

  3. 回到「Network」面板，從「Throttling」下拉式選單中選取新的設定檔。

    從節流選單中選取的自訂設定檔。「Network」面板會顯示警告圖示。

開發人員工具會在「Network」面板旁顯示 警告。 警告圖示，提醒您已啟用節流功能。

調節 WebSocket 連線

除了 HTTP 要求之外，自第 99 版起，DevTools 也會節流 WebSocket 連線。

如要觀察 WebSocket 節流，請按照下列步驟操作：

  1. 例如使用測試工具發起新連線。
  2. 在「Network」面板中，選取「No throttling」，然後透過連線傳送訊息。
  3. 建立非常緩慢的自訂節流設定檔，例如 10 kbit/s。這種緩慢的設定檔有助於您察覺差異。
  4. 在「Network」面板中選取設定檔，然後傳送另一則訊息。
  5. 切換 WS 篩選器、按一下連線名稱、開啟「Messages」分頁，然後檢查在有/無節流的情況下，傳送和回音訊息之間的時間差異。例如：

傳送和回應訊息，且有/沒有節流。

透過「網路狀況」工具列模擬網路連線速度緩慢的情況

如果您想在使用其他 DevTools 面板時限制網路連線，請使用「Network conditions」抽屜。

  1. 按一下 網路狀況。 圖示，開啟「網路狀況」導覽匣。
  2. 在「Network throttling」選單中選取連線速度。

手動清除瀏覽器 Cookie

如要隨時手動清除瀏覽器 Cookie，請在「要求」表格中按一下任一處，然後選取「清除瀏覽器 Cookie」。

選取「清除瀏覽器 Cookie」。

覆寫 HTTP 回應標頭

請參閱「在本機覆寫檔案和 HTTP 回應標頭」。

覆寫使用者代理程式

如要手動覆寫使用者代理程式，請按照下列步驟操作：

  1. 按一下 網路狀況。 圖示，開啟「網路狀況」導覽匣。
  2. 取消勾選「自動選取」。
  3. 從選單中選擇使用者代理程式選項，或在方塊中輸入自訂使用者代理程式。

如要搜尋要求標頭、酬載和回應，請按照下列步驟操作：

  1. 按下以下捷徑，即可開啟右側的「搜尋」分頁：

    • 在 macOS 中，按下 Command + F 鍵。
    • 在 Windows 或 Linux 上，按下 Control + F 鍵。

  2. 在「搜尋」分頁中輸入查詢字詞，然後按下 Enter 鍵。您可以視需要點選「match_case」或「regular_expression」，分別開啟大小寫區分或規則運算式。

  3. 按一下任一搜尋結果。「Network」面板會以黃色標示相符的請求。此外，面板也會開啟「Headers」或「Response」分頁標籤，並醒目顯示相符的字串 (如果有的話)。

「Network」面板右側的「Search」分頁。

如要重新整理搜尋結果，請按一下「重新整理」。如要清除結果，請依序點選「封鎖」「清除」。

如要進一步瞭解在開發人員工具中搜尋的所有方式，請參閱「搜尋：在所有載入的資源中尋找文字」。

篩選要求

依屬性篩選要求

使用「Filter」方塊，依屬性篩選要求，例如要求的網域或大小。

如果找不到這個方塊，表示「篩選器」列可能處於隱藏狀態。請參閱「隱藏『篩選器』列」一文。

「Filters」文字方塊和「Invert」核取方塊。

如要反轉篩選器，請勾選「Filter」框旁的「Invert」核取方塊。

您可以同時使用多個資源，只要將每個資源以空格分隔即可。舉例來說，mime-type:image/gif larger-than:1K 會顯示所有大於 1 KB 的 GIF。這些多房源篩選條件等同於 AND 運算子。不支援 OR 運算。

以下是支援的完整屬性清單。

  • cookie-domain：顯示設定特定 Cookie 網域的資源。
  • cookie-name：顯示設定特定 Cookie 名稱的資源。
  • cookie-path：顯示設定特定 Cookie 路徑的資源。
  • cookie-value：顯示設定特定