本頁面由 Cloud Translation API 翻譯而成。

網路功能參考資料

Kayce Basques

Sofia Emelianova

參閱這份 Chrome 開發人員工具綜合參考資料，探索新網頁載入速度分析方式網路分析功能

記錄網路要求

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

網路面板。

停止記錄網路要求

如要停止記錄要求：

按一下「停止記錄網路記錄」。「Network」面板上。圖示會變成灰色，表示開發人員工具已停止記錄要求。
按下 Command> 鍵+ E 鍵 (Mac) 或 Control + E 鍵 (Windows、Linux)，而「網路」面板為焦點。

清除要求

按一下「清除」。，清除「Requests」(要求) 資料表中的所有要求。

儲存跨網頁載入的要求

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

在載入網頁時擷取螢幕截圖

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

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

將焦點移至「網路」面板並擷取螢幕截圖時，重新載入頁面。

拍攝完成後，你可以透過下列方式與螢幕截圖互動：

將滑鼠遊標懸停在螢幕截圖上，即可查看擷取螢幕截圖的時間點。黃線就會顯示在「總覽」窗格中
按一下螢幕截圖的縮圖，即可篩除螢幕截圖後發生的任何要求擷取完成。
按兩下縮圖即可放大。

已啟用擷取螢幕畫面功能。

重播 XHR 要求

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

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

選取「重播 XHR」。

變更載入行為

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

如果模擬使用者第一次造訪網站時的體驗，請勾選「停用快取」核取方塊。開發人員工具會停用瀏覽器快取。這能更準確地模擬首次使用者體驗因為重複造訪時，請求來自瀏覽器快取。

「停用快取」核取方塊。

透過「網路條件」導覽匣停用瀏覽器快取

如要在其他開發人員工具面板中停用快取，請使用網路狀況 導覽匣。

按一下圖示，開啟「網路條件」導覽匣。
勾選或取消勾選「停用快取」核取方塊。

手動清除瀏覽器快取

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

選取 [清除瀏覽器快取]。

離線模擬

目前我們推出了名為漸進式網頁應用程式的新類別，可在離線狀態下使用還能獲得 Service Worker 的協助。當你建構這類應用程式時，能夠瞭解可快速模擬沒有數據連線的裝置。

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

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

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

模擬緩慢的網路連線

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

包含預設設定的網路節流下拉式選單。

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

建立自訂節流設定檔

除了預設設定 (例如慢速或高速 4G) 之外，你也可以自行新增自訂節流設定檔：

開啟「Throttling」選單，然後選取「Custom」>新增...。
按照「設定」>「設定」應用程式的說明，建立新的節流設定檔節流。
返回「網路」面板，從「Throttling」下拉式選單中選取新的設定檔。

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

限制 WebSocket 連線

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

如何觀察 WebSocket 節流：

啟動新連結，例如使用測試工具。
在「網路」面板上，選取「沒有節流」，然後透過連線傳送訊息。
建立非常緩慢的自訂節流設定檔，例如 10 kbit/s。因此，刪除速度緩慢的設定檔將能幫助你注意到差異。
在「網路」面板中選取設定檔，並傳送其他訊息。
切換「WS」WS篩選器，然後按一下您的連線名稱並開啟「訊息」WS分頁，然後查看已傳送和已回覆訊息時有節流限制。例如：

收發訊息時，無論是否經過節流都會調整。

從網路狀況導覽匣模擬緩慢網路連線

如要在其他開發人員工具面板中工作時節流網路連線，請使用 網路條件導覽匣。

按一下圖示，開啟「網路條件」導覽匣。
從「網路節流」選單中選取連線速度。

手動清除瀏覽器 Cookie

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

選取「清除瀏覽器 Cookie」。

覆寫 HTTP 回應標頭

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

覆寫使用者代理程式

如何手動覆寫使用者代理程式：

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

搜尋要求

如要搜尋要求標頭、酬載和回應，請執行下列操作：

