網路功能參考資料

Sofia Emelianova
Sofia Emelianova

查看 Chrome 開發人員工具網路分析功能的全方位參考資料,探索分析網頁載入方式的新方式。

記錄網路要求

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

網路面板。

停止記錄網路要求

如何停止錄製要求:

  • 按一下「Network」(網路) 面板中的「Stop recording network log」(停止記錄網路記錄) 圖示 停止錄製網路。。它會變成灰色,表示開發人員工具已停止記錄要求。
  • 當焦點位於「網路」面板時,按下 Command> + E 鍵 (Mac) 或 Control + E 鍵 (Windows、Linux)。

清除要求

按一下「Network」面板中的「Clear」圖示 。,清除「Requests」資料表中的所有要求。

「清除」按鈕。

在網頁載入期間儲存要求

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

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

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

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

當焦點位於「網路」面板時,重新載入頁面來擷取螢幕截圖。

擷取螢幕截圖後,可以透過下列方式與螢幕截圖互動:

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

已啟用擷取螢幕截圖功能。

重播 XHR 要求

如要重播 XHR 要求,請在 Requests 資料表中執行下列其中一項操作:

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

正在選擇重播 XHR。

變更載入行為

停用瀏覽器快取,模擬首次造訪的訪客

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

「停用快取」核取方塊。

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

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

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

手動清除瀏覽器快取

若要隨時手動清除瀏覽器快取,請在「Requests」(要求) 表格的任一處按一下滑鼠右鍵,然後選取「Clear Browser cache」(清除瀏覽器快取)

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

離線模擬

我們推出了名為「漸進式網頁應用程式」的全新類別,可在服務工作站的協助下離線運作。建構這類應用程式時,建議您能夠快速模擬沒有數據連線的裝置。

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

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

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

模擬緩慢的網路連線

如要模擬慢速 3G、快速 3G 和其他連線速度,請從「節流」選單中選取對應選項。

「網路節流」選單。

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

建立自訂節流設定檔

除了慢速或快速 3G 等預設項目外,您還可以新增自己的自訂節流設定檔:

  1. 開啟「Throttling」選單,然後依序選取「自訂」 >「新增...」
  2. 如要設定新的節流設定檔,請依序前往「設定」>「節流」
  3. 返回「網路」面板,從「節流」下拉式選單中選取新的設定檔。

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

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

限制 WebSocket 連線

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

如何觀察 WebSocket 節流:

  1. 啟動新連線,例如使用測試工具
  2. 在「網路」面板中選取「沒有節流」,然後透過連線傳送訊息。
  3. 建立非常緩慢的自訂節流設定檔,例如 10 kbit/s。迅速載入的設定檔可協助您注意到任何差異。
  4. 在「Network」面板中,選取設定檔並傳送另一則訊息。
  5. 如要切換「WS」WS篩選器,請按一下您的連線名稱,接著開啟「訊息」WS分頁,然後檢查已傳送與回音的訊息 (無論是否出現節流) 之間的時間差異。例如:

傳送及回應的訊息 (無論是否設有節流功能)。

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

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

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

手動清除瀏覽器 Cookie

如要隨時手動清除瀏覽器 Cookie,請在「Requests」(要求) 表格的任一處按一下滑鼠右鍵,然後選取「Clear Browser cookies」(清除瀏覽器 Cookie)

選取 [清除瀏覽器 Cookie]。

覆寫 HTTP 回應標頭

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

覆寫使用者代理程式

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

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

篩選要求

依資源篩選要求

