網路功能參考

本文是 網路 工具的功能驅動清查。 使用 網路 工具來檢查網頁的網路活動。 如需 網路 工具的逐步解說和簡介，請參閱 檢查網路活動。

詳細內容：

• 記錄網路要求
  • 停止錄製網路要求
  • 清除要求
  • 跨頁面載入儲存要求
  • 在頁面載入期間擷取螢幕快照
• 變更加載行為
  • 停用瀏覽器快取來模擬第一次造訪者
  • 手動清除瀏覽器快取
  • 模擬脫機
  • 模擬緩慢的網路連線
  • 手動清除瀏覽器 Cookie
  • 覆寫使用者代理程式
• 設定使用者代理程式用戶端提示
• 篩選要求
  • 依屬性篩選要求
  • 依類型篩選要求
  • 依時間篩選要求
  • 隱藏資料 URL
• 排序要求
  • 依數據行排序
  • 依活動階段排序
• 分析要求
  • 顯示要求的計時關聯性
  • 顯示回應本文的預覽
  • 顯示回應本文
  • 顯示 HTTP 標頭
  • 顯示查詢字串參數
  • 顯示 Cookie
  • 顯示要求的計時明細
  • 顯示啟動器和相依性
  • 顯示載入事件
  • 顯示要求總數
  • 顯示下載大小總計
  • 顯示造成要求的堆疊追蹤
  • 顯示資源的未壓縮大小
• 匯出要求數據
  • 將所有網路要求儲存至 HAR 檔案
  • 將一或多個要求複製到剪貼簿
  • 將格式化的回應 JSON 複製到剪貼簿
  • 將屬性值從網路要求複製到剪貼簿
• 變更 [網络] 面板的版面配置
  • 隱藏 [篩選] 窗格
  • 巨量要求數據列
  • 隱藏 [概觀] 窗格

記錄網路要求

根據預設，只要 DevTools 已開啟，DevTools 就會記錄 網路 工具中的所有網路要求。

停止錄製網路要求

若要停止錄製要求：

1. 在 [網络 ] 工具上，按兩下 [ 停止錄製網络記錄 ] () ]。 它會變成灰色，表示DevTools不再錄製要求。

2. 當網路工具處於焦點時，按 Ctrl+E (Windows、Linux) 或 Command+E (macOS) 。

清除要求

若要清除 [要求] 數據表中的所有要求，請在 [網络 ] 工具中，按兩下 [ 清除網络記錄 檔] () ] 按鈕：

或者，在網路工具有焦點時，按 Ctrl+L (Windows、Linux、macOS) 或 Command+K (macOS) 。

跨頁面載入儲存要求

若要跨頁面載入儲存要求，請在 [網络 ] 工具上選取 [ 保留記錄] 複選框：

DevTools 會儲存所有要求，直到您停用 保留記錄為止。

在頁面載入期間擷取螢幕快照

您可以擷取螢幕快照來分析使用者在等候頁面載入時所顯示的內容。

若要啟用螢幕快照：

1. 在 DevTools 中，開啟 [網络 ] 工具。

2. 在 [網络 ] 工具的右上方，按兩下 [網络設定 ] (齒輪) 圖示。 隨即會出現一列複選框。

3. 選取 [擷 取螢幕快照] 複選 框：

   

若要擷取螢幕快照：

1. 當 網路 工具有焦點時，請按 Ctrl+F5 重新整理頁面。 螢幕快照會在頁面載入期間擷取，縮圖會顯示在複選框列下方。

   您可以與螢幕快照互動，如下所示。

2. 將滑鼠停留在螢幕快照上，以顯示擷取螢幕快照的點。 [概 觀 ] 圖表窗格上會顯示黃色垂直線。

   

3. 按兩下螢幕快照的縮圖，以篩選出擷取螢幕快照之後發生的任何要求。

4. 按兩下螢幕快照縮圖以放大並檢視螢幕快照。

5. 按 Esc 關閉螢幕快照查看器。

變更加載行為

停用瀏覽器快取來模擬第一次造訪者

若要模擬第一次使用者如何體驗您的網站，請開啟 [ 停用快取 ] 複選框。 DevTools 會停用瀏覽器快取。 這項功能會更精確地模擬第一次用戶的體驗，因為會在重複造訪時從瀏覽器快取提供要求。