按下下列捷徑即可開啟右側的「搜尋」分頁：
- 在 macOS 上，Command + F 鍵。
- 在 Windows 或 Linux 上，Control + F 鍵。
在「搜尋」分頁中輸入查詢內容，然後按下 Enter 鍵。視需要按一下「match_case」match_case或「regular_expression」match_case，即可分別開啟區分大小寫功能或規則運算式。
按一下其中一個搜尋結果。「Network」面板會以黃色醒目顯示要求，並在「Headers」、「Paload」或「Response」分頁中醒目顯示相符的字串。

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

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

篩選要求

依資源篩選要求

使用「篩選器」方塊，即可按照屬性篩選要求，例如網域或請求。

如果找不到這個方塊，表示「篩選器」窗格可能已隱藏起來。請參閱隱藏篩選器窗格。

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

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

如要同時使用多個屬性，您可以使用空格分隔各項屬性。適用對象例如，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 標頭有誤，系統會在「網路」面板中標示該標頭。
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 符合指定值的資源。

依類型篩選要求

如要依要求類型篩選要求，請按一下「全部」、「擷取/XHR」、「JS」、「CSS」、「Img」、「Media」。 Font、Doc、WS (WebSocket)、Wasm (WebAssembly)、Manifest 或 Other (任何其他類型未列於此處) 按鈕，就能開啟「網路」面板。

如果您沒有看到這些按鈕，可能是「篩選器」窗格已隱藏。請參閱隱藏篩選器窗格。

如要同時啟用多個類型篩選器，請按住 Command (Mac) 或 Control (Windows、Linux) 並然後點選

使用類型篩選器顯示 JS、CSS 和 Document 資源。

依時間篩選要求

在「總覽」窗格上向左或向右拖曳，即可只顯示有效要求期間。篩選器涵蓋在內。在醒目顯示期間提出的任何有效要求，都是。

濾除所有閒置的要求約 21 至 25 毫秒。

隱藏資料網址

資料網址是嵌入其他文件的小型檔案，您在開頭為 data: 的「要求」資料表是資料網址。

如要隱藏這些要求，請勾選「隱藏資料網址」。

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

畫面底部的狀態列會顯示已顯示要求在總數中所佔的數量。

隱藏擴充功能網址

如要專注於編寫的程式碼，您可以過濾掉 Chrome 中安裝的擴充功能所發出的不相關要求。擴充功能要求的網址開頭為 chrome-extension://。

如要隱藏擴充功能要求，請勾選「隱藏擴充功能網址」。

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

畫面底部的狀態列會顯示已顯示要求在總數中所佔的數量。

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

如要篩除所有內容，但不包括因任何原因封鎖回應 Cookie 的要求，請查看「已封鎖的回應 Cookie」。歡迎到這個示範頁面試用看看。

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

畫面底部的狀態列會顯示已顯示要求在總數中所佔的數量。

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

此外，「聯播網」面板會在受到第三方 Cookie 逐步淘汰或已豁免狀態影響的要求旁邊顯示「警告」警告圖示。將滑鼠遊標懸停在圖示上，即可查看和相關提示的工具提示。按一下該圖示，即可前往「問題」面板查看更多資訊。

旁邊顯示警告圖示，指出受到第三方 Cookie 淘汰措施影響的要求。

僅顯示已封鎖的要求

如要篩除已封鎖的要求以外的所有項目，請參閱「已封鎖的要求」。如要進行測試，請使用「網路要求封鎖」導覽匣分頁。

「要求」表格只會顯示已封鎖的要求，

「要求」表格會以紅色標示已封鎖的要求，畫面底部的狀態列會顯示已顯示要求在總數中所佔的數量。

僅顯示第三方要求

如要篩除所有內容，但請求來源與網頁來源不同的要求除外，請參閱「第三方要求」。歡迎到這個示範頁面試用看看。

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

畫面底部的狀態列會顯示已顯示要求在總數中所佔的數量。

將要求排序

根據預設，「Requests」表格中的要求會按照啟動時間排序，但您可以排序套用其他條件的資料表

依欄排序

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

依活動階段排序

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