使用「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:顯示已覆寫 contentheaders、任何覆寫值 (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 標頭。系統會在「網路」面板中標記格式錯誤的 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 狀態碼與指定代碼相符的資源。開發人員工具會在自動完成下拉式選單中填入所有發現的狀態碼。
  • url:顯示具有 url 符合指定值的資源。

依類型篩選要求

如要依要求類型篩選要求,請按一下「網路」面板上的 [全部]、[擷取/XHR]、[JS]、[CSS]Img媒體字型文件WS (WebSocket)、Manifest (WebAssembly)、ManifestOther (此處未列出的任何其他類型的) 按鈕。

如果找不到這些按鈕,表示「篩選器」窗格可能處於隱藏狀態。請參閱「隱藏篩選器窗格」。

如要同時啟用多種類型篩選器,請按住 Command 鍵 (Mac) 或 Control 鍵 (Windows、Linux),然後按一下。

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

依時間篩選要求

在「Overview」窗格上向左或向右拖曳,僅顯示該時間範圍內的有效要求。篩選器包含條件。在醒目顯示的時間範圍內,任何有效的要求都會顯示。

篩除所有在 21 到 25 毫秒內閒置的要求。

隱藏資料網址

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

如要隱藏這些要求,請勾選 核取方塊。「隱藏資料網址」

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

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

隱藏擴充功能網址

為了專注處理您編寫的程式碼,您可以篩選出可能安裝於 Chrome 的擴充功能所傳送的不相關要求。擴充功能要求的網址是以 chrome-extension:// 開頭。

如要隱藏擴充功能要求,請勾選 核取方塊。「隱藏擴充功能網址」

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

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

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

如要篩除所有因任何原因而遭到封鎖的回應 Cookie 要求,請參閱「核取方塊。 已封鎖的回應 Cookie」。您可以前往這個示範頁面試用看看。

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

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

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

此外,在受到第三方 Cookie 逐步淘汰或豁免影響的請求旁,「聯播網」面板會顯示「警告」警告圖示。將滑鼠遊標懸停在圖示上,即可查看內含線索的工具提示。按一下該工具提示,即可前往「問題」面板瞭解詳情。

在受第三方 Cookie 逐步淘汰影響的要求旁顯示警告圖示。

僅顯示已封鎖的要求

如要篩除封鎖要求以外的所有要求,請勾選 核取方塊。「已封鎖的要求」。如要測試這一點,您可以使用「網路要求封鎖導覽匣分頁。

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

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

僅顯示第三方要求

如要過濾掉來源與網頁來源不同的要求以外的所有要求,請參閱 核取方塊。 的「第三方要求」一節。您可以前往這個示範頁面試用看看。

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

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

排序要求

根據預設,Requests 資料表中的要求會按照啟動時間排序,但您可以使用其他條件來排序資料表。

依資料欄排序

按一下「要求」表格中任一資料欄的標頭,即可按照該資料欄排序要求。

依活動階段排序

如要變更「Waterfall」的排序方式,請在「要求」資料表的標頭上按一下滑鼠右鍵,將滑鼠遊標懸停在「Waterfall」上,然後選取下列其中一個選項:

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

這裡的說明假設每個選項的排名由最短到最長。按一下「Waterfall」資料欄的標頭,即可反向排序。

在這個範例中,「Waterfall」會依據總時間長度排序。每個長條的較淺部分是等待時間。最深的部分是下載位元組所花費的時間。

依總時長排序瀑布圖。

分析要求

只要開發人員工具開啟,工具就會記錄「網路」面板中的所有要求。您可以使用「Network」面板分析要求。

查看要求記錄

使用「要求」表格查看開發人員工具開啟期間的所有要求記錄。按一下或將滑鼠遊標懸停在要求上,即可看到更多有關要求的資訊。

要求資料表。

根據預設,「要求」表格會顯示下列資料欄:

  • 名稱 - 資源的檔案名稱或 ID。
  • 狀態:此欄可能會顯示下列值:

    「狀態」欄中的值不同。

    • HTTP 狀態碼,例如 200404
    • CORS error 要求因跨源資源共享 (CORS) 而失敗。
    • (blocked:origin) 適用於標頭設定錯誤的要求。將滑鼠遊標懸停在這個狀態值上,即可查看錯誤提示。
    • (failed),後面接著錯誤訊息。
  • 類型:所要求資源的 MIME 類型。

  • 發起人。下列物件或程序可以啟動要求:

    • Parser。Chrome 的 HTML 剖析器。
    • 重新導向:HTTP 重新導向。
    • 指令碼。JavaScript 函式。
    • Other:其他程序或動作,例如使用連結前往頁面,或是在網址列中輸入網址。
  • Size - 回應標頭的加總大小加上伺服器傳送的回應主體。

  • Time - 從要求開始到收到回應中最終位元組之間的總時間長度。

  • 刊登序列:每項要求的活動示意圖。

新增或移除欄

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

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

您可以新增或移除下列額外的資料欄:「路徑」、「網址」、「方法」、「通訊協定」、「配置」、「網域」、「遠端位址」、「遠端位址空間」、「啟動者位址空間」、「Cookie」、「設定 Cookie」、「連線 ID」和「連線覆寫設定」

新增自訂欄

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

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

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

依內嵌頁框將要求分組

如果網頁中的內嵌頁框發出大量要求,您可以將要求記錄分組,簡化要求記錄。

如要依 iframe 將要求分組,請在「網路」面板中開啟「設定」圖示 [設定]。,然後勾選 核取方塊。「依框架分組」

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

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

查看要求之間的間隔時間

請使用刊登序列查看要求與其他要求之間的相對時間。根據預設,「Waterfall」是依照要求的開始時間來排序。因此,較左方的要求比右邊的要求更早啟動。

請參閱「依活動階段排序」一節,瞭解「刊登序列」的各種排序方式。

「要求」窗格的「刊登序列」欄。

分析 WebSocket 連線的訊息

如何查看 WebSocket 連線的訊息:

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

如要重新整理資料表,請重新按一下「Requests」(要求) 資料表「Name」(名稱) 欄下方的 WebSocket 連線名稱。

「訊息」分頁。

資料表含有三個資料欄:

  • 資料:訊息酬載。如果是純文字訊息,會顯示在這裡。若是二進位運算代碼,此欄會顯示運算代碼名稱和代碼。支援的運算程式碼如下:接續影格、二進位影格、連線關閉影格、Ping Frame 和 Pong Frame。
  • 長度:訊息酬載的長度,以位元組為單位。
  • Time - 接收或傳送訊息的時間。

訊息會根據類型以不同顏色標示:

  • 傳出的簡訊會顯示為淺綠色。
  • 收到的簡訊則為白色。
  • WebSocket 運算代碼為淺黃色。
  • 錯誤訊息亮紅色時。

分析串流中的事件

如要查看伺服器透過 Fetch APIEventSource API 和 XHR 串流的事件,請按照下列步驟操作:

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

「EventStream」分頁。

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

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

查看回應內文的預覽畫面

如何查看回應內文的預覽畫面:

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

這個分頁最適合用來檢視圖片。

「預覽」分頁。

查看回應主體

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

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

「回應」分頁。

查看 HTTP 標頭

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

  1. 在「要求」表格中按一下要求。
  2. 開啟「標頭」分頁,然後向下捲動至「一般」、「回應標頭」或「要求標頭」部分。

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

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

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

查看 HTTP 標頭來源

根據預設,「標頭」分頁會依字母順序顯示標頭名稱。如要依照收到的順序查看 HTTP 標頭名稱:

  1. 找出您要查看的要求,然後開啟「標頭」分頁。請參閱「查看 HTTP 標頭」。
  2. 按一下「要求標頭」或「回應標頭」部分旁邊的「查看來源」

佈建標頭警告

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

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

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

出於安全考量,開發人員工具也可以只顯示臨時標頭。

查看要求酬載

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

「酬載」分頁。

查看酬載來源

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

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

檢視來源按鈕。

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

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

切換網址編碼設定。

查看 Cookie

如要查看要求 HTTP 標頭中傳送的 Cookie:

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

「Cookie」標籤。

如需每個資料欄的說明,請參閱欄位一節。

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

查看要求的時間細目

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

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

請參閱預覽時間明細,瞭解如何更快存取這些資料。

「時間」分頁。

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

預覽時間明細

如要查看要求的時間細目預覽,請將遊標懸停在「要求」表格「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 的回應。這個值是讀取回應主體所花費的總時間。如果數值大於預期值,可能表示網路速度緩慢,或是瀏覽器忙於執行其他工作,導致讀取作業延遲。

查看啟動條件和依附元件

如要查看要求的啟動者和依附元件,請按住 Shift 鍵,將滑鼠遊標懸停在要求資料表中的要求上。開發人員工具的顏色啟動器為綠色,依附元件則為紅色。

查看要求的啟動者和依附元件。

如果「Requests」資料表按照時間順序排序,則遊標懸停的要求上方第一個綠色要求會是依附元件的啟動者。如果上方還有另一個綠色要求,這個要求就會成為啟動者的啟動者。而其他人員也會有資料管理的需求。

查看載入事件

開發人員工具會在「Network」面板的多個位置顯示 DOMContentLoadedload 事件的時間。DOMContentLoaded 事件會呈現藍色,load 事件為紅色。

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

查看要求總數

要求總數會列在「網路」面板底部的「摘要」窗格中。

自開發人員工具開啟以來的要求總數。

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

開發人員工具會在「網路」面板底部的「摘要」窗格中列出已轉移和載入 (未壓縮) 資源的總大小。

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

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

查看造成要求的堆疊追蹤

當 JavaScript 陳述式觸發資源要求時,將遊標懸停在「Initiator」資料欄上,即可查看提出要求的堆疊追蹤。

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

查看資源的未壓縮大小

依序前往「設定」圖示 [設定]。 >「Big 要求資料列」,然後查看「Size」欄的底部值。

未壓縮資源的範例。

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

匯出要求資料

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

HAR (HTTP 封存) 是數個 HTTP 工作階段工具用來匯出所擷取資料的檔案格式。格式是包含一組特定欄位的 JSON 物件。

您可以透過下列兩種方式將所有網路要求儲存至 HAR 檔案:

  • 在「Requests」表格中的任何要求上按一下滑鼠右鍵,然後選取「Save all as HAR with content」選取 [全部儲存為 HAR 和內容]。
  • 按一下「網路」面板頂端動作列中的 。「Export HAR」在頂端的動作列中,「匯出 HAR」按鈕。

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

  • 將 HAR 檔案拖曳至「Requests」(要求) 表格中。
  • 在「網路」面板頂端的動作列中,按一下 。「Import HAR」

將一或多項要求複製到剪貼簿

在「Requests」資料表的「Name」欄下方,在要求上按一下滑鼠右鍵,將遊標懸停在「Copy」上,然後選取下列其中一個選項:

  • 複製網址。將要求的網址複製到剪貼簿。
  • 複製為 cURL。將要求複製為 cURL 指令。
  • 複製為 PowerShell。複製要求做為 PowerShell 指令。
  • 複製為擷取內容。將要求複製為擷取呼叫。
  • 複製為 Node.js 擷取內容。將要求複製為 Node.js 擷取呼叫。


  • 複製回覆。將回應內文複製到剪貼簿。


  • 複製所有網址:將所有要求的網址複製到剪貼簿。

  • 全部複製為 cURL。複製所有要求,做為 cURL 指令鏈結。

  • 全部複製為 PowerShell。複製所有要求,做為 PowerShell 指令鏈結。

  • 全部複製為擷取內容。複製所有要求,做為擷取呼叫的鏈結。

  • 全部複製為 Node.js 擷取內容。將所有要求複製到 Node.js 擷取呼叫的鏈結。

  • 全部複製為 HAR 格式。將所有要求複製為 HAR 資料。

選取「複製」選項。

變更網路面板的版面配置

您可以展開或收合「Network」面板 UI 中的部分,專心處理重要事務。

隱藏篩選器窗格

開發人員工具預設會顯示篩選器窗格。按一下「Filter」圖示 [篩選器]。 即可隱藏。

「隱藏篩選器」按鈕。

使用大型要求資料列

如要在網路要求資料表中增加空白字元,請使用大型資料列。有些資料欄在使用大型資料列時,還可以取得一些更多資訊。例如,Size 資料欄的底部值是要求的未壓縮大小,Priority 欄會同時顯示初始 (底部值) 和最終 (頂端值) 擷取優先順序。

開啟「設定」[設定]。,然後按一下「大量要求資料列」,即可查看大型資料列。

已啟用大型要求資料列。

隱藏總覽軌跡

根據預設,開發人員工具會顯示「總覽」測試群組。開啟「設定」圖示 [設定]。,然後取消勾選「顯示總覽」核取方塊即可隱藏。

節目總覽核取方塊。