[ 停用快取] 複選框：

從網路條件工具停用瀏覽器快取

從 [網络] 工具，您可以在 [快速檢視] 面板中開啟 [網络條件] 工具，然後從該處停用瀏覽器快取：

1. 在 [網络 ] 工具中，按兩下 [ 更多網络條件 ( 按鈕。 [網路條件] 工具會在 [快速檢視] 面板中開啟。

2. 在 [ 網络條件 ] 工具中，選取 [ 停用快取] 複選框：

   

另請參閱:

• 網路條件工具

手動清除瀏覽器快取

若要隨時手動清除瀏覽器快取，請以滑鼠右鍵按兩下 [要求 ] 資料表中的任何位置，然後選取 [ 清除瀏覽器快取]：

模擬脫機

名為「漸進式 Web Apps ( PWA) 」的 Web 應用程式類別，能夠在服務工作者的協助下離線運作。 當您建置這種類型的應用程式時，您可能會發現快速模擬沒有數據連線的裝置很有用。

若要模擬脫機網路體驗，請選取 [ 無節流 ] 下拉功能表 >[脫機預設>]。

[脫機] 下拉功能表：

模擬緩慢的網路連線

從 [ 無節流 ] 下拉功能表模擬慢速 3G、快速 3G 和其他連線速度。

[節流] 下拉功能表：

您可以從不同的預設選擇，例如慢速 3G 或快速 3G。 若要新增您自己的自定義預設值，請開啟 [節流] 功能表，然後選取 [ 自定義>新增]。

DevTools 會在 網路 工具旁邊顯示警告圖示，提醒您已啟用節流。

另請參閱檢查網路活動中模擬較慢的網路連線。

從網路條件工具模擬緩慢的網路連線

從 [網络] 工具，您可以在 [快速檢視] 面板中開啟 [網络條件] 工具，然後從該處節流網络連線：

1. 在 [網络 ] 工具中，按兩下 [ 更多網络條件 ] ([ 按鈕。 [網路條件] 工具會在 [快速檢視] 面板中開啟。

2. 在 [網络條件 ] 工具的 [ 網络節流 ] 功能表中，選取連線速度。

另請參閱:

• 網路條件工具

手動清除瀏覽器 Cookie

若要隨時手動清除瀏覽器 Cookie，請以滑鼠右鍵按兩下 [要求] 資料表中的任何位置，然後選取 [ 清除瀏覽器 Cookie]。

覆寫使用者代理程式

若要手動覆寫使用者代理程式：

1. 在 [網络 ] 工具中，按兩下 [ 更多網络條件 ( 。 [網路條件] 工具會在 [快速檢視] 面板中開啟。

2. 在 [ 網络條件 ] 工具中，清除 [ 使用瀏覽器預設 ] 複選框。 其他控制件會變成可用。

3. 從功能表中選取使用者代理程式選項，或在文字框中輸入自定義使用者代理程式。

設定使用者代理程式用戶端提示

如果您的網站採用使用者代理程式用戶端提示，而您要進行測試，您可以在 [網路條件 ] 工具或 [ 模擬行動裝置] 中設定它們 (裝置模擬) 。

若要在 網路條件 工具中設定使用者代理程式用戶端提示：

1. 在 [網络 ] 工具中，按兩下 [ 更多網络條件 ] ([ 。 [網路條件] 工具會在 [快速檢視] 面板中開啟。

2. 在 [ 使用者代理程式] 區段中，清除 [ 使用瀏覽器預設 ] 複選框，然後展開 [使用者代理程式用戶端提示]：

   

3. 在 [ 使用者代理程式] 下拉式清單中，選取預先定義的瀏覽器和裝置。 或者，接受 [ 自定義...] 的預設值，然後在 [ 輸入自定義使用者代理 程式] 文本框中輸入資訊。

4. 針對預先定義或自定義) (選擇，請指定使用者代理程式用戶端提示，如下所示：

   • 品牌 和 版本， 例如 Edge 和 92。 若要新增多個品牌/版本組，請按兩下 [+ 新增品牌]。
   • 完整瀏覽器版本 ，例如 92.0.1111.0。
   • 平臺 和 版本， 例如 Windows 和 10.0。
   • 架構 ，例如 x86。
   • 裝置型號 ，例如 Galaxy Nexus。

   您可以設定或變更任何使用者代理程式用戶端提示;不需要任何值。

5. 選取 [更新]。

6. 若要確認變更，請按兩下 [主控台 ]，然後輸入 navigator.userAgentData。 視需要展開結果，以檢視使用者代理程序數據的變更。

另請參閱:

• 從您的網站偵測 Microsoft Edge 中的使用者代理程式用戶端提示。

篩選要求

您可以依屬性、類型或時間篩選要求，而且可以隱藏資料 URL。

依屬性篩選要求

使用 [ 篩選] 文本框，依屬性篩選要求，例如要求的網域或大小。

如果未顯示文字框，[ 篩選 ] 窗格可能會隱藏起來。 如需詳細資訊，請 參閱隱藏 [篩選] 窗格。

[ 篩選] 文字框：

您可以同時使用多個屬性，方法是以空格分隔每個屬性。 例如， mime-type:image/png larger-than:1K 會顯示大於 1 KB 的所有 PNG。 多重屬性篩選條件相當於 AND 作業。 OR 目前不支援作業。

支援的屬性完整清單：

Property	詳細資料
domain	只顯示來自指定網域的資源。 您可以使用通配符 (*) 包含多個網域。 例如， 會 *.com 顯示所有功能變數名稱中以結尾的 .com資源。 DevTools 會在自動完成下拉功能表中填入所有找到的網域。
has-response-header	顯示包含指定 HTTP 回應標頭的資源。 DevTools 會在自動完成下拉功能表中填入所有找到的響應標頭。
is	使用 is:running 來尋找 WebSocket 資源。
larger-than	顯示大於指定大小的資源，以位元組為單位。 設定的 1000 值相當於設定的 1k值。
method	顯示透過指定 HTTP 方法類型擷取的資源。 DevTools 會在下拉功能表中填入所有找到的 HTTP 方法。
mime-type	顯示指定 MIME 類型的資源。 DevTools 會在下拉功能表中填入找到的所有MIME類型。
mixed-content	顯示所有混合內容資源 (mixed-content:all) ，或只顯示目前顯示 (mixed-content:displayed) 。
scheme	顯示透過未受保護的 HTTP () scheme:http 或受保護的 HTTPS () scheme:https 擷取的資源。
set-cookie-domain	顯示具有 Set-Cookie 標頭且 Domain 屬性符合指定值的資源。 DevTools 會在自動完成中填入所有找到的 Cookie 網域。
set-cookie-name	顯示具有名稱符合指定值之標頭的資源 Set-Cookie 。 DevTools 會在自動完成中填入所有找到的 Cookie 名稱。
set-cookie-value	顯示具有 Set-Cookie 標頭且值符合指定值的資源。 DevTools 會在自動完成中填入所有找到的 Cookie 值。
status-code	顯示符合特定 HTTP 狀態代碼的資源。 DevTools 會在自動完成下拉功能表中填入所有找到的狀態代碼。

依類型篩選要求

若要依要求類型篩選要求，請按兩下 [網络 ] 面板上的按鈕：

• XHR
• JS
• CSS
• Img
• 媒體
• Font
• Doc
• WS - WebSocket。
• 資訊清單
• 其他 - 這裡未列出的任何其他類型。

如果按鈕未出現，[ 篩選 ] 窗格可能會隱藏起來。 請參閱 隱藏 [篩選] 窗格。

若要同時啟用多個類型篩選，請按住 Ctrl (Windows、Linux) 或 命令 (macOS) ，然後按下篩選條件。

使用 類型 篩選器來顯示 JS、CSS 和檔案資源：

依時間篩選要求

按兩下 [ 概觀 ] 窗格的左側或向右拖曳，只顯示在該時間範圍中作用中的要求。 篩選條件包含在內。 反白顯示期間作用中的任何要求都會顯示。

篩選掉在 300 毫秒左右非作用中的任何要求：

隱藏資料 URL

數據 URL 是內嵌到其他檔中的小型檔案。 在以 開頭 data: 的 Requests 數據表中顯示的任何要求都是數據 URL。

若要隱藏要求，請關閉 [ 隱藏資料 URL] 複 選框：

排序要求

根據預設，Requests 數據表中的要求會依起始時間排序，但您可以使用其他準則來排序數據表。

依數據行排序

按兩下 [要求] 中任何數據行的標頭，依該數據行排序要求。

依活動階段排序

若要變更瀑布式排序要求的方式：

• 以滑鼠右鍵按兩下 [要求] 資料表的標頭，按兩下 [ 瀑布圖]，然後選取下列其中一個選項：

  • 開始時間 - 起始的第一個要求會放在頂端。

  • 回應時間 - 第一個開始下載的要求會放在頂端。

  • 結束時間 - 完成的第一個要求會放在頂端。

  • 總持續時間 - 連線設定最短的要求和要求或回應會放在頂端。

  • 延遲 - 等候回應最短時間的要求會放在頂端。

這些描述假設每個個別選項的排名從最短到最長。 按兩下 瀑布圖 數據行的標頭以反轉順序。

下列顯示依總持續時間排序瀑布圖。 每個橫條較淺的部分是等候時間，而較深的部分則是下載位元組所花費的時間：

分析要求

只要 DevTools 已開啟，就會記錄 網路 工具中的所有要求。 使用 網路 工具來分析要求。

顯示要求的記錄

使用 Requests 數據 表可顯示 DevTools 開啟時所發出之所有要求的記錄。 若要顯示每個項目的詳細資訊，請按兩下或暫留在要求上。

Requests 資料表預設會顯示下列資料列：

• 名稱。 資源的檔名，或資源的標識符。
• 狀態。 HTTP 狀態碼。
• 類型。 所要求資源的MIME類型。
• 啟動器。 下列物件或行程可以起始要求：
  • 剖析器。 HTML 剖析器。
  • 重新導向。 HTTP 重新導向。
  • 腳本。 JavaScript 函式。
  • 其他。 其他一些程式或動作，例如透過鏈接瀏覽至頁面，或在網址列中輸入URL。
• 大小。 響應標頭的合併大小加上回應本文，如伺服器所傳遞。
• 時間。 總持續時間，從要求開始到響應中最後一個字節的收據。
• 已完成。 HTTP 快取或應用程式的服務背景工作角色是否已完成要求。
• 瀑布圖。 每個要求活動的視覺效果明細。

新增或移除數據行

以滑鼠右鍵按兩下 Requests 資料表的標頭，然後選取資料行名稱來隱藏或顯示它。 目前顯示的數據行旁邊有複選標記。

新增回應標頭的數據行

若要將自定義數據行新增至 Requests 數據表，請以滑鼠右鍵按兩下 [要求] 資料表的標頭，然後選取 [ 回應標>頭管理標頭數據行]。 [ 管理標頭數據行] 彈出視窗隨即開啟。 按兩下 [ 新增自定義標頭] 按鈕，輸入自定義標頭名稱，然後按下 [ 新增]。

顯示要求的計時關聯性

使用瀑布圖來顯示要求的時間關聯性。 瀑布圖的默認組織會使用要求的開始時間。 因此，最左邊的要求會比向右更遠的要求更早開始。

若要查看您可以排序瀑布圖的不同方式，請移至 [ 依活動排序] 階段。

[ 要求 ] 窗格的 [瀑布圖] 數據行：

顯示回應本文的預覽

若要預覽 HTTP 回應本文的內容：

1. 在 [要求] 數據表中，按兩下要求的名稱。

2. 在提要欄位中，選取 [預覽] 索引 標籤：

   

顯示回應本文

若要顯示要求的回應本文：

1. 在 [要求] 數據表中，按兩下要求的名稱。

2. 在提要欄位中，選取 [ 回應] 索引 標籤：

   

顯示 HTTP 標頭

若要顯示有關要求的 HTTP 標頭資料：

1. 在 [要求] 數據表中，按兩下要求的名稱。

2. 在提要欄位中，選取 [標頭] 索引標籤 ：

   

顯示查詢字串參數

若要以人類可讀取的格式顯示 HTTP 要求的查詢字串參數：

1. 在 [要求] 數據表中，按兩下要求的名稱。
2. 在提要欄位中，選取 [ 承載] 索引標籤 ：

若要改為顯示查詢字串參數的來源，請按兩下 [ 檢視來源]。

顯示 URL 編碼的查詢字串參數

若要以人類看得到的格式顯示查詢字串參數，但保留編碼：

1. 在 [要求] 數據表中，按兩下要求的名稱。
2. 在提要欄位中，選取 [ 承載] 索引標籤 。
3. 按兩下 [檢視 URL 編碼]。

顯示 Cookie

若要顯示在要求的 HTTP 標頭中傳送的 Cookie：

1. 在 [要求] 數據表中，按兩下要求的名稱。

2. 在提要欄位中，選取 [ Cookie] 索引卷 標：

   

顯示要求的計時明細

若要顯示要求的計時明細：

1. 在 [要求] 數據表中，按兩下要求的名稱。

2. 在提要欄位中，選取 [ 計時] 索引標籤 。

   

如需更快存取數據的方式，請參閱 預覽時間明細。

如需可能顯示在 [計時 ] 面板中之每個階段的詳細資訊，請參閱 計時明細階段說明。

預覽計時明細

若要顯示要求時間明細的預覽，請在 [要求] 數據表的 [瀑布 式] 數據行中，將滑鼠停留在要求的專案上。

預覽要求的計時明細：

若要檢視數據而不暫留，請參閱目前區段的頂端 ，顯示要求的時間明細。

計時明細階段說明

每個階段都可能會出現在 [ 計時] 索 引標籤中：

• 佇列。 當下列任一項成立時，瀏覽器佇列會要求

  • 有較高的優先順序要求。
  • 此來源已經開啟六個 TCP 連線，這是限制。 僅適用於 HTTP/1.0 和 HTTP/1.1。
  • 瀏覽器會短暫配置磁碟快取中的空間。

• 已停止。 要求可能會因為 佇列中所述的任何原因而停止。

• DNS 查閱。 瀏覽器正在解析要求的IP位址。

• 初始連線。 瀏覽器正在建立連線，包括 TCP 交握和重試，以及交涉安全套接字層 (SSL) 。

• Proxy 交涉。 瀏覽器正在與 Proxy 伺服器交涉要求。

• 已傳送要求。 正在傳送要求。

• ServiceWorker 準備。 瀏覽器正在啟動服務背景工作角色。

• 要求 ServiceWorker。 要求正在傳送給服務工作者。

• 等候 (TTFB) 。 瀏覽器正在等候回應的第一個字節。 TTFB 代表 Time To First Byte。 此時間包括一次延遲來回行程，以及伺服器準備回應所花費的時間。

• 內容下載。 瀏覽器正在接收回應。

• 接收推送。 瀏覽器會透過 HTTP/2 伺服器推送接收此回應的數據。

• 讀取推送。 瀏覽器正在讀取先前收到的本機數據。

顯示啟動器和相依性

若要顯示要求的啟動器和相依性，請保留 Shift ，並將滑鼠停留在 Requests 數據 表中的要求上。

• 起始暫留要求的要求會以綠色顯示。
• 暫留要求的相依性會以紅色顯示。

當 Requests 數據表依時間順序排序時，如果您將滑鼠停留在一行上，則其前面的行會顯示綠色要求。 綠色要求是相依性的起始端。 如果前一行顯示另一個綠色要求，則較高的要求是啟動器的啟動器。 依此類推。

顯示載入事件

DevTools 會在網路工具的DOMContentLoaded多個位置顯示 和 load 事件的時間：

• 在具有垂直線的 [ 概觀 ] 窗格中。
• 在要求數據表的 瀑布 圖數據行中，具有垂直線條。
• 在 [ 摘要] 窗格的 [網络 ] 工具底部，包含計時標籤。

事件 DOMContentLoaded 為藍色，且 load 事件為紅色。

顯示要求總數

要求總數會列在 [ 摘要 ] 窗格的 [ 網络 ] 工具底部。

注意

此數目只會追蹤自 DevTools 開啟後所記錄的要求。 如果在開啟 DevTools 之前發生其他要求，則不會計算這些要求。

顯示下載大小總計

要求的下載大小總計會列在 [ 摘要 ] 窗格的 [網络 ] 工具底部。

注意

此數目只會追蹤自 DevTools 開啟後所記錄的要求。 如果在開啟 DevTools 之前發生其他要求，則不會計算先前的要求。

若要確認瀏覽器取消壓縮每個項目之後的資源有多大，請參閱 顯示未壓縮的資源大小。

顯示造成要求的堆疊追蹤

在 JavaScript 語句要求資源之後，將滑鼠停留在 [ 啟動器 ] 數據行上，以顯示前置至要求的堆棧追蹤。

顯示資源的未壓縮大小

同時檢視資源的傳輸大小與未壓縮大小：

1. 在 [網络 ] 工具的右上方，按兩下 [網络設定 ] (齒輪) 圖示。 隨即會出現一列複選框。

2. 開啟 [ 大要求數據列] 複選框。

3. 檢查 [要求] 資料表中的 [ 大小 ] 資料行。 頂端值是傳輸的大小，而底部值是瀏覽器解壓縮后資源的大小：

   

匯出要求數據

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

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

1. 在 [ 要求] 數據 表中，以滑鼠右鍵按下要求，然後選取 [ 全部儲存為具有內容的 HAR]。

   

2. DevTools 會將您開啟 DevTools 後發生的所有要求儲存至 HAR 檔案。 您無法篩選要求，也無法儲存單一要求。

儲存 HAR 檔案之後，您可以將 HAR 檔案拖放到 Requests 數據表中 ，將它匯回 DevTools 以進行分析。

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

在 [要求] 數據表的 [ 名稱 ] 數據行下，以滑鼠右鍵按下要求，按兩下 [ 複製]，然後選取下列其中一個選項：

名稱	詳細資料
複製連結位址	將要求的 URL 複製到剪貼簿。
複製回應	將回應本文複製到剪貼簿。
複製為擷取
複製為 cURL	將要求複製為 cURL 命令。
全部複製為擷取
全部複製為 cURL	將所有要求複製為 cURL 命令鏈結。
全部複製為 HAR	將所有要求複製為 HAR 數據。

將格式化的回應 JSON 複製到剪貼簿

若要複製 JSON 回應的格式化 JSON 資料：

1. 在 [要求] 數據表中，按兩下導致 JSON 回應的要求名稱。

2. 在提要欄位中，選取 [ 預覽] 索引 標籤。

3. 以滑鼠右鍵按兩下格式化 JSON 回應預覽的第一行，然後選取 [ 複製值]。

   

   您現在可以將值貼到任何編輯器來檢閱它。

將屬性值從網路要求複製到剪貼簿

若要將屬性值從網路要求複製到剪貼簿：

1. 在 [要求] 數據表中，按兩下要求的名稱。
2. 在提要欄位中，選取 [ 承載] 索引標籤 ：
3. 展開下列其中一個區段。
   • 要求承載 (JSON)
   • 表單數據
   • 查詢字串參數
   • 要求標頭
   • 回應標頭
4. 以滑鼠右鍵按鍵按鍵，然後選取 [ 複製值]。 您現在可以將值貼到任何編輯器來檢閱它。

變更 [網络] 面板的版面配置

您可以展開或折迭 網路 工具 UI 的區段，以專注重要資訊。

隱藏 [篩選] 窗格

根據預設，DevTools 會顯示 [ 篩選] 窗格。 若要隱藏 [ 篩選] 窗格，請選取 [ 篩選 () ]。

巨量要求數據列

當您想要在網路要求資料表中使用更多空格符時，請使用巨量要求數據列。 使用大型數據列時，某些數據行也會提供更多資訊。 例如， Size 資料行的底部值是要求的未壓縮大小。

若要啟用大型數據列，請選取 [巨量要求數據列] 複選框。 [要求 ] 窗格 中大型要求數據列的範例：

隱藏 [概觀] 窗格

根據預設，DevTools 會顯示 [ 概觀 ] 窗格。 若要隱藏 [ 概觀] 窗格，請清除 [顯示概觀 ] 複選框。

另請參閱

• 檢查網路活動 - 逐步解說和 網路 工具簡介。

注意事項

此頁面的部分是根據Google所建立和 共用的工作進行 修改，並根據 Creative Commons Attribution 4.0 國際授權中所述的條款使用。 原始頁面 可在這裡 找到，並由 Basques 撰寫。

此工作是根據 Creative Commons Attribution 4.0 International License 授權。