網路功能參考資料

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

這份 Chrome 開發人員工具網路分析功能完整參考資料，將說明如何以全新方式分析網頁載入情形。

記錄網路要求

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

「網路」面板。

停止記錄網路要求

如要停止錄製要求：

  • 按一下「網路」面板上的「停止記錄網路記錄」 停止錄製電視網。 。按鈕會變成灰色，表示開發人員工具不再記錄要求。
  • 在「網路」面板處於焦點時，按下 Command + E 鍵 (Mac) 或 Control + E 鍵 (Windows、Linux)。

清除要求

按一下「網路」面板上的「清除」。，即可清除「要求」表格中的所有要求。

「清除」按鈕。

在網頁載入時儲存要求

如要儲存網頁載入時的要求，請勾選「網路」面板中的「保留記錄」核取方塊。開發人員工具會儲存所有要求，直到您停用「保留記錄」為止。

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

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

如要啟用螢幕截圖功能，請開啟「網路」面板中的「設定」。，然後勾選「擷取螢幕截圖」。

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

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

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

已啟用螢幕截圖功能。

重新提出 XHR 要求

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

  • 選取要求，然後按 R 鍵。
  • 在要求上按一下滑鼠右鍵，然後選取「Replay XHR」(重新傳送 XHR)。

選取「重新提出 XHR 要求」。

變更載入行為

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

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

「停用快取」核取方塊。

從「網路狀況」抽屜停用瀏覽器快取

如要在其他 DevTools 面板中停用快取，請使用「Network conditions」抽屜。

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

手動清除瀏覽器快取

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

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

模擬離線狀態

有一種新的網頁應用程式稱為漸進式網頁應用程式，可透過 Service Worker 離線運作。建構這類應用程式時，快速模擬沒有數據連線的裝置會很有幫助。

如要模擬完全離線的網路體驗，請在「停用快取」核取方塊旁的「網路節流」下拉式選單中選取「離線」。

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

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

模擬網路連線速度緩慢

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

內建預設值的網路節流下拉式選單。

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

建立自訂節流設定檔

除了慢速或快速 4G 等預設設定外，您也可以新增自訂節流設定檔：

  1. 開啟「節流」選單，然後依序選取「自訂」 >「新增...」。
  2. 如 設定 >「節流」所述，設定新的節流設定檔。

  3. 返回「網路」面板，然後從「節流」下拉式選單中選取新設定檔。

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

DevTools 會在「Network」面板旁顯示 警告。 警告圖示，提醒您已啟用節流功能。

調節 WebSocket 連線

除了 HTTP 要求，自 99 版起，開發人員工具也會限制 WebSocket 連線。

如要觀察 WebSocket 節流：

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

傳送及回傳訊息，並測試是否受到節流影響。

從「網路狀態」抽屜模擬網路連線緩慢的情況

如要在其他開發人員工具面板中工作時節流網路連線，請使用「網路狀況」抽屜。

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

手動清除瀏覽器 Cookie

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

選取「清除瀏覽器 Cookie」。

覆寫 HTTP 回應標頭

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

覆寫使用者代理程式

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

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

如要搜尋要求標頭、酬載和回應：

  1. 按下下列快速鍵，開啟右側的「搜尋」分頁：

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

  2. 在「搜尋」分頁中輸入查詢內容，然後按下 Enter 鍵。視需要按一下「match_case」或「regular_expression」，開啟大小寫區分或規則運算式。

  3. 按一下其中一個搜尋結果。「網路」面板會以黃色醒目顯示相符的要求。此外，面板也會開啟「Headers」或「Response」分頁，並醒目顯示相符的字串 (如有)。

「網路」面板右側的「搜尋」分頁。

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

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

篩選要求

依屬性篩選要求

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

如果沒有看到方塊，可能是因為「篩選器」列處於隱藏狀態。請參閱「隱藏篩選器列」。

「篩選器」文字方塊和「反轉」核取方塊。

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

如要同時使用多個屬性，請以半形空格分隔每個屬性。舉例來說，mime-type:image/gif larger-than:1K 會顯示所有大於 1 KB 的 GIF。這些多屬性篩選條件等同於 AND 運算。系統不支援 OR 運算。