開始時間：最頂端會啟動第一項要求。
回應時間：畫面頂端會顯示開始下載的第一個要求。
結束時間。完成的第一個要求會顯示在最上方。
總時長。具有最短連線設定和要求 / 回應的要求：。
延遲時間。等待最短回應時間的要求會顯示在最上方。

這些說明假設每個選項的排名是從短到最長排序。點擊「Waterfall」資料欄的標頭會反轉順序。

在本範例中，刊登序列是按照總時間長度排序。每個長條中較淺的部分都是時間等待的時間。較深的部分是下載位元組所花費的時間。

依總時間長度排序刊登序列。

分析要求

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

查看要求記錄

使用「Requests」(要求) 表格即可查看開發人員工具開啟時，所有要求的記錄檔。點選或只要將遊標懸停在要求上，即可查看更多相關資訊。

要求表格。

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

名稱 - 資源的檔案名稱或 ID。
狀態：此欄會顯示下列值：
- HTTP 狀態碼，例如 200 或 404。
- 要求 CORS error 因跨源資源共享 (CORS) 而失敗。
- (blocked:origin) 適用於標頭設定錯誤的要求。將滑鼠遊標懸停在這個狀態值上，即可查看工具提示，瞭解問題所在。
- (failed)，後面接著錯誤訊息。
類型：要求資源的 MIME 類型。
發起人。下列物件或程序可以發出要求：
- 剖析器。Chrome 的 HTML 剖析器。
- 重新導向。HTTP 重新導向。
- 指令碼：JavaScript 函式。
- 其他。其他程序或動作，例如透過連結前往頁面，或是輸入網址。
Size - 回應標頭的總數加上回應內文的伺服器
Time - 從要求開始到收到最後一個位元組所經過的總時間長度回應。
瀑布圖：每項要求活動的視覺化細目。

新增或移除欄

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

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

您可以新增或移除下列其他資料欄：路徑、網址、方法、通訊協定、配置、網域、遠端位址、遠端位址空間、啟動器位址空間、Cookie、設定 Cookie、優先順序、連線 ID、含有覆寫值和瀑布的資料欄。

新增自訂欄

如要在「Requests」表格中新增自訂欄：

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

將自訂欄加入「要求」表格。

依內嵌頁框將要求分組

如果網頁上的內嵌頁框啟動了大量要求，您可以將要求記錄分組，讓要求記錄更友善。

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

按 iframe 分組的要求網路要求記錄。

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

查看要求彼此之間的時間

使用「刊登序列」查看要求之間的時間。根據預設， 刊登序列是按照要求的開始時間排序。因此，較左側的要求數都是比最右側的物件類型

請參閱依活動階段排序，瞭解刊登序列的各種排序方式。

「Request」(要求) 窗格的「Waterfall」(瀑布) 欄。

分析 WebSocket 連線訊息

如何查看 WebSocket 連線訊息：

在「Requests」表格的「Name」欄下方，按一下 WebSocket 連線網址。
按一下「訊息」分頁標籤。表格會顯示最近 100 則訊息。

如要重新整理表格，請在應用程式的「Name」欄下方，再次按一下 WebSocket 連線名稱， Requests 資料表。

「訊息」分頁。

表格含有三個資料欄：

資料：訊息酬載。如果郵件是純文字，就會顯示在這裡。二進位檔運算編碼，此欄就會顯示運算碼的名稱和代碼。系統支援的運算碼如下：接續框架、二進位框架、連接關閉頁框、Ping Frame 和 Pong Frame。
長度：訊息酬載的長度，以位元組為單位。
Time - 接收或傳送訊息的時間。

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

撥出的簡訊會標示為綠色。
收到的訊息會顯示為白色。
WebSocket 運算碼是淺黃色。
錯誤會標上淺紅色。

分析串流中的事件

如要查看伺服器透過 Fetch API、EventSource API 和 XHR 串流的事件：

在串流事件的頁面上記錄網路要求。舉例來說，請開啟這個示範頁面，然後點選這三個按鈕中的任一個。
在「網路」中，選取所需要求並開啟「EventStream」分頁。

「EventStream」分頁。

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

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

