網路功能參考資料

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

記錄網路要求

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

停止記錄網路要求

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

• 在「網路」面板中，按一下「停止記錄網路記錄」圖示 。圖示會變成灰色，表示開發人員工具已停止記錄要求。
• 在「網路」面板處於焦點狀態時，按下 Command + E 鍵 (Mac) 或 Control + E 鍵 (Windows、Linux)。

清除要求

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

在網頁載入時儲存要求

如要在載入網頁時儲存要求，請勾選「網路」面板上的「保留記錄」核取方塊。 DevTools 會儲存所有要求，直到您停用「Preserve log」為止。

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

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

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

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

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

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

編輯並重新傳送要求

您可以在「Requests」表格中，編輯及重新傳送任何可擷取的網路要求：

1. 在要求上按一下滑鼠右鍵，然後選取「Edit and resend as fetch」(編輯並重新傳送為擷取)。開發人員工具會開啟「控制台」抽屜，並將要求填入為 fetch() 呼叫，同時保留原始要求參數和執行環境。
2. 視需要編輯 Console 中的 fetch() 呼叫，然後按 Enter 鍵重新傳送要求。

變更載入行為

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

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

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

如要在使用其他開發人員工具面板時停用快取，請使用「Network conditions」(網路狀況) 導覽匣。

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

手動清除瀏覽器快取

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

模擬離線狀態

有一種新的網頁應用程式類別稱為漸進式網頁應用程式，這類應用程式可透過服務工作人員離線運作。建構這類應用程式時，如果能快速模擬沒有數據連線的裝置，會很有幫助。

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

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

模擬網路連線速度緩慢

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

如果您在「效能」面板中開啟「欄位指標」，選單中的其中一個節流選項可能會根據 Chrome 使用者體驗報告資料標示為建議選項。

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

建立自訂調節設定檔

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

1. 開啟「Throttling」選單，然後依序選取「Custom」 >「Add...」。
2. 如要設定新的節流設定檔，請依序前往「設定」「設定」 >「節流」。

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

   

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

調節 WebSocket 連線

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

如要觀察 WebSocket 節流：

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

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

如要在使用其他開發人員工具面板時限制網路連線，請使用「Network conditions」(網路狀況) 導覽匣。

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

手動清除瀏覽器 Cookie

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

覆寫 HTTP 回應標頭

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

覆寫使用者代理程式

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

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

搜尋要求

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

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

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

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

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

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

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

篩選要求

依屬性篩選要求

使用「篩選器」方塊，依要求屬性 (例如要求網域或大小) 篩選要求，或輸入文字字串來比對要求網址、網域、主機名稱或通訊埠 (例如 localhost 或 example.com)，包括同網站要求。

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

如要反轉篩選器，請勾選「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：顯示設定特定 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 狀態碼與指定代碼相符的資源。DevTools 會在自動完成下拉式選單中，填入所有遇到的狀態碼。
• url：顯示 url 與指定值相符的資源。

依類型篩選要求

如要依資源類型篩選要求，請按一下「Network」面板上的「All」、「Fetch/XHR」、「JS」、「CSS」、「Img」、「Media」、「Font」、「Doc」、「WS」 (WebSocket)、「Wasm」 (WebAssembly)、「Manifest」或「Other」 (此處未列出的任何其他類型) 按鈕。

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

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

依時間篩選要求

在「Overview」時間軸上向左或向右拖曳，即可只顯示該時間範圍內有效的要求。篩選器會納入符合條件的資料。系統會顯示在醒目顯示時間內執行的所有要求。

隱藏資料網址

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

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

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

隱藏擴充功能網址

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

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

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

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

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

底部的狀態列會顯示目前顯示的要求數量和總數。

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

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

僅顯示已封鎖的要求

如要篩除遭封鎖要求以外的所有項目，請在「篩選器」動作列中，依序選取「更多篩選器」 > check_box「遭封鎖要求」。如要測試，請使用導覽匣中的「Network request blocking」分頁。

「要求」表格會以紅色醒目顯示遭到封鎖的要求。底部的狀態列會顯示目前顯示的要求數量和總數。

僅顯示第三方要求

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

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

排序要求

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

依資料欄排序

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

依活動階段排序

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

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

這些說明假設各選項是依最短到最長排序。點選「Waterfall」欄標題可反轉順序。

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

分析要求

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

查看要求記錄