以下列出所有支援的屬性。

  • cookie-domain. 顯示設定特定 Cookie 網域的資源。
  • cookie-name。顯示設定特定Cookie 名稱的資源。
  • cookie-path。顯示設定特定 Cookie 路徑的資源。
  • cookie-value：顯示設定特定Cookie 值的資源。
  • domain。只顯示指定網域的資源。您可以使用萬用字元 (*) 納入多個網域。舉例來說，*.com 會顯示所有以 .com 結尾的網域名稱資源。開發人員工具會填入自動完成下拉式選單，顯示遇到的所有網域。
  • has-overrides。顯示已覆寫 content、headers、任何覆寫 (yes) 或沒有覆寫 (no) 的要求。您可以將對應的「有覆寫」資料欄新增至要求表格。
  • has-response-header：顯示含有指定 HTTP 回應標頭的資源。開發人員工具會將遇到的所有回應標頭填入自動完成下拉式選單。
  • is。使用 is:running 尋找 WebSocket 資源。
  • larger-than。顯示大於指定大小的資源 (以位元組為單位)。設定 1000 的值等同於設定 1k 的值。
  • method：顯示透過指定 HTTP 方法類型擷取的資源。開發人員工具會將遇到的所有 HTTP 方法填入自動完成下拉式選單。
  • mime-type。顯示指定 MIME 類型的資源。開發人員工具會將所有遇到的 MIME 類型填入自動完成下拉式選單。
  • mixed-content。顯示所有混合內容資源 (mixed-content:all) 或僅顯示的資源 (mixed-content:displayed)。
  • priority。顯示優先順序符合指定值的資源。
  • resource-type。顯示資源類型 (例如圖片) 的資源。開發人員工具會將遇到的所有資源類型填入自動完成下拉式選單。
  • response-header-set-cookie。在「問題」分頁中顯示原始的 Set-Cookie 標頭。系統會在「網路」面板中標示格式錯誤的 Cookie，以及含有錯誤 Set-Cookie 標頭的 Cookie。
  • scheme。顯示透過未受保護的 HTTP (scheme:http) 或受保護的 HTTPS (scheme:https) 擷取的資源。
  • set-cookie-domain。顯示具有 Set-Cookie 標頭和 Domain 屬性的資源，且該屬性符合指定值。開發人員工具會自動填入所有遇到的 Cookie 網域。
  • set-cookie-name. 顯示具有 Set-Cookie 標頭的資源，且標頭名稱符合指定值。開發人員工具會自動填入所有遇到的 Cookie 名稱。
  • set-cookie-value。顯示具有 Set-Cookie 標頭的資源，且標頭值與指定值相符。開發人員工具會將遇到的所有 Cookie 值填入自動完成功能。
  • status-code：只顯示 HTTP 狀態碼與指定代碼相符的資源。開發人員工具會將遇到的所有狀態碼填入自動完成下拉式選單。
  • url。顯示 url 與指定值相符的資源。

依類型篩選要求

如要依資源類型篩選要求，請按一下「網路」面板上的「全部」、「擷取/XHR」、「JS」、「CSS」、「Img」、「媒體」、「字型」、「文件」、「WS」(WebSocket)、「Wasm」(WebAssembly)、「資訊清單」或「其他」(未列在此處的任何其他類型) 按鈕。

如果看不到這些按鈕，可能是因為「篩選器」動作列處於隱藏狀態。請參閱隱藏「篩選器」列。

如要同時顯示多種資源，請按住 Command 鍵 (Mac) 或 Control 鍵 (Windows、Linux)，然後點按多個類型篩選器。

使用類型篩選器顯示 CSS 和文件資源。

依時間篩選要求

在「總覽」時間軸上向左或向右拖曳，即可只顯示該時間範圍內處於活動狀態的要求。篩選條件包含在內。系統會顯示在醒目顯示時間內處於活動狀態的任何要求。

篩除 21 到 25 毫秒左右未處於活動狀態的任何要求。

隱藏資料網址

資料網址是嵌入其他文件的小型檔案。「要求」表格中以 data: 開頭的任何要求都是資料網址。

如要隱藏這些要求，請在「篩選器」動作列中，依序選取「更多篩選器」 > 「隱藏資料網址」。

從「要求」表格隱藏資料網址。