查看回應主體的預覽畫面

如何查看回應主體的預覽：

在「要求」表格的「名稱」欄下方，按一下要求的網址。
按一下「預覽」分頁標籤。

這個分頁最適合用來查看圖片。

「預覽」分頁。

查看回應主體

如何查看要求的回應主體：

在「要求」表格的「名稱」欄下方，按一下要求的網址。
按一下「回應」分頁標籤。

「回應」分頁。

查看 HTTP 標頭

如何查看要求的 HTTP 標頭資料：

在「Requests」表格中按一下要求。
開啟「Headers」分頁，然後向下捲動至「General」、「Response Headers」、「Request Headers」，並視需要向下捲動至「Early Hints Headers」區段。

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

在「General」部分中，開發人員工具會在收到的 HTTP 狀態碼旁邊顯示使用者可理解的狀態訊息。

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

查看 HTTP 標頭來源

根據預設，「Headers」分頁會按照字母順序顯示標頭名稱。如要查看接收順序：

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

佈建標頭警告

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

要求未透過網路傳送，但是從本機快取 (不會儲存原始要求標頭) 提供。在這種情況下，您可以停用快取功能查看完整的要求標頭。
網路資源無效。例如在控制台中執行 fetch("https://jec.fish.com/unknown-url/")。

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

查看要求酬載

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

「酬載」分頁。

查看酬載來源

根據預設，開發人員工具會以使用者可理解的格式顯示酬載。

如要查看查詢字串參數和表單資料的來源，請在「Payload」分頁中，按一下「Query String Parameters」或「Form Data」區段旁邊的 [查看來源]。

檢視畫面來源按鈕。

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

如要切換引數的網址編碼功能，請在「酬載」分頁中按一下「查看解碼後」或「查看網址編碼」。

切換網址編碼。

查看 Cookie

如何查看透過要求的 HTTP 標頭傳送的 Cookie：

在「要求」表格的「名稱」欄下方，按一下要求的網址。
按一下「Cookie」分頁標籤。

Cookie 分頁。

如需各欄的說明，請參閱欄位一文。

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

查看要求的時間詳細分析資料

如何查看要求的時間詳細分析資料：

在「要求」表格的「名稱」欄下方，按一下要求的網址。
按一下「時間」分頁標籤。

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

「時間」分頁。

如要進一步瞭解各個階段的詳細資訊，請參閱「時間細分階段說明」「時間」分頁。

預覽時間詳細分析資料

如要預覽要求的時間細目，請將遊標懸停在「Requests」表格的「Waterfall」欄。

請參閱「查看要求的時間細目」，瞭解如何直接存取不需要的資料。以及遊標懸停時

預覽要求的時間詳細分析資料。

時間細目說明階段

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

佇列。瀏覽器會在連線開始之前和下列情況將要求排入佇列：
- 其他要求的優先順序較高。
- 這個來源已有六個開啟的 TCP 連線，已達數量上限。套用至：僅限 HTTP/1.0 和 HTTP/1.1。
- 瀏覽器正在短暫分配磁碟快取中的空間。
停滯。基於佇列中所述的任一原因，連線開始後，可能會暫停要求。
DNS 查詢。瀏覽器正在解析要求的 IP 位址。
初始連線。瀏覽器正在建立連線，包括 TCP 交握或重試及協議 SSL
Proxy 交涉。瀏覽器正在與 Proxy 伺服器交涉要求。
已傳送要求。正在傳送要求。
ServiceWorker 準備工作。瀏覽器正在啟動 Service Worker。
向 ServiceWorker 提出要求。正在將要求傳送至 Service Worker。
等待中 (TTFB)。瀏覽器正在等待回應的第一個位元組。TTFB 代表時間第一位元組。時間包括 1 次往返延遲時間，以及伺服器花費該時間準備回應
下載內容。瀏覽器會直接從網路或 Service Worker 收到回應。這個值是讀取回應主體所花費的總時間。如果值大於預期，可能表示網路速度緩慢，或是瀏覽器忙於執行其他工作，導致系統無法讀取回應。