「要求」表格會記錄開發人員工具開啟期間的所有要求。點選或將滑鼠游標懸停在要求上，即可查看更多資訊。

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

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

• 狀態。這個資料欄會顯示下列值：

  

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

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

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

  • 剖析器。Chrome 的 HTML 剖析器。
  • 重新導向。HTTP 重新導向。
  • 指令碼。JavaScript 函式。在這種情況下，「網路」面板會提供來源檔案中對應行的連結。
  • 早期提示。HTTP 103 Early Hints 回應。
  • 其他。其他程序或動作，例如使用連結前往網頁，或在網址列中輸入網址。

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

• Time - 從要求開始到收到回應中的最後一個位元組為止，所經過的總時間。

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

新增或移除欄

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

您可以新增或移除下列額外資料欄：

• 要求編號：要求啟動的絕對順序，預設會固定在「要求」表格的第一個位置。
• 路徑。網址的路徑部分。
• 網址。要求的完整網址。
• 方法。要求的 HTTP 方法 (例如 GET、POST、PUT、DELETE)。
• 通訊協定。要求的通訊協定 (例如 h2 代表 HTTP/2、h3 代表 HTTP/3 等)。
• Scheme。網址的配置部分。
• 網域。網址的網域部分。
• 遠端位址。要求的遠端 IP 位址和通訊埠。
• 遠端位址空間。要求的遠端位址空間。公開 IP 為 Public，私人 IP 為 Private。
• 啟動器位址空間。要求的啟動器位址空間。與遠端相同。
• Cookie。要求中的 Cookie 數量。
• 設定 Cookie。回應中的 Cookie 數量。
• 優先檔案區。要求的優先順序。
• 連線 ID。用戶端工作階段中要求的連線 ID (如果有的話)。
• 有覆寫項目。要求是否已覆寫 (是、否、內容或標頭)。
• 與廣告相關。下列敘述是否正確？
• 預先載入。要求是否使用推測預先載入功能啟動。
• 阻斷算繪。要求是否為轉譯封鎖、可能阻斷或非阻斷。
• 刊登序列。以視覺化方式呈現每項要求的活動。

新增自訂欄

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

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

依內嵌框架將要求分組

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

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

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

查看要求之間的相對時間

使用「Waterfall」查看要求之間的時序關係。根據預設，「Waterfall」會依要求的開始時間排序。因此，越靠左側的要求，開始時間越早。

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

分析 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分頁頂端的篩選列中指定規則運算式。

如要清除擷取的事件清單，請按一下「block」「清除」。

查看回應主體的預覽畫面

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

1. 在「要求」表格的「名稱」欄下方，選取一項要求。
2. 開啟「預覽」分頁。

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

查看回覆主體

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

1. 在「要求」表格中，選取「名稱」欄下方的要求。
2. 開啟「回覆」分頁。

如果是二進位或壓縮回應，請從「Response」分頁底部的下拉式選單中，選取解碼方法 (「Base64」、「Hex」或「UTF-8」)。

查看 HTTP 標頭

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

1. 在「要求」表格中，選取「名稱」欄下方的要求。
2. 開啟「Headers」分頁，然後向下捲動至「General」、「回應標頭」、「要求標頭」和「Early Hints Headers」部分 (選用)。

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

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

查看 HTTP 標頭來源

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

1. 開啟所需要求的「Headers」分頁標籤。請參閱「查看 HTTP 標頭」。
2. 按一下「要求標頭」或「回應標頭」部分旁的「查看來源」。

臨時標頭警告

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

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

• 網路資源無效。例如，在控制台中執行 fetch("https://jec.fish.com/unknown-url/")。

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

查看要求酬載

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

查看酬載來源

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

如要查看查詢字串參數和表單資料的來源，請在「酬載」分頁中，按一下「查詢字串參數」或「表單資料」部分旁的「查看來源」。

查看網址編碼的查詢和表單參數

根據預設，開發人員工具會以網址解碼形式顯示查詢字串參數和表單資料。如要切換「酬載」分頁中的引數網址編碼，請按一下「查看網址編碼」或「查看已解碼」。

查看二進位和壓縮酬載

如果是二進位或壓縮的要求酬載，請從「Payload」分頁底部的下拉式選單中，選取解碼方法 (「Base64」、「Hex」或「UTF-8」)。

查看 Cookie

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