底部的狀態列會顯示已顯示的要求數量 (以總數為準)。

隱藏擴充功能網址

如要專注於您編寫的程式碼，可以篩除 Chrome 中安裝的擴充功能傳送的不相關要求。擴充功能要求的網址開頭為 chrome-extension://。

如要隱藏擴充功能要求，請在「篩選器」動作列中，依序選取「更多篩選器」 > 「隱藏擴充功能網址」。

從「要求」表格中隱藏擴充功能網址。

底部的狀態列會顯示已顯示的要求數量 (以總數為準)。

僅顯示已封鎖回應 Cookie 的要求

如要篩除所有項目，只保留因任何原因而遭封鎖回應 Cookie 的要求，請在「篩選器」動作列中，依序選取「更多篩選器」 >「check_box」「已封鎖回應 Cookie」。

「要求」表格只會顯示回應 Cookie 遭封鎖的要求。

底部的狀態列會顯示已顯示的要求數量 (以總數為準)。

如要瞭解回覆 Cookie 遭到封鎖的原因，請選取要求，開啟「Cookies」分頁，然後將游標懸停在「資訊」資訊圖示上。

此外，如果系統因 Chrome 旗標或設定而封鎖 Cookie，「網路」面板會在要求旁邊顯示圖示。將滑鼠游標懸停在圖示上，即可查看含有提示的工具提示，然後按一下該圖示前往「問題」面板，瞭解更多資訊。

Chrome 旗標或設定封鎖要求時，要求旁邊會顯示警告圖示。

僅顯示已封鎖的要求

如要篩除遭封鎖要求以外的所有項目，請在「篩選器」動作列中，依序選取「更多篩選器」 > 「遭封鎖要求」。如要測試這項功能，可以使用抽屜中的「網路要求封鎖」分頁。

「要求」表格只會顯示遭封鎖的要求。

「要求」表格會以紅色醒目顯示遭封鎖的要求。底部的狀態列會顯示已顯示的要求數量 (以總數為準)。

僅顯示第三方要求

如要篩除所有要求，只保留來源與網頁來源不同的要求，請在「篩選器」動作列中，依序選取「更多篩選器」 >「check_box」「第三方要求」。

「要求」表格只會顯示第三方要求。

底部的狀態列會顯示已顯示的要求數量 (以總數為準)。

排序要求

根據預設，「要求」表格中的要求會依啟動時間排序，但您可以使用其他條件排序表格。

依資料欄排序

按一下「要求」表格中任一欄的標題，即可依該欄排序要求。

依活動階段排序

如要變更「瀑布圖」排序要求的方式，請在「要求」表格的標題上按一下滑鼠右鍵，將游標懸停在「瀑布圖」上，然後選取下列其中一個選項：

  • 開始時間。最上方會顯示第一個發出的要求。
  • 回覆時間。最上方會顯示第一個開始下載的要求。
  • 結束時間。最先完成的請求會顯示在最上方。
  • 總時間。連線設定和要求 / 回應時間最短的要求會顯示在最上方。
  • 延遲時間。等待回應時間最短的要求會顯示在最上方。

這些說明假設各選項是依長度排序，從最短到最長。按一下「瀑布圖」資料欄的標題，即可反轉順序。

在本範例中，「瀑布圖」會依總時間長度排序。每個長條圖中顏色較淺的部分，代表等待時間。深色部分代表下載位元組所花費的時間。

依總時間長度排序瀑布圖。

分析要求

只要開啟開發人員工具，系統就會在「網路」面板中記錄所有要求。使用「網路」面板分析要求。

查看要求記錄

使用「要求」表格，查看開發人員工具開啟時提出的所有要求記錄。點選或將滑鼠游標懸停在要求上，即可查看要求詳細資訊。

「要求」表格。

「要求」表格預設會顯示下列資料欄：

  • 名稱。資源的檔案名稱或 ID。

  • 狀態。這個欄位可顯示下列值：

    「狀態」欄中的不同值。

    • HTTP 狀態碼，例如 200 或 404。
    • CORS error，因為跨源資源共享 (CORS) 導致要求失敗。
    • (blocked:origin)，表示要求標頭設定有誤。將滑鼠游標懸停在這個狀態值上，即可查看工具提示，瞭解發生錯誤的原因。
    • (failed)，後面接著錯誤訊息。

  • 類型。所要求資源的 MIME 類型。

  • 發起人。下列物件或程序可以發出要求：

    • 剖析器。Chrome 的 HTML 剖析器。
    • 重新導向。HTTP 重新導向。
    • 指令碼。JavaScript 函式。
    • 其他。其他程序或動作，例如使用連結前往某個頁面，或在網址列中輸入網址。

  • Size - 伺服器傳送的回應標頭和回應主體總大小。

  • Time - 從要求開始到收到回應中的最後一個位元組，這段時間的總長度。

  • 刊登序列。以視覺化方式呈現每項要求的活動細目。

新增或移除欄

在「要求」表格的標題上按一下滑鼠右鍵，然後選取選項來隱藏或顯示。顯示的選項旁邊會顯示勾號。

在「要求」表格中新增或移除欄。

您可以新增或移除下列額外資料欄：「路徑」、「網址」、「方法」、「通訊協定」、「架構」、「網域」、「遠端位址」、「遠端位址空間」、「啟動器位址空間」、「Cookie」、「設定 Cookie」、「優先順序」、「連線 ID」、「有覆寫」和「瀑布流」。

新增自訂欄

如要在「要求」表格中新增自訂欄，請按照下列步驟操作：

  1. 在「要求」表格的標題上按一下滑鼠右鍵，然後依序選取「回應標頭」 >「管理標頭欄」。
  2. 在對話方塊中，按一下「新增自訂標頭」，輸入名稱，然後按一下「新增」。

在「要求」表格中新增自訂欄。

依內嵌頁框將要求分組

如果網頁上的內嵌框架發出大量要求，您可以將要求分組，讓要求記錄更易於解讀。

如要依 iframe 將要求分組，請開啟「網路」面板中的「設定」圖示 。，然後勾選「依頁框分組」。

網路要求記錄，要求依 iframe 分組。

如要查看由內嵌框架發起的請求，請在請求記錄中展開該請求。

查看要求之間的相對時間

使用「瀑布圖」，查看要求之間的相對時間。根據預設，「瀑布圖」會依要求開始時間排序。因此，越靠左的要求開始時間越早，越靠右的要求開始時間越晚。

請參閱「依活動階段排序」，瞭解排序「瀑布圖」的各種方式。

「要求」分頁的「刊登序列」欄。

分析 WebSocket 連線的訊息

如要查看 WebSocket 連線的訊息，請按照下列步驟操作：

  1. 在「Requests」(要求) 表格的「Name」(名稱) 欄下方，按一下 WebSocket 連線的網址。
  2. 按一下「訊息」分頁標籤。表格會顯示最近 100 則訊息。

如要重新整理表格，請再次按一下「Requests」(要求) 表格「Name」(名稱) 欄下方的 WebSocket 連線名稱。

「訊息」分頁。

這份表格分為三欄：

  • 資料。訊息酬載。如果訊息是純文字，就會顯示在這裡。如果是二進位運算碼，這個資料欄會顯示運算碼的名稱和程式碼。系統支援下列作業碼： 後續影格、二進位影格、連線關閉影格、Ping 影格和 Pong 影格。
  • 長度。郵件酬載的長度 (以位元組為單位)。
  • Time - 接收或傳送郵件的時間。

訊息會依類型以不同顏色標示：

  • 外寄訊息會以淺綠色顯示。
  • 收到的簡訊會顯示為白色。
  • WebSocket Opcode 為淺黃色。
  • 錯誤會以淺紅色標示。

分析串流中的事件

如要查看伺服器透過 Fetch API、EventSource API 和 XHR 串流的事件，請按照下列步驟操作：

  1. 在串流事件的網頁上記錄網路要求。
  2. 在「Network」中選取要求，然後開啟「EventStream」分頁。

「EventStream」分頁標籤。

如要篩選事件，請在「EventStream」EventStream分頁頂端的篩選器列中指定規則運算式。

如要清除擷取的事件清單，請依序點選「封鎖」「清除」。

預覽回應主體

如要預覽回應主體，請按照下列步驟操作：

  1. 在「Requests」(要求) 表格的「Name」(名稱) 欄下方，按一下要求的網址。
  2. 按一下「預覽」分頁標籤。