1. 在「要求」表格的「名稱」欄下方，選取一項要求。
2. 開啟「Cookie」分頁。

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

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

查看裝置綁定工作階段

「Device bound sessions」(裝置綁定工作階段) 分頁會顯示網站上所有有效裝置綁定工作階段中，與所選要求相關聯的延遲 (重新整理) 資訊。

如要查看延期 (重新整理) 資訊，請按照下列步驟操作：

1. 在「要求」表格的「名稱」欄下方，選取一項要求。
2. 開啟「裝置繫結工作階段」分頁。

只有含有 Cookie 的相關要求，才會顯示「Device bound sessions」分頁。這個分頁會列出所有有效的裝置綁定工作階段，以及工作階段是否延遲要求 (如果沒有，則會列出原因)。可用的延遲選項如下：

• Deferred (Refresh)
• Not deferred (Proactive refresh attempted)
• Not deferred (Request is in scope of session but proactive refresh is not possible)
• Not deferred (Request is in scope of session but initiator is not allowed to trigger refresh)
• Not deferred (Request is in scope of session but cookies are still present)
• Not deferred (Request is not in scope of session)

查看要求的時間細目

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

1. 在「要求」表格中，選取「名稱」欄下方的要求。
2. 開啟「時間」分頁。

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

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

預覽時間細目

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

如要瞭解如何不將滑鼠游標懸停在要求上，就能存取這項資料，請參閱「查看要求的時間細目」。

時間細目階段說明

以下進一步說明「時間」分頁中可能顯示的各個階段：

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

查看啟動器和依附元件

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

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

查看載入事件

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

查看要求總數

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

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

DevTools 會在「網路」面板底部的狀態列中，列出已轉移和載入 (未壓縮) 資源的總大小。

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

查看導致要求的堆疊追蹤

當 JavaScript 陳述式導致系統要求資源時，請將滑鼠游標懸停在「Initiator」欄上，查看導致要求的堆疊追蹤。

查看資源的未壓縮大小

依序選取「設定」圖示 >「Big request rows」，然後查看「Size」欄底部的值。

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

匯出要求資料

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

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

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

為降低意外洩漏機密資訊的機率，根據預設，您可以匯出「經過清理」的 HAR 格式網路記錄，其中不含 Cookie、Set-Cookie 和 Authorization 標頭等機密資訊。如有需要，您也可以匯出含有機密資料的記錄。

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

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

  

• 在「Network」面板頂端的動作列中，按一下「download」Export HAR (sanitized)...。

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

  

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

• 將 HAR 檔案拖曳到「Requests」表格中。
• 在「Network」面板頂端的動作列中，按一下「上傳」圖示 。

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

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

如要複製單一要求、其回應或堆疊追蹤，請按照下列步驟操作：

• 複製網址。將要求的網址複製到剪貼簿。
• 複製為 cURL。將要求複製為 cURL 指令。
• 複製為 PowerShell。將要求複製為 PowerShell 指令。
• 複製為擷取。將要求複製為擷取呼叫。
• 複製為擷取 (Node.js)。將要求複製為 Node.js 擷取呼叫。
• 複製為預先載入元素。將要求複製為 <link rel="preload"> HTML 代碼。
• 複製回覆。將回應主體複製到剪貼簿。
• 複製堆疊追蹤。將要求的堆疊追蹤複製到剪貼簿。

如要複製所有要求：

• 複製所有網址：將所有要求的網址複製到剪貼簿。
• Copy all as cURL。將所有要求複製為一連串的 cURL 指令。
• 以 PowerShell 格式全部複製。將所有要求複製為 PowerShell 指令鏈。
• Copy all as fetch。將所有要求複製為一連串的擷取呼叫。
• Copy all as fetch (Node.js)。將所有要求複製為 Node.js 擷取呼叫鏈。
• Copy all as HAR (sanitized)。將所有要求複製為 HAR 資料，但不含 Cookie、Set-Cookie 和 Authorization 標頭等私密資料。
• Copy all as HAR (with sensitive data)。將所有要求複製為 HAR 資料 (含私密資料)。

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

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

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

展開或收合「網路」面板 UI 的各個部分，專注於重要資訊。

隱藏篩選器動作列

根據預設，開發人員工具會在「網路」面板頂端顯示「篩選器列」。按一下 filter_alt「篩選器」即可隱藏。

使用大型要求資料列

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

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

隱藏「總覽」測試群組

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