這個分頁主要用於查看圖片。

「預覽」分頁標籤。

查看回應主體

如要查看要求的回應主體，請按照下列步驟操作：

  1. 在「Requests」(要求) 表格的「Name」(名稱) 欄下方，按一下要求的網址。
  2. 按一下「回應」分頁標籤。

「回覆」分頁。

查看 HTTP 標頭

如要查看要求的 HTTP 標頭資料，請按照下列步驟操作：

  1. 按一下「要求」表格中的要求。
  2. 開啟「標頭」分頁，然後向下捲動至「一般」、「回應標頭」、「要求標頭」和「早期提示標頭」部分 (視需要)。

從「要求」表格中選取的要求的「標頭」分頁。

在「一般」部分中，開發人員工具會在收到的 HTTP 狀態碼旁顯示易於解讀的狀態訊息。

在「回應標頭」部分，您可以將游標懸停在標頭值上，然後按一下「編輯」按鈕，在本機覆寫回應標頭。

查看 HTTP 標頭來源

根據預設，「標頭」分頁會依字母順序顯示標頭名稱。如要依接收順序查看 HTTP 標頭名稱，請按照下列步驟操作：

  1. 開啟所需要求的「Headers」分頁。請參閱「查看 HTTP 標頭」。
  2. 按一下「Request Header」或「Response Header」部分旁邊的「view source」。

暫時性標頭警告

有時「標頭」分頁會顯示 Provisional headers are shown... 警告訊息。可能原因如下：

  • 要求不是透過網路傳送，而是由不會儲存原始要求標頭的本機快取提供。在這種情況下，您可以停用快取，查看完整的要求標頭。 佈建標頭警告訊息。

  • 網路資源無效。例如，在 Console 中執行 fetch("https://jec.fish.com/unknown-url/")。 佈建標頭警告訊息。

基於安全考量，開發人員工具也可能只顯示佈建標頭。

查看要求酬載

如要查看要求酬載 (即查詢字串參數和表單資料)，請從「要求」表格選取要求，然後開啟「酬載」分頁。

「Payload」(酬載) 分頁。

查看酬載來源

根據預設，開發人員工具會以人類可讀的形式顯示酬載。

如要查看查詢字串參數和表單資料的來源，請在「酬載」分頁標籤上，點選「查詢字串參數」或「表單資料」部分旁的「查看來源」。

「查看來源」按鈕。

查看查詢字串參數的已解碼網址引數

如要切換引數的網址編碼，請在「Payload」分頁中，按一下「view decoded」或「view URL-encoded」。

切換網址編碼。

查看 Cookie

如要查看要求 HTTP 標頭中傳送的 Cookie，請按照下列步驟操作：

  1. 在「Requests」(要求) 表格的「Name」(名稱) 欄下方，按一下要求的網址。
  2. 按一下「Cookie」分頁標籤。

「Cookie」分頁。

如需各欄的說明，請參閱「欄位」。

如要修改 Cookie，請參閱「查看、編輯及刪除 Cookie」。

查看要求的時間細目

如要查看要求的時間細目，請按照下列步驟操作：

  1. 在「Requests」(要求) 表格的「Name」(名稱) 欄下方，按一下要求的網址。
  2. 按一下「時間」分頁標籤。

如要快速存取這項資料，請參閱「預覽時間細目」。

「時間點」分頁。

如要進一步瞭解「時間」分頁中可能顯示的各個階段，請參閱「時間細目階段說明」。

預覽時間細目

如要預覽要求的時間細目，請將滑鼠游標懸停在「要求」表格的「瀑布圖」資料欄中，該要求的項目上。

如要存取這項資料，但不想使用滑鼠懸停功能，請參閱「查看要求的時間細目」。

預覽要求的時間細目。

時間細分階段說明

以下是「時間」分頁中可能顯示的各個階段：

  • 排隊：瀏覽器會在連線開始前，以及下列情況將要求排入佇列：
    • 有優先順序較高的要求。要求優先順序取決於資源類型和在文件中的位置等因素。詳情請參閱 fetchpriority 指南的資源優先順序一節。
    • 這個來源已開啟六個 TCP 連線，達到上限。(僅適用於 HTTP/1.0 和 HTTP/1.1)。
    • 瀏覽器正在磁碟快取中分配空間。
  • 已停止。連線開始後，要求可能會因「佇列」一節所述的任何原因而停滯。
  • DNS 查詢。瀏覽器正在解析要求的 IP 位址。
  • 初始連線。瀏覽器正在建立連線，包括 TCP 交握或重試，以及協商 SSL。
  • Proxy 協商：瀏覽器正在與Proxy 伺服器協商要求。
  • 要求已傳送。系統正在傳送要求。
  • 準備 ServiceWorker。瀏覽器正在啟動 Service Worker。
  • 要求 ServiceWorker。要求正在傳送給服務工作人員。
  • 等待 (TTFB)。瀏覽器正在等待回應的第一個位元組。TTFB 是「Time To First Byte」的縮寫，這段時間包括 1 次往返延遲，以及伺服器準備回應所花的時間。
  • 下載內容。瀏覽器會直接從網路或服務工作人員接收回應。這個值是讀取回應主體所花費的總時間。如果值大於預期，可能表示網路速度緩慢，或是瀏覽器忙於執行其他工作，導致延遲讀取回應。

查看發起者和依附元件

如要查看要求的發起者和依附元件，請按住 Shift 鍵，然後將滑鼠游標懸停在「要求」表格中的要求上。開發人員工具會以綠色標示啟動器，紅色標示依附元件。

查看要求的發起者和依附元件。

依時間順序排列「要求」表格時，您將游標懸停在某個要求上方，該要求上方第一個綠色要求就是依附元件的發起者。如果上方還有其他綠色要求，則該較高的要求是發起者的發起者。而其他人員也會有資料管理的需求。

查看載入事件

開發人員工具會在「網路」面板的多個位置顯示 DOMContentLoaded 和 load 事件的時間。DOMContentLoaded 事件為藍色，load 事件為紅色。

「網路」面板上的 DOMContentLoaded 和載入事件位置。

查看要求總數

「網路」面板底部的狀態列會列出要求總數。

開發人員工具開啟後的要求總數。

查看轉移及載入的資源總大小

在「Network」面板底部的狀態列中，開發人員工具會列出已傳輸及載入 (未壓縮) 的資源總大小。

已轉移及載入的資源總大小。

請參閱「查看資源的未壓縮大小」，瞭解瀏覽器解壓縮資源後的大小。

查看導致要求發生的堆疊追蹤

如果 JavaScript 陳述式導致系統要求資源，請將滑鼠游標懸停在「發起者」欄上，查看促成該要求的堆疊追蹤記錄。

導致資源要求的堆疊追蹤。

查看資源的未壓縮大小

依序檢查「設定」。「大型要求資料列」，然後查看「大小」欄的底部值。

未壓縮資源的範例。

在本例中，透過網路傳送的 www.google.com 文件壓縮大小為 43.8 KB，未壓縮大小則為 136 KB。

匯出要求資料

您可以透過下列幾種方式，匯出或複製已套用篩選器的要求清單。

將所有網路要求儲存至 HAR 檔案

HAR (HTTP 封存) 是多項 HTTP 工作階段工具用於匯出擷取資料的檔案格式。這種格式是 JSON 物件，且具有一組特定欄位。

為減少機密資訊意外洩漏的機率，預設情況下，您可以匯出「已清除」的 HAR 格式網路記錄，其中不含 Cookie、Set-Cookie 和 Authorization 標頭等機密資訊。如有需要，您也可以匯出含有機密資料的記錄。

如要將所有網路要求儲存至 HAR 檔案，請選擇下列其中一種方式：

  • 在「要求」表格中的任一要求上按一下滑鼠右鍵，然後依序選取「複製」 >「以 HAR 格式儲存所有 [列出的] 內容 (已清除)」或「以 HAR 格式儲存所有 [列出的] 內容 (含機密資料)」。

    選取「Save all listed as HAR (sanitized)」。

  • 在「Network」面板頂端的動作列中，依序點按「download」和「Export HAR (sanitized)...」(匯出 HAR (已清除)...)。

    如要匯出含有機密資料的 HAR 檔案，請先開啟 設定 >「偏好設定」 >「網路」 > 勾選「允許產生含有機密資料的 HAR 檔案」，然後點按「匯出」按鈕，並從下拉式選單中選取「匯出 HAR 檔案 (含有機密資料)」。

    頂端動作列中的「匯出 HAR」按鈕，並啟用兩個匯出選項。

取得 HAR 檔案後，您可以透過兩種方式將檔案匯回開發人員工具進行分析：

  • 將 HAR 檔案拖曳至「要求」表格。
  • 按一下「Network」面板頂端動作列中的「上傳」匯入 HAR。

將要求、經過篩選的要求集或所有要求複製到剪貼簿

在「要求」表格的「名稱」欄下方，在要求上按一下滑鼠右鍵，將游標懸停在「複製」上，然後選取下列其中一個選項。

如要複製單一要求、回應或堆疊追蹤：

  • 複製網址。將要求的網址複製到剪貼簿。
  • 複製為 cURL。將要求複製為 cURL 指令。
  • 複製為 PowerShell。將要求複製為 PowerShell 指令。
  • 複製為 Fetch 格式。將要求複製為擷取呼叫。
  • 複製為擷取 (Node.js)。將要求複製為 Node.js 擷取呼叫。
  • 複製回覆。將回應主體複製到剪貼簿。
  • 複製堆疊追蹤。將要求的堆疊追蹤複製到剪貼簿。

如要複製所有要求：

  • 複製所有網址：將所有要求的網址複製到剪貼簿。
  • 以 cURL 格式複製全部內容。將所有要求複製為一連串的 cURL 指令。
  • 全部複製為 PowerShell。將所有要求複製為一連串的 PowerShell 指令。
  • 全部複製為擷取。將所有要求複製為一連串的擷取呼叫。
  • 以擷取格式複製全部內容 (Node.js)。將所有要求複製為 Node.js 擷取呼叫鏈。
  • 以 HAR 格式複製所有項目 (已處理)。將所有要求複製為 HAR 資料，但不含 Cookie、Set-Cookie 和 Authorization 標頭等私密資料。
  • 以 HAR 格式複製所有項目 (含私密資料)。將所有要求複製為 HAR 資料 (含私密資料)。

複製所有要求的選項。

如要複製經過篩選的要求集，請對網路記錄套用篩選器，然後對要求按一下滑鼠右鍵，並選取：

  • 複製所有列出的網址：將所有已套用篩選條件的要求網址複製到剪貼簿。
  • 以 cURL 格式複製所有列出的項目。將所有已篩選的要求複製為一連串的 cURL 指令。
  • 以 PowerShell 格式複製所有列出的項目。將所有已篩選的要求複製為一連串的 PowerShell 指令。
  • 以 Fetch 格式複製所有列出的項目。將所有已篩選的請求複製為一連串的擷取呼叫。
  • 以擷取 (Node.js) 格式複製所有列出來的項目。將所有已篩選的要求複製為一連串的 Node.js 擷取呼叫。
  • 以 HAR 格式複製所有列出的項目 (已處理)。以 HAR 資料格式複製所有已篩選的要求，但不含 Cookie、Set-Cookie 和 Authorization 標頭等私密資料。
  • 以 HAR 格式複製所有列出的項目 (含私密資料)。以 HAR 資料格式複製所有已篩選的請求，其中包含私密資料。

複製已篩選要求集的選項。

變更「網路」面板的版面配置

展開或收合「網路」面板 UI 的區段，專注於對您重要的內容。

隱藏「篩選器」動作列

根據預設，DevTools 會在「Network」面板頂端顯示「Filters bar」。按一下「篩選器」圖示 即可隱藏。

「隱藏篩選器」按鈕。

使用大型要求列

如要在網路要求表格中加入更多空白空間，請使用大型資料列。使用大型資料列時，部分資料欄也會提供更多資訊。舉例來說，「大小」資料欄的底部值是要求未壓縮的大小，「優先順序」資料欄則會顯示初始 (底部值) 和最終 (頂部值) 的擷取優先順序。

開啟「設定」。，然後按一下「大型要求列」，即可查看大型列。

大型要求列已啟用。

隱藏「總覽」軌

根據預設，開發人員工具會顯示「總覽」軌跡。開啟「設定」。，然後取消勾選「顯示總覽」核取方塊即可隱藏。

「顯示總覽」核取方塊。