網路功能參考

[ 網路 ] 工具具有下列功能，可檢查網頁的網路活動。

如需 網路 工具的逐步解說和簡介，請參閱 檢查網路活動。

詳細內容：

• 記錄網路要求
  • 停止錄製網路要求
  • 清除要求
  • 在頁面載入期間儲存要求
  • 在頁面載入期間 Capture screenshots
  • 重新傳送要求
  • 編輯要求並以擷取呼叫的形式重新傳送
• 變更載入行為
  • 透過停用瀏覽器快取來模擬初次來訪的訪客
    • 從網路狀況工具停用瀏覽器快取
  • 手動清除瀏覽器快取
  • 離線模擬
  • 模擬緩慢的網路連線
    • 建立自訂節流設定檔
    • 節流 WebSocket 連線
    • 從 [網路狀況] 工具模擬緩慢的網路連線
  • 手動清除瀏覽器 Cookie
  • 覆寫 HTTP 回應標頭
  • 覆寫使用者代理程式
• 設定使用者代理程式用戶端提示
• 搜尋要求
• 篩選要求
  • 依屬性篩選要求
  • 依類型篩選要求
  • 依時間篩選要求
  • 隱藏資料 URL
  • 隱藏額外資訊 URL
  • 僅顯示具有封鎖回應 Cookie 的要求
  • 只顯示封鎖的要求
  • 只顯示第三方要求
• 排序要求
  • 依欄排序
  • 依活動階段排序
• 分析要求
  • 顯示要求記錄檔
    • 新增或移除欄
    • 為回應標題新增自訂資料欄位
  • 依內嵌框架將要求分組
  • 顯示要求的時間關係
  • 分析 WebSocket 連線的訊息
  • 分析串流中的事件
  • 顯示回應內文的預覽
  • 顯示回應內文
  • 顯示 HTTP 標頭
    • 檢視 HTTP 標頭來源
    • 臨時標頭警告
  • 檢視要求承載 (查詢字串參數和表單資料)
    • 檢視承載來源
    • 顯示 URL 編碼的查詢字串參數
  • 顯示 Cookie
  • 顯示要求的時間明細
    • 預覽時間明細
    • 時間明細階段說明
    • 分析服務工作者要求路由
  • 顯示啟動程式和相依性
  • 顯示載入事件
  • 顯示要求總數
  • 顯示總下載大小
  • 顯示導致要求的堆疊追蹤
  • 顯示資源的未壓縮大小
• 匯出要求資料
  • 將所有網路要求儲存至 HAR 檔案
  • 將 HAR 檔案匯入 DevTools 進行分析
  • 將網路要求複製到剪貼簿
  • 將格式化回應 JSON 複製到剪貼簿
  • 將網路要求中的屬性值複製到剪貼簿
• 變更網路工具的版面配置
  • 隱藏篩選窗格
  • 使用大型要求列
  • 隱藏 [概觀] 窗格
• 另請參閱

記錄網路要求

根據預設，只要 DevTools 處於開啟狀態，DevTools 就會在 網路 工具中記錄所有網路要求。

例如：

1. 移至網頁，例如在新視窗或索引標籤中的 [ 檢查網路活動 ] 示範頁面。

2. 以滑鼠右鍵按一下網頁，然後選取 [檢查]。

   DevTools 隨即開啟。

3. 在開發工具中，選取 [ 網路 ] 工具。

4. 重新整理網頁。

   [停止錄製網路記錄] 按鈕為紅色且可供使用：

停止錄製網路要求

若要停止錄製要求：

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

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

清除要求

若要清除 [要求] 資料表中的所有要求，請在 [ 網路 ] 工具中，按一下 [ 清除網路記錄 ] ([ ) ] 按鈕：

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

另請參閱:

• 待辦事項應用程式

在頁面載入期間儲存要求

若要在頁面載入間儲存要求，請在 [網路 ] 工具上選取 [ 保留記錄 ] 核取方塊：

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

另請參閱:

• 待辦事項應用程式

在頁面載入期間 Capture screenshots

您可以擷取螢幕擷取畫面，以分析在等待頁面載入時為使用者顯示的內容。

若要啟用螢幕擷取畫面：

1. 在新視窗或索引標籤中移至網頁，例如 TODO 應用程式。

2. 以滑鼠右鍵按一下網頁，然後選取 [檢查]。

   DevTools 隨即開啟。

3. 在 DevTools 中，開啟 [網路 ] 工具。

4. 在 [網路 ] 工具右上角，按一下 [網路設定 ] (齒輪) 圖示。 隨即出現一列核取方塊。

5. 選取 [Capture screenshots] 核取方塊：

   

若要擷取螢幕擷取畫面：

1. 當 [網路 ] 工具有焦點時，按 Ctrl+F5 以重新整理頁面。 螢幕擷取畫面會在頁面載入期間進行，縮圖會顯示在核取方塊列下方。

   您可以按如下所示與螢幕擷取畫面互動。

2. 將游標停留在螢幕擷取畫面上以顯示擷取螢幕擷取畫面的時間點。 [ 概觀 ] 圖表窗格中顯示黃色垂直線。

   

3. 按一下螢幕擷取畫面的縮圖，篩選出擷取螢幕擷取畫面之後發生的任何要求。

4. 按兩下螢幕擷取畫面縮圖以放大並檢視螢幕擷取畫面。

5. 按 Esc 以關閉螢幕擷取畫面檢視器。

重新傳送要求

若要再次傳送網路要求而不重新載入網頁，請使用 [網路] 工具 [要求] 資料表中的 [重新傳送] 命令。

[ 重新傳送 ] 命令適用於下列要求類型：

• XHR
• 擷取
• JavaScript
• CSS
• 影像
• 媒體
• font
• WebAssembly
• 資訊清單
• 文字軌道
• 來源地圖

若要重新傳送要求：

1. 移至網頁，例如 網路工具參考示範，在新的視窗或索引標籤中。

2. 以滑鼠右鍵按一下網頁，然後選取 [檢查]。

   DevTools 隨即開啟。

3. 在開發工具中，選取 [ 網路 ] 工具。

4. 重新整理網頁。

   在 [網路 ] 工具的 [要求] 資料表中，會顯示下列項目的資料列：

   • devtools-network-reference/ (index.html)
   • style.css
   • script.js

5. 在示範網頁中，按一下 [傳送 XHR 要求 ] 按鈕。

   在 [網路 ] 工具的 [要求] 資料表中，新增一個 data.json 資料列。 [啟動器] 欄會讀取 script.js:20。

6. 在 [要求] 資料表中，以滑鼠右鍵按一下要求 data.json ，然後選取 [重新傳送]。

   或者，選取要求，然後按下 R。

   在 [網路 ] 工具的 [要求] 資料表中，新增第二 data.json 列。 [啟動器] 欄會顯示 [其他]：

   

如需啟動程式的相關資訊，請參閱：

• 顯示啟動端和相依性如下。
• 在 [檢查網路活動] 中記錄網路活動。

DevTools 會將 XHR 要求重新傳送為 XHR。 DevTools 會在傳送要求之前，先將其他支援的要求類型轉換成擷取要求。

按一下示範的 [傳送 XHR 要求] 按鈕 (，這會導致 JavaScript 傳送要求) ，[複製堆疊追蹤] 功能表項目會顯示在按滑鼠右鍵的 > [複製] 功能表中，以取得要求。 請參閱將 網路要求複製到剪貼簿。

編輯要求並以擷取呼叫的形式重新傳送

若要在重新傳送之前編輯網路請求，請使用 [網路] 工具的 [要求] 表格中的 [編輯並重新傳送為擷取] 命令。 此命令會導致開發工具將網路要求複製為主控台工具中的呼叫，fetch()您可以在此修改並傳送它。

[ 編輯並重新傳送為擷取] 命令適用於下列要求類型：

• XHR
• 擷取
• JavaScript
• CSS
• 影像
• 媒體
• font
• WebAssembly
• 資訊清單
• 文字軌道
• 來源地圖
• 文件
• 預先擷取
• Ping 要求

不同於將 XHR 要求重新傳送為 XHR 的 [ 重新傳送 ] 命令，編輯 和重新傳送為擷取 會將 XHR 和所有其他支援的要求類型 fetch() 轉換為呼叫。

[要求] 資料表中選用的 [執行內容] 資料行會顯示每個要求的來源執行內容。

若要以擷取呼叫的形式編輯並重新傳送要求：

1. 移至網頁，例如 網路工具參考示範，在新的視窗或索引標籤中。

2. 以滑鼠右鍵按一下網頁，然後選取 [檢查]。

   DevTools 隨即開啟。

3. 在開發工具中，選取 [ 網路 ] 工具。

4. 重新整理網頁。

   在 [網路 ] 工具的 [要求] 資料表中，會顯示下列項目的資料列：

   • devtools-network-reference/ (index.html)
   • style.css
   • script.js

5. 在示範網頁中，按一下 [傳送 XHR 要求 ] 按鈕。

   在 [網路 ] 工具的 [要求] 資料表中，新增一個 data.json 資料列。

6. 在 「要求」 資料表中，以滑鼠右鍵按一下您要修改的要求，例如 data.json 要求，然後選取 「編輯並重新傳送為擷取」。

   主 控台 工具會在 DevTools 底部的 抽屜 中開啟。

   重現要求的可 fetch() 編輯呼叫會新增至 主控台 提示字元。 產生的程式碼包含識別原始請求及其執行內容的註解。

   所產生程式碼上方的訊息，例如 Getting request to data.json 的可重新傳送複本，有一個連結 ( [ 網路 ] 工具中顯示原始要求的 URL) 要求：

   

   注意： 一次只能有一個要求在 主控台 提示字元中擱置。 如果您選取 編輯並重新傳送為 另一個要求的擷取，則新的 fetch() 呼叫會取代目前 的主控台 提示，而不會顯示警告。

7. 如果產生的註解會指示您選取執行內容，請使用主控台工具列中的 JavaScript 內容下拉式清單來選取執行內容 (，例如網路要求作為擷取呼叫重新傳送的頂) 。

8. 修改所產生 fetch() 呼叫中的 URL、方法、標頭或本文。

   部分不允許呼叫設定的要求 fetch() 標頭會保留為資訊性註解。

9. 按 Enter 傳送修改過的要求。

新要求會顯示在 網路 工具的 [要求] 資料表中。 [名稱] 資料行中的終端機圖示可識別該要求為來自主控台。

變更載入行為

透過停用瀏覽器快取來模擬初次來訪的訪客

若要模擬第一次使用網站的使用者體驗網站，請開啟 [停用快取 ] 核取方塊。 DevTools 停用瀏覽器快取。 此功能可更準確地模擬首次使用者的體驗，因為重複造訪時會從瀏覽器快取提供要求。

[ 停用快取] 核取方塊：

從網路狀況工具停用瀏覽器快取

您可以在 [網路] 工具中，開啟 DevTools 底部快速檢視面板中的 [網路狀況] 工具，然後從該處停用瀏覽器快取：

1. 在 [ 網路 ] 工具中，按一下 [ 其他網路狀況 ] ) 按鈕。 [網路狀況] 工具會在 DevTools 底部的快速檢視面板中開啟。

2. 在 [網路狀況 ] 工具中，選取 [ 停用快取] 核取方塊：

   

另請參閱:

• 網路狀況工具

手動清除瀏覽器快取

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

另請參閱:

• 待辦事項應用程式

離線模擬

名為 Progressive Web Apps ( PWA) 的 Web 應用程式能夠在服務工作者的協助下離線運作。 當您建置這類應用程式時，快速模擬沒有資料連線的裝置可能會很有用。

若要模擬離線網路體驗，請選取 無節流 下拉式功能表 >預設>離線。

[ 離線] 下拉式功能表：

模擬緩慢的網路連線

若要模擬快速 4G、慢速 4G 或 3G，請從頂端動作列的 [節流 ] 下拉式功能表中選取對應的預設：

您可以從不同的預設中選擇，例如：

• Fast 4G
• 慢速 4G
• 3G
• Offline

若要新增您自己的自訂預設集，請按一下 「節流」 功能表，然後選取 「自訂>新增」。

[ 網路 ] 工具的索引標籤上會顯示警告圖示，提醒您已啟用節流：

另請參閱:

• 在 [檢查網路活動] 中模擬較慢的網路連線。
• 待辦事項應用程式

建立自訂節流設定檔

除了預設 （例如慢速或快速 4G） 之外，您還可以添加自己的自訂節流設定檔。

若要建立自訂節流設定檔：

1. 移至網頁，例如在新視窗或索引標籤中的 [ 檢查網路活動 ] 示範頁面。

2. 以滑鼠右鍵按一下網頁，然後選取 [檢查]。

   DevTools 隨即開啟。

3. 選取 [網路 ] 工具。

4. 在 [節流 ] 功能表的 [自訂 ] 區段中，選取 [新增]。

   或者，選取 自訂和控制開發工具>設定>節流。

   DevTools 設定 頁面隨即開啟，並選取 [節流 ] 頁面。

5. 在 [網路節流設定檔] 區段中，按一下 [新增設定檔 ] 按鈕。

   範例值如下所示，且將在下一節中使用。

6. 在 [設定檔名稱 ] 文字方塊中，輸入 10kbps。

7. 在 [下載] 文字方塊中，輸入 10 (，換取 10 kbit/s) 。

8. 在 [上傳 ] 文字方塊中，輸入 10 (，以獲得 10 kbit/s) 。

9. 在 [延遲 ] 文字方塊中，輸入 10 (10 毫秒) 。

10. 在 [ 封包遺失] 文字方塊中，輸入 1 (代表 1%) 。

11. 在 [封包佇列長度 ] 文字方塊中，輸入 10。

12. 選取 [ 封包重新排序 ] 核取方塊：

    

13. 按一下 [新增] 按鈕。

    自訂節流設定檔隨即顯示：

    

14. 在 [ 設定 ] 窗格中，按一下 [ 關閉 (X) ] 按鈕。

15. 選取 [網路 ] 工具。

16. 在 [節流] 下拉式功能表的 [自訂] 區段中，選取您的自訂節流設定檔，例如 10kbps：

    

    [網路] 索引標籤中會顯示警告 () 圖示，提醒您已啟用節流。

另請參閱:

• 在節流 CPU 或網路中設定自訂網路節流設定檔。

節流 WebSocket 連線

除了 HTTP 要求之外，DevTools 還可以節流 WebSocket 連線。 我們將使用上一節中建立的慢速自訂節流設定檔，來顯示節流的 WebSocket 連線在您的網頁上的影響。

若要觀察 WebSocket 節流：

1. 執行上一節中的步驟， 建立自訂節流設定檔。

2. 在新視窗或索引標籤中移至使用 WebSocket 的頁面，例如 Online WebSocket Tester。

3. 在頁面上，建立 WebSocket 連線。

   如果您使用 線上 WebSocket 測試人員 網頁，請按一下 [連線 ] 按鈕。

   如果您沒有建立 PieSocket 帳戶來取得 API 權杖，網頁會顯示「Connection Established - {“error”：“Unknown api key”}」。

   如果您創建 PieSocket 帳戶來獲取 API 令牌，則網頁僅顯示“連接已建立”。

4. 以滑鼠右鍵按一下網頁，然後選取 [檢查]。

   DevTools 隨即開啟。

5. 在 DevTools 的 [ 網路 ] 工具的 [ 節流 ] 下拉式功能表中，選取 [ 自訂>10kbps]。

   該選項是在上一節 建立自訂節流設定檔中建立的。

6. 在 線上 WebSocket Tester 網頁的訊息文字方塊中，刪除 [DevTools no 節流]，並輸入 具有節流的 DevTools。

7. 在 Online WebSocket Tester 網頁中，按一下 [ 傳送 ] 按鈕。

   Online WebSocket Tester 網頁內的主控台會顯示具有節流的開發工具。

8. 在 [網路 ] 工具頂端，選取 [ 通訊端 篩選] 按鈕，如下) 所示 (。

9. 在資料表中，按一下您的連線名稱，例如 channel_123？api_key=...。

   索引標籤隨即出現。

10. 選取 [ 訊息 ] 索引標籤 (如下所示) 。

    隨即出現在用戶端與伺服器之間傳送的 WebSocket 訊息。

    [ 時間 ] 欄會顯示接收或傳送郵件的時間。 這些時間值會反映節流網路連線。

從 [網路狀況] 工具模擬緩慢的網路連線

您可以在 [網路] 工具中，開啟 DevTools 底部快速檢視面板中的 [網路狀況] 工具，然後從該處節流網路連線：

1. 在 [網路] 工具中，按一下 [其他網路狀況) 按鈕。 [網路狀況] 工具會在 DevTools 底部的快速檢視面板中開啟。

2. 在 [ 網路狀況 ] 工具的 [ 網路節流 ] 功能表中，選取連線速度。

另請參閱:

• 網路狀況工具

手動清除瀏覽器 Cookie

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

覆寫 HTTP 回應標頭

另請參閱:

• 使用本機複本覆寫網頁資源 ([覆寫] 索引標籤)
• 在 [在本機覆寫網頁內容和 HTTP 回應標頭] 中的 [覆寫檔案] 和 HTTP 回應標頭。

覆寫使用者代理程式

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

1. 在 [ 網路 ] 工具中，按一下 [其他網路狀況 ] ( 按鈕。 [網路狀況] 工具會在 DevTools 底部的快速檢視面板中開啟。

2. 在 [網路狀況 ] 工具中，清除 [使用瀏覽器預設] 核取方塊。 其他控制項將可供使用。

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

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

如果您的網站會使用使用者代理程式用戶端提示，且您想要加以測試，您可以在 [網路狀況 ] 工具或在 [ 裝置模擬] ([裝置模擬]) 中進行設定。

若要在 [網路狀況 ] 工具中設定使用者代理程式用戶端提示：

1. 在 [ 網路 ] 工具中，按一下 [ 其他網路狀況 ] ( 按鈕。 [網路狀況] 工具會在 DevTools 底部的快速檢視面板中開啟。

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

   

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

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

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

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

5. 選取 [更新]。

6. 若要驗證變更，請按一下 [主控台] 並輸入 navigator.userAgentData。 視需要展開結果，以檢視使用者代理程式資料的變更。

另請參閱:

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

搜尋要求

若要跨要求標頭、承載和回應進行搜尋：

1. 在 [ 網路 ] 工具中，按一下 [搜尋 ] ) 按鈕。 或者，Windows (按 Ctrl+F，Linux) 或 macOS) (按 Command+F。

   [ 搜尋 ] 索引標籤隨即在 [網路 ] 工具的左側開啟。

2. 在 [尋找] 文字方塊中輸入查詢字串，然後按 Enter。

   或者，按一下 [大小寫相符] 按鈕以開啟區分大小寫。 或者，按一下 [規則運算式 ] 按鈕以開啟規則運算式。

3. 按一下其中一個搜尋結果。 [ 網路 ] 工具會以黃色醒目提示符合的要求。 [ 網路 ] 工具也會開啟 [標題 ] 或 [回應 ] 索引標籤，並醒目提示與該處相符的字串 （如果有）。

若要重新整理搜尋結果，請在 [搜尋 ] 索引標籤中，按一下 [ 重新整理 ] ) 按鈕。

若要清除搜尋結果，請在 [ 搜尋 ] 索引標籤中，按一下 [ 清除搜尋 ] ([ ) 按鈕。

如需有關可在 DevTools 中搜尋的所有方式的詳細資訊，請參閱 使用 [搜尋] 工具尋找頁面的來源檔案

篩選要求

您可以依屬性、類型或時間篩選要求，也可以隱藏資料 URL。 [ 其他篩選條件] 下拉式清單包含下列選項和狀態核取記號：

• 隱藏資料 URL
• 隱藏額外資訊 URL
• 封鎖的回應 Cookie
• 封鎖的要求
• 協力廠商要求

下拉式清單左側有一個數字，可讓您知道在下拉式清單中選取了多少個篩選。

依屬性篩選要求

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

如果文字方塊未顯示，[ 篩選] 窗格可能已隱藏;請參閱下方的 [隱藏篩選窗格]。

[ 篩選] 文字方塊：

若要反轉篩選，請選取 [篩選] 方塊旁的 [反轉] 核取方塊。

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

支援屬性的完整清單：

Property	詳細資料
cookie-domain	顯示設定特定 Cookie 網域的資源。
cookie-name	顯示設定特定 Cookie 名稱的資源。
cookie-path	顯示設定特定 Cookie 路徑的資源。
cookie-value	顯示設定特定 Cookie 值的資源。
domain	僅顯示指定網域中的資源。 您可以使用萬用字元 (*) 包含多個網域。 例如，顯示來自所有以 結尾為 .com的網域名稱的資源。 *.com DevTools 會使用找到的所有網域填入自動完成下拉式功能表。
has-overrides	顯示已覆寫內容、標頭、任何覆寫 ([是) ] 或沒有覆寫 (沒有) 的要求。 您可以將對應的 Has overrides 資料行新增至要求資料表。
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 的資源。
priority	顯示優先順序層級符合指定值的資源。
resource-type	顯示資源類型的資源，例如影像。 DevTools 會使用遇到的所有資源類型填入自動完成下拉式清單。
response-header-set-cookie	在 [問題] 索引標籤中顯示原始Set-Cookie標頭。格式不正確且標頭不正確的 Set-Cookie Cookie 會在網路工具中標幟。
scheme	顯示透過未受保護的 HTTP () scheme:http 或受保護的 HTTPS () scheme:https 所擷取的資源。
set-cookie-domain	顯示具有符合指定值之屬性的Domain標頭資源Set-Cookie。 DevTools 會使用找到的所有 Cookie 網域填入自動完成。
set-cookie-name	顯示具有名稱符合指定值之標題的資源 Set-Cookie 。 DevTools 會使用找到的所有 Cookie 名稱填入自動完成。
set-cookie-value	顯示具有符合指定值之標頭的資源 Set-Cookie 。 DevTools 會使用找到的所有 Cookie 值填入自動完成。
status-code	顯示符合特定 HTTP 狀態代碼的資源。 DevTools 會使用找到的所有狀態碼填入 [自動完成] 下拉式功能表。
url	顯示具有符合指定值之 URL 的資源。

依類型篩選要求

若要依要求類型篩選要求，請按一下 網路 工具上的按鈕： All、 Fetch/XHR、 Doc、 CSS、 JS、 Font、 Img、 Media、 Manifest、 WS (WebSocket) 、 Wasm (WebAssembly) ，或其他 (此處 未列出的任何其他類型) 。

如果按鈕並未出現，則 [篩選] 窗格可能已隱藏起來。 請參閱下方的 [隱藏篩選窗格]。

若要同時啟用多個文字篩選，請 (Windows、Linux) 或 macOS) (按住 Command，然後按一下篩選。

依時間篩選要求

在 [ 概觀 ] 窗格上按一下並向左或向右拖曳，以僅顯示在該時間範圍內處於作用中的要求。 篩選是包容性的。 顯示在醒目提示時間內處於作用中的任何要求。

篩選掉大約 300 毫秒左右未使用的任何要求：

隱藏資料 URL

資料 URL 是內嵌至其他文件中的小型檔案。 [ 要求 ] 資料表中顯示的開頭 data: 為資料 URL 的所有要求。

若要隱藏要求，請關閉 [隱藏資料 URL] 核取方塊：

隱藏額外資訊 URL

若要專注於您撰寫的程式碼，您可以篩選掉您可能已在 Microsoft Edge 中安裝的擴充功能所傳送的不相關要求。 擴充功能要求的 URL 開頭為 chrome-extension://。

若要隱藏擴充功能要求，請在 [篩選條件 ] 動作列中選取 [ 其他篩選條件] 下拉式功能表，然後選取 [ 隱藏擴充功能 URL]， 使其旁邊顯示核取記號：

底部的狀態列會顯示所顯示要求數中的總數，例如 5 / 10 個要求。

僅顯示具有封鎖回應 Cookie 的要求

若要篩選掉所有內容，除了因任何原因封鎖了回應 Cookie 的要求之外，請在 [ 篩選器 ] 動作列中，選取 [ 其他篩選器] 下拉式清單，然後選取 [ 封鎖的回應 Cookie]， 以便在其旁邊顯示核取記號。

接著，若要找出回應 Cookie 遭到封鎖的原因，請選取 [名稱) ] 底下的要求 (，開啟其 [ Cookie] 索引標籤 (右側) ，然後將游標停留在資訊 () 圖示上。

例如：

1. 在 Microsoft Edge 中，選取 [設定及其他>]新的 InPrivate 視窗。

2. 在網址列中，輸入 Microsoft.com。

3. 以滑鼠右鍵按一下網頁，然後選取 [檢查]。

   DevTools 隨即開啟。

4. 選取 [網路 ] 工具。

5. 請確定已選取 [ 所有 篩選] 按鈕。

6. 重新整理網頁。

   許多郵件會列在 網路 工具中。

7. 在 [篩選] 動作列中，選取 [其他篩選條件] 下拉式清單，然後選取 [封鎖的回應 Cookie]。

   在功能表中，[ 封鎖的回應 Cookie] 旁邊會出現一個核取記號。

8. 在下拉式清單外按一下以關閉它。

   會顯示已封鎖回應 Cookie 的要求，例如 id？d_visid_ver=...。

9. 選取要求，例如 id？d_visid_ver=...。

   提要欄位隨即開啟，其中包含索引標籤。

10. 選取 [ Cookie] 索引標籤。

11. 將游標停留在 [資訊] ) 圖示上。

    例如，工具提示會顯示：「由於使用者喜好設定，已封鎖透過 Set-Cookie 標頭設定 Cookie 的嘗試。」

    

    底部的狀態列會顯示顯示的要求數目。

此外， [網路 ] 工具會在因 Edge 旗標或設定而封鎖 Cookie 的要求旁顯示警告圖示 ([ ) 。 將游標停留在圖示上以查看含有線索的工具提示，然後按一下圖示以前往 [ 問題 ] 工具以取得詳細資訊。

只顯示封鎖的要求

若要篩選掉封鎖的要求以外的所有項目，請在 [篩選器 ] 動作列中選取 [其他篩選器] [>封鎖的要求]，以顯示核取記號。 若要測試這一點，您可以使用 DevTools 底部 [快速檢視] 面板中的 [網路要求封鎖] 工具;請參閱 [檢查網路活動] 中的 [封鎖要求]。

例如：

1. 移至網頁，例如在新視窗或索引標籤中的 [ 檢查網路活動 ] 示範頁面。

2. 以滑鼠右鍵按一下網頁，然後選取 [檢查]。

   DevTools 隨即開啟。

3. 在開發工具中，選取 [ 網路 ] 工具。

4. 重新整理網頁。

   [要求] 資料表會.html列出 、 .css.png及.js檔案。

5. 在 [其他篩選] 下拉式清單 (具有 [僅顯示/隱藏要求] 工具提示) 中，選取 [封鎖的請求]。

   在下拉式清單中，[ 已封鎖的要求] 旁邊會顯示核取記號。

6. 在下拉式清單外部按一下以關閉它。

   [ 要求] 資料表是空的，因為開發工具並未封鎖任何要求，且現在會篩選要求以只顯示已封鎖的要求。

7. 按 Esc 一次或兩次，讓 [開發工具] 底部的 [快速檢視 ] 面板開啟。

8. 在快速檢視工具列中，按一下 [其他工具] () 按鈕，然後選取 [網路要求封鎖]。

   [網路要求封鎖] 工具隨即會在 [快速檢視] 面板中開啟。

9. 在 [網路要求封鎖工具] 中，按一下 [新增網路要求封鎖模式) 按鈕。

10. 在 [封鎖比對要求的文字模式 ] 文字方塊中，輸入 *.png，然後按一下 [新增 ] 按鈕。

    已列出 .png 並加上核取記號。

    在 [網路 ] 工具中， [要求 ] 資料表仍是空的，因為尚未主動封鎖任何要求。

11. 重新整理網頁。

    

    • 在示範網頁中，標題旁邊不會顯示 Edge 標誌，而是顯示破碎影像圖示，以及影像的替代文字 (Microsoft Microsoft Edge DevTools 標誌) 。

    • 在 [網路 ] 工具中， [要求] 資料表只會 .png 列出檔案。 [ 要求] 資料表會以紅色文字醒目提示封鎖的要求。

    • 在 [網路 ] 工具中，底部的狀態列會顯示所顯示的要求數目，例如2 / 5 個要求。

只顯示第三方要求

若要篩選掉所有內容，除了來源與頁面來源不同的要求，請在 [ 篩選] 動作列中，選取 [其他] 篩選第三方>要求，以顯示核取記號。 在 [檢查網路活動 ] 示範頁面上試用。

底部的狀態列會顯示顯示的要求數目。

排序要求

根據預設， [要求] 資料表中的要求會依初始時間排序，但您可以使用其他準則來排序資料表。

依欄排序

按一下 [要求] 中任何資料行的標題，即可依該資料行來排序要求。

依活動階段排序

瀑布 欄預設 為關閉。 若要開啟 [瀑布] 欄：以滑鼠右鍵按一下 [要求 ] 資料表標題，然後選取沒有子功能表的純 瀑布功能表 項目。

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

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

  • 開始時間 - 起始的第一個要求位於頂端。

  • 回應時間 - 開始下載的第一個要求位於頂端。

  • 結束時間 - 第一個已完成的要求位於頂端。

  • 總持續時間 - 具有最短連線設定和要求或回應的要求位於頂端。

  • 延遲 - 等待回應時間最短的要求位於頂端。

這些描述假設每個各自的選項都從最短到最長排列。 按一下 [瀑布] 欄的標題以反轉順序。

下列顯示依據總持續時間排序瀑布。 每個條形圖中較淺的部分是等待所花費的時間，較暗的部分是下載位元組所花費的時間：

分析要求

只要 DevTools 處於開啟狀態，它就會在 網路 工具中記錄所有要求。 使用 [網路 ] 工具來分析要求。

顯示要求記錄檔

使用 [要求] 資料表顯示開發工具開啟時所提出之所有要求的記錄。 若要顯示每個項目的詳細資訊，請按一下或暫留在要求上。

[ 要求] 資料表預設會顯示下列資料行：

• 名稱。 資源的檔案名稱或資源的識別碼。
• 狀態。 HTTP 狀態碼。
• 類型。 所要求資源的 MIME 類型。
• 啟動器。 下列物件或處理程序可以起始要求：
  • 剖析器。 HTML 剖析器。
  • 重新導向。 HTTP 重新導向。
  • 指令碼。 JavaScript 函數。
  • 其他。 一些其他程序或動作，例如透過連結瀏覽至頁面，或在網址列中輸入 URL。
• 大小。 伺服器傳遞的回應標頭加上回應內文的合併大小。
• 時間。 從要求開始到收到回應中最後一個位元組的總持續時間。
• 履行者。 要求是由 HTTP 快取或應用程式的服務工作者完成。

瀑布 欄預設 為關閉。 若要開啟 [瀑布] 欄，請以滑鼠右鍵按一下 [要求 ] 資料表標題，然後選取沒有子功能表的純 瀑布 功能表項目。

新增或移除欄

以滑鼠右鍵按一下 [要求 ] 資料表的標題，然後選取要隱藏或顯示的欄位名稱。 目前顯示的資料欄旁邊都有核取記號：

為回應標題新增自訂資料欄位

若要將自訂資料欄位新增至 [要求] 資料表：

1. 以滑鼠右鍵按一下 [要求 ] 資料表的標題，然後選取 [ 回應標頭]>[管理標頭欄]。

   管理 標題欄 快顯視窗隨即開啟：

   

2. 按一下 [新增自訂標頭 ] 按鈕，輸入自訂標頭名稱，然後按一下 [ 新增 ] 按鈕。

依內嵌框架將要求分組

如果頁面上的內嵌框架啟動了大量請求，您可以透過對它們進行分組來使請求日誌更友好。

若要依 iframe 將要求分組：

1. 移至網頁，例如 網路工具參考示範，在新的視窗或索引標籤中。

2. 以滑鼠右鍵按一下網頁，然後選取 [檢查]。

   DevTools 隨即開啟。

3. 在開發工具中，選取 [ 網路 ] 工具。

4. 重新整理網頁。

   在 [網路 ] 工具的 [要求] 資料表中，會顯示下列項目的資料列：

   • devtools-network-reference/ (index.html)
   • style.css
   • script.js

5. 在示範網頁中，按一下 [載入 iframe] 按鈕。

   [ 要求] 資料表中新增許多資料列：

   

6. 在 [ 網路 ] 工具中，按一下 [ 網路設定 ] ) 按鈕，然後選取 [ 依框架分組 ] 核取方塊。

   在 「要求」 資料表中，會顯示可展開的框架名稱。

7. 在 [要求] 資料表中，按一下框架上的展開三角形。

   顯示由內嵌框架起始的要求：

   

顯示要求的時間關係

使用 [要求] 窗格的 [瀑布] 資料行來檢視要求的時間關係。 瀑布列的預設組織會使用要求的開始時間。 因此，偏左的請求比右邊的請求更早開始。

瀑布 欄預設 為關閉。 若要開啟 [瀑布] 欄，請以滑鼠右鍵按一下 [要求 ] 資料表標題，然後選取沒有子功能表的純 瀑布 功能表項目。

若要查看排序瀑布的不同方式，請參閱上方的 依活動階段排序。

[要求] 窗格的 [瀑布圖] 資料行：

分析 WebSocket 連線的訊息

若要檢視 WebSocket 連線的訊息：

1. 移至網頁，例如 Online Websocket Tester。

2. 以滑鼠右鍵按一下網頁，然後選取 [檢查]。

   DevTools 隨即開啟。

3. 選取 [網路 ] 工具。

   預設會選取 [全部 篩選] 按鈕。 [ 網路 ] 面板為空，不顯示任何訊息。

4. 重新整理網頁。

   在 [網路 ] 工具的 [要求 ] 資料表中，會列出許多要求。

5. 在 [網路 ] 工具頂端，選取 [ 通訊端 篩選] 按鈕，並附帶工具提示： WebSocket |網路傳輸 |DirectSocket。

   篩選過的要求清單是空的。

6. 在 Online Websocket Tester 網頁中，按一下 [連線 ] 按鈕。

   如果您尚未設定帳戶和 API 權杖，頁面會顯示：

   • 連線已建立
   • {“error”：“未知的 api 金鑰”} ，並帶有向下的三角形;從伺服器傳送到瀏覽器。

   在 [網路 ] 工具的 [訊息 ] 索引標籤中，會顯示要求：

   • channel_123？api_key=...

7. 在要求清單中，選取 WebSocket 連線，例如 channel_123？api_key=...。

   提要欄位隨即開啟，其中包含索引標籤。

8. 選取 [訊息 ] 索引標籤。

   如果您沒有註冊 API 權杖，[ 訊息] 索引標籤會列出該訊息：

   • {“error”：“未知的 api 金鑰”} ，帶有紅色向下箭號;從伺服器傳送到瀏覽器。

9. 在線上 Websocket Tester 網頁中，在文字方塊中，將 Hello PieSocket！ 變更為 Hello world！，然後按一下 傳送 按鈕。

   在網頁中，主機會顯示訊息 Hello world！ ，並有一個指向上方的三角形;從瀏覽器傳送到伺服器。

   在 [網路 ] 工具的 [郵件 ] 索引標籤中，表格會顯示最後 100 則郵件;在此案例中，會新增此訊息：

   • 你好，世界！ 帶有綠色向上箭號;從瀏覽器傳送到伺服器：

注意：若要取得從伺服器) 回應的紅色向下箭號訊息 (以及綠色向上箭號訊息，您必須：

1. 在 PieSocket 網站上建立帳戶。 這會建立 API 權杖。

2. 在 PieSocket 站台建立叢集。

3. 在 PieSocket 儀表板頁面中，按一下 [ 線上測試 ] 按鈕。

   [線上 WebSocket 測試程式] 頁面隨即開啟，其中包含您的查詢參數。

4. 按一下 [連線 ] 按鈕。

若要重新整理 [要求 ] 資料表，請在 [ 名稱 ] 窗格中，再次按一下 WebSocket 連線的名稱。

[ 要求] 資料表包含下列三個資料行：

• 資料。 訊息承載。 如果訊息為純文字，則會顯示在這裡。 若為二進位作業碼，此資料行會顯示作業碼的名稱和代碼。 支援下列作業碼：

  • 延續框架
  • 二進位框架
  • 連線關閉框架
  • Ping 框架
  • Pong Frame

• 長度。 訊息承載的長度，以位元組為單位。

• 時間。 接收或傳送郵件的時間。

分析串流中的事件

若要檢視伺服器透過擷取 API、EventSource API 和 XHR 串流處理的事件：

1. 移至會串流事件的網頁，例如 網路工具參考 Demo，在新視窗或索引標籤中。

2. 以滑鼠右鍵按一下網頁，然後選取 [檢查]。

   DevTools 隨即開啟。

3. 在開發工具中，選取 [ 網路 ] 工具。

4. 重新整理網頁。

   在 [網路 ] 工具的 [要求] 資料表中，會顯示下列項目的資料列：

   • devtools-network-reference/ (index.html)
   • style.css
   • script.js

5. 在示範網頁中，按一下 [Stream 伺服器傳送的事件] 按鈕。

   在 [要求 ] 資料表中，會新增 (sse 伺服器傳送事件) 資料列。

6. 選取 sse (伺服器傳送事件) 要求。

   提要欄位隨即開啟，包括 [EventStream ] 索引標籤。

7. 選取 [EventStream ] 索引標籤：

   

   每秒接收並顯示一次新的「hello」訊息。

若要篩選事件，請在 [EventStream ] 索引標籤頂端的篩選列中指定規則運算式。

若要清除已擷取的事件清單，請按一下 [ 清除 ( ]) 按鈕。

另請參閱:

• 使用擷取 API
• 伺服器傳送事件 - EventSource API。
• XMLHttpRequest - XHR。

顯示回應內文的預覽

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

1. 在 [網路 ] 工具中， 在 [要求 ] 資料表的 [ 名稱 ] 欄中，按一下要求的名稱。

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

   

[ 預覽 ] 索引標籤主要用於檢視影像。

顯示回應內文

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

1. 在 [要求] 資料表的 [名稱 ] 欄中，按一下要求的名稱。

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

   

顯示 HTTP 標頭

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

1. 在 [要求] 資料表中，按一下要求的名稱。

2. 在提要欄位中，選取 [標題 ] 索引標籤，然後向下捲動至各個區段：

   • 一般
   • 早期提示：標頭 (選用)
   • 回應標頭
   • 要求標頭

   

檢視 HTTP 標頭來源

根據預設， [標頭 ] 索引標籤會依字母順序顯示標頭名稱。 若要依接收的順序顯示 HTTP 標頭名稱：

1. 移至使用 XHR 的網頁，例如在新視窗或索引標籤中 移除 -ms-high-contrast 和採用 Microsoft Edge 中的標準型強制色彩。

2. 如果出現橫幅提示，請在橫幅提示中接受 Cookie。

   在強制執行《一般資料保護規定》 (GDPR) 的地區，此網站會顯示 Cookie 橫幅，而且除非您接受橫幅中的 Cookie，否則不會傳送 collect 下列) (要求。

3. 以滑鼠右鍵按一下網頁，然後選取 [檢查]。

   DevTools 隨即開啟。

4. 選取 [網路 ] 工具。

5. 重新整理網頁。

   在 [要求] 資料表中，會列出許多要求。

6. 按一下紅色的 [停止錄製網路記錄 ] ) 頂端的按鈕。

7. 在 [要求 ] 資料表中，按一下 [名稱 ] 欄以依字母順序排序要求，然後選取 收集 要求。

   提要欄位隨即開啟，其中包含索引標籤。

8. 選取 [標頭 ] 索引標籤：

   

9. 選取 [回應標頭] 或 [要求標頭] 區段旁的 [原始] 核取方塊。

另請參閱:

• 顯示上方的 HTTP 標頭。

臨時標頭警告

有時 [標頭] 索引標籤會顯示警告訊息：顯示 臨時標頭。 這可能是由於以下原因：

• 要求不是透過網路傳送，而是從不會儲存原始要求標頭的本機快取提供。
• 網路資源無效。
• 基於安全性考量。

假設要求不是透過網路傳送，而是從本機快取提供，而本機快取不會儲存原始要求標頭。 在這種情況下，您可以選取網路工具頂端的 [停用快取] 核取方塊，以查看完整的要求標頭。 例如：

1. 移至 [檢查網路活動 ] 示範頁面。

2. 以滑鼠右鍵按一下網頁，然後選取 [檢查]。

   DevTools 隨即開啟。

3. 選取 [網路 ] 工具。

4. 重新整理網頁。

5. 選取 getstarted.js 網路要求。

   [ 要求標頭] 區段顯示訊息： 顯示臨時標頭。停用快取以查看完整標頭。

   

6. 選取 [網路] 工具頂端的 [停用快取] 核取方塊。

7. 重新整理網頁。

8. 選取 getstarted.js 網路要求。

   [ 要求標頭] 區段不再顯示該訊息;顯示完整的要求標頭。

另請參閱:

• 透過停用瀏覽器快取來模擬首次來訪的訪客。

檢視要求承載 (查詢字串參數和表單資料)

若要檢視HTTP請求的承載 (查詢字串引數和表單資料) ，請從 「要求」 表格中選取要求，然後選取提要欄位中的「 承載 」索引標籤，如下所示：

1. 移至網頁，例如 網路工具參考示範，在新的視窗或索引標籤中。

2. 以滑鼠右鍵按一下網頁，然後選取 [檢查]。

   DevTools 隨即開啟。

3. 在開發工具中，選取 [ 網路 ] 工具。

4. 重新整理網頁。

   在 [網路 ] 工具的 [要求] 資料表中，會顯示下列項目的資料列：

   • devtools-network-reference/ (index.html)
   • style.css
   • script.js
   • favicon.png

5. 在示範網頁中，按一下 傳送表單資料 按鈕。

   在 [網路 ] 工具的 [要求 ] 資料表中，會新增一個資料列：

   • form-data-endpoint?hasfile=true

6. 選取一列 form-data-endpoint?hasfile=true。

   提要欄位隨即開啟，包括 [承載] 索引標籤。

7. 選取 承載 索引標籤。

   隨即顯示要求的承載，包括 [查詢字串參數 ] 區段和 [ 表單資料 ] 區段：

DevTools 的 [主控台 ] 索引標籤中出現錯誤：

• POST https://microsoftedge.github.io/Demos/devtools-network-reference/form-data-endpoint?hasfile=true 405 (Method Not Allowed) (anonymous) @ script.js:49

這個無害的 「不允許方法 」錯誤會出現在 主控台中，因為示範伺服器上沒有 form-data-endpoint POST 處理常式。 這是可以預期的錯誤，因為 github.io 裝載不會執行應用程式伺服器，只會執行靜態檔案。

檢視承載來源

預設情況下， 網路 工具會以人類可讀的形式顯示承載。

若要改為檢視查詢字串參數或表單資料的來源：

1. 執行上述上一節中的步驟。

   在 [承載 ] 索引標籤中，[ 查詢字串參數] 區段會以人類可讀的形式顯示承載，用於 hasfile。 表 單資料區 段以人類可讀的形式顯示承載，用於 username、 timestamp和 file：

   

2. 在 [查詢字串參數 ] 區段標題旁邊，按一下 [檢視來源 ] 按鈕。

3. 在 [ 表單資料 ] 區段標題旁邊，按一下 [檢視來源 ] 按鈕。

   承載的來源資訊隨即顯示：

   

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

若要以人類可讀取的格式顯示查詢字串參數，但保留編碼：

1. 移至使用查詢字串參數的網頁，例如 網路工具參考示範。

2. 以滑鼠右鍵按一下網頁，然後選取 [檢查]。

   DevTools 隨即開啟。

3. 在開發工具中，選取 [ 網路 ] 工具。

4. 重新整理網頁。

   [要求] 資料表會.html列出 、 .css.js及.png檔案。

5. 在示範網頁中，按一下 [傳送編碼查詢參數 ] 按鈕。

   [ 要求] 資料表會新增資料列：

   encoded-query-params-endpoint?name=Danas+Barkus&url=https%3A%2F%2Fcontoso.com%2F%C3%A0%C3%A9%C3%A8%C3%B4%C3%A7%D0%BB

6. 選取列 encoded-query-params-endpoint 。

   提要欄位隨即開啟，其中包含索引標籤。

7. 在提要欄位中，選取 承載 索引標籤。

   [查詢字串參數] 區段會顯示解碼的 URL，如下所示： https://contoso.com/àéèôçл

   

8. 在 [查詢字串參數 ] 區段中，按一下 [檢視 URL-encoded ] 按鈕。

   URL 現在會以編碼字元顯示， (例如 %3A 和 %2F) ;而按鈕標籤會變更為 [已解碼檢視]：

   

9. 按一下 [檢視解碼] 按鈕。

   URL 會再次以解碼字元顯示，如下所示：https://contoso.com/àéèôçл，而按鈕標籤會變更回 [檢視 URL 編碼]。

顯示 Cookie

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

1. 在 [要求] 資料表中，按一下要求的名稱。

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

   

如需每個資料欄位的詳細資訊，請參閱 [檢視、編輯及刪除 Cookie] 中的欄位。

若要修改 Cookie，請參閱 檢視、編輯和刪除 Cookie。

顯示要求的時間明細

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

1. 在 [要求] 資料表中，按一下要求的名稱。

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

   

如需更快速存取資料的方式，請參閱 預覽計時明細。

如需可能顯示在 「時序」 面板中的每個階段的相關資訊，請參閱下方 說明的時序明細階段。

預覽時間明細

若要顯示請求時間明細的預覽，請在「請求」資料表的「瀑布」欄中，將游標暫留在請求的項目上。

瀑布 欄預設 為關閉。 若要開啟 [瀑布] 欄，請以滑鼠右鍵按一下 [要求 ] 資料表標題，然後選取沒有子功能表的純 瀑布 功能表項目。

若要檢視資料而不暫留，請參閱上方顯示 請求的計時明細。

時間明細階段說明

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

• 佇列。 當下列任一為 True 時，瀏覽器會將要求排入佇列

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

• 停滯不前。 佇 列中所述的任何原因可能會導致要求停止。

• 啟動。 當要求由服務工作者處理時， 啟動 是服務工作者啟動所花費的時間。

• respondWith。 當要求由服務工作者處理時， respondWith 是服務工作者執行回呼所花費的時間 fetchEvent.respondWith() 。

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

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

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

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

• ServiceWorker 準備。 瀏覽器正在啟動 Service Worker。

• 向 ServiceWorker 提出要求。 要求已傳送給服務工作者。

• 正在等候 TTFB) (。 瀏覽器正在等候回應的第一個位元組。 TTFB 代表 第一個位元組的時間。 此時序包括一次來回延遲，以及伺服器準備回應所花費的時間。

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

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

• 閱讀推送。 瀏覽器正在讀取先前收到的本機資料。

分析服務工作者要求路由

若要視覺化要求路由，時間表會顯示服務工作者 Startup 事件和 respondWith 擷取事件。 您可以偵錯和視覺化通過 Service Worker 的網路請求。

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

1. 在新的視窗或索引標籤中移至使用 Service Worker 的頁面，例如 PWAMP 示範頁面。

2. 以滑鼠右鍵按一下頁面，然後選取 [檢查]。

   DevTools 隨即開啟。

3. 選取 [網路 ] 工具。

4. 重新載入頁面。

5. 在要求清單中，選取通過 Service Worker 檔案的網路要求。 例如，選取 about.css。

   提要欄位隨即出現。

6. 在提要欄位中，按一下 「時間 」標籤頁：

   

   [ Service Worker ] 區段顯示有關 啟動 和 respondWith 階段的計時資訊。

7. 按一下 respondWith 區段上的展開箭號：

   

8. 在 respondWith 區段中，按一下 [原始要求] 上的展開箭號：

   

9. 在 收到回應後，按一下展開箭號。

顯示啟動程式和相依性

若要顯示要求的啟動程式和相依性，請按住 Shift 並將游標停留在 要求 資料表中的要求上。

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

當 [要求] 資料表依時間順序排序時，如果您將游標暫留在一行上，它前面的行會顯示綠色的要求。 綠色要求是相依性的啟動端。 如果在此之前的行上顯示另一個綠色請求，則較高的請求是發起人的發起人。 依此類推。

顯示載入事件

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

• 在具有垂直線的 概觀 窗格中。

• 在具有垂直線的 [要求] 資料表的 [瀑布] 欄中。 瀑布 欄預設 為關閉。 若要開啟 [瀑布] 欄，請以滑鼠右鍵按一下 [要求 ] 資料表標題，然後選取沒有子功能表的純 瀑布 功能表項目。

• 在 [摘要 ] 窗格的 [ 網路 ] 工具底部，具有計時標籤。

事件以 DOMContentLoaded 藍色顯示，而事件以 load 紅色顯示。

顯示要求總數

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

警告：此數字只會追蹤自開發工具開啟後已記錄的要求。 如果在開發工具開啟之前發生其他要求，則不計算這些要求。

顯示總下載大小

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

警告：此數字只會追蹤自開發工具開啟後已記錄的要求。 如果在開發工具開啟之前發生其他要求，則不計算先前的要求。

若要驗證瀏覽器解壓縮每個項目之後的資源大小，請參閱 顯示資源的未壓縮大小。

顯示導致要求的堆疊追蹤

在 JavaScript 陳述式請求資源之後，將游標暫留在 [啟動器 ] 欄上，以顯示導致請求的堆疊追蹤。

顯示資源的未壓縮大小

若要同時查看資源的傳輸大小和未壓縮大小：

1. 在 [網路 ] 工具右上角，按一下 [網路設定 ] (齒輪) 圖示。 隨即出現一列核取方塊。

2. 開啟 [大要求列] 核取方塊。

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

   

匯出要求資料

您可以使用下述的數種方式，匯出或複製已套用篩選條件的要求清單。

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

HAR (HTTP 封存) 是數個 HTTP 工作階段工具用來匯出擷取資料的檔案格式。 格式是具有一組特定欄位的 JSON 物件。 請參閱 HAR 分析程式。

若要降低敏感性資訊意外洩漏的可能性，預設情況下，您可以以 HAR 格式匯出「已清理」的網路記錄，該格式排除敏感性資訊 Cookie，例如 、 Set-Cookie和 Authorization 標頭。 如有需要，您也可以匯出包含敏感性資料 的 記錄。

若要將所有網路要求儲存至 HAR 檔案，而不會儲存敏感性資料：

1. 移至網頁，例如在新視窗或索引標籤中的 [ 檢查網路活動 ] 示範頁面。

2. 以滑鼠右鍵按一下網頁，然後選取 [檢查]。

   DevTools 隨即開啟。

3. 在開發工具中，選取 [ 網路 ] 工具。

4. 重新整理網頁。

5. 以滑鼠右鍵按一下 [要求] 資料表中的任何要求，然後選取 [ 複製>] 全部複製為 HAR (已清理過) ：

   

   或者，在 [網路 ] 工具頂端的動作列中，按一下 [ 匯出 HAR (已清理的) ] () 按鈕。

DevTools 會將自您開啟 DevTools 之後發生的所有要求儲存至 HAR 檔案。

您無法篩選要求，也無法儲存單一要求。

若要將所有網路要求儲存至 HAR 檔案，包括敏感性資料：

1. 在開發工具中，選取 自訂並控制開發工具>設定。

   [ 設定>喜好設定] 頁面隨即開啟。

2. 向下捲動至 [網路 ] 區段。

3. 選取 [允許] 核取方塊以 產生包含敏感性資料的 HAR。

4. 按一下 [ 關閉 ] ([ ) 按鈕。

5. 在 [ 網路 ] 工具中，以滑鼠右鍵按一下 [要求 ] 資料表中的任何要求，然後選取 [ 複製>] 全部複製為包含敏感性資料的 HAR () 。

   或者，在頂端的動作列中，按一下 [ 匯出已清理或包含敏感性資料的 HAR (]) ([ 按鈕，然後選取 [匯出包含敏感性資料的 HAR (]) ：

   

將 HAR 檔案匯入 DevTools 進行分析

有了 HAR 檔案之後，您可以使用 HAR 分析程式將檔案匯入回 DevTools 進行分析。

若要將 HAR 檔案匯入 DevTools 進行分析：

• 在 [網路 ] 工具頂端的動作列中，按一下 [ 匯入 HAR 檔案 ] ) 按鈕。

• 或者，將 HAR 檔案拖曳到 [要求] 資料表。

[ 網路 ] 工具可讀取並顯示從 HAR 檔案匯入之要求的啟動器。 對於啟動器，請參閱上方 顯示要求記錄。

將網路要求複製到剪貼簿

在 [要求] 資料表的 [名稱] 資料行底下，以滑鼠右鍵按一下要求，將游標停留在 [複製] 上，然後選取下列其中一個選項。

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

名稱	詳細資料
複製網址	將要求的 URL 複製到剪貼簿。
複製為 cURL (Cmd)	將要求複製為 cURL 命令。
複製為 cURL (bash)
複製為 PowerShell	將要求複製為 PowerShell 命令。
複製為擷取	將要求複製為擷取呼叫。
複製為擷取 (Node.js)	將要求複製為 Node.js 擷取呼叫。
複製回應	將回應內文複製到剪貼簿。
複製堆疊追蹤	將要求的堆疊追蹤複製到剪貼簿。 此功能表項目只會在由 JavaScript 程式碼觸發的要求時出現，例如擷取或 XHR 要求。 請參閱上方的 重新傳送要求。

若要複製所有要求：

名稱	詳細資料
複製所有 URL	將所有要求的 URL 複製到剪貼簿。
將全部複製為 cURL (cmd)	將所有要求複製為 cURL 命令鏈。
全部複製為 cURL (bash)
全部複製為 PowerShell	將所有要求複製為 PowerShell 命令鏈。
全部複製為擷取	將所有要求複製為擷取呼叫鏈。
全部複製為擷取 (Node.js)	將所有要求複製為 Node.js 擷取呼叫鏈。
全部複製為 HAR (已清理的)	將所有要求複製為 HAR 資料，不含敏感性資料Cookie，例如 、 及AuthorizationSet-Cookie標頭。
將所有複製為具有敏感性資料的 HAR ()	將所有要求複製為具有敏感性資料的 HAR 資料。 如果您選取 [自訂及控制開發工具>設定>喜好設定] 頁面 >[網路] 區段 > 允許產生具有敏感性資料的 HAR。

若要複製一組已篩選的要求，請將篩選套用至網路記錄，以滑鼠右鍵按一下要求，然後選取：

名稱	詳細資料
複製所有列出的網址	將所有篩選要求的 URL 複製到剪貼簿。
複製所有列為 cURL (cmd)	將所有篩選過的要求複製為 cURL 命令鏈。
複製所有列為 cURL (bash)	將所有篩選過的要求複製為 cURL 命令鏈。
複製所有列為 PowerShell	將所有篩選過的要求複製為 PowerShell 命令鏈。
複製所有列為擷取	將所有篩選過的要求複製為擷取呼叫鏈。
複製所有列為擷取 (Node.js)	將所有篩選的請求複製為 Node.js 擷取呼叫鏈。
複製所有列為 HAR (已清理的)	將所有篩選的請求複製為 HAR 資料，不含敏感性資料Cookie，例如 、 和AuthorizationSet-Cookie標頭。
複製所有列為 HAR (與敏感性資料)	將所有篩選的請求複製為具有敏感性資料的 HAR 資料。 如果您選取 [自訂及控制開發工具>設定>喜好設定] 頁面 >[網路] 區段 > 允許產生具有敏感性資料的 HAR。

另請參閱:

• 篩選要求，如上方所示。

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

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

1. 在 [要求] 資料表中，按一下導致 JSON 回應的要求名稱。

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

3. 以滑鼠右鍵按一下已設定格式之 JSON 回應預覽的第一行，然後選取 [複製值]：

   

   您現在可以將值貼到任何編輯器中。

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

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

1. 在 [要求] 資料表中，按一下要求的名稱。

2. 在提要欄位中，選取 承載 索引標籤：

3. 展開下列其中一個章節。

   • 要求承載 (JSON)
   • 表單資料
   • 查詢字串參數
   • 要求標頭
   • 回應標頭

4. 以滑鼠右鍵按一下值，然後選取 [複製值]。 您現在可以將值貼到任何編輯器中。

變更網路工具的版面配置

您可以展開或摺疊 網路 工具 UI 的區段，以聚焦重要資訊。

隱藏篩選窗格

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

使用大型要求列

當您想要網路要求資料表中有更多空格時，請使用大要求列。 使用大列時，某些欄還提供更多資訊;例如：

• [ 大小] 欄的底部值是要求的未壓縮大小。

• 預設不顯示 [優先順序] 欄 () 同時顯示初始值 (底部值) ，以及最終 (頂值) 擷取優先順序。

若要啟用大列：

1. 移至網頁，例如在新視窗或索引標籤中的 [ 檢查網路活動 ] 示範頁面。

2. 以滑鼠右鍵按一下網頁，然後選取 [檢查]。

   DevTools 隨即開啟。

3. 在開發工具中，選取 [ 網路 ] 工具。

4. 重新整理網頁。

   要求會以小列顯示。

5. 在 [ 網路 ] 工具中，按一下 [ 網路設定 ] ) 按鈕，然後選取 [ 大要求資料列] 核取方塊。

   要求會以大列顯示：

   

隱藏 [概觀] 窗格

根據預設，開發工具會顯示 [ 概觀 ] 窗格。 若要隱藏 [概觀 ] 窗格，請清除 [顯示概觀 ] 核取方塊。

另請參閱

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

示範網頁：

• 檢查網路活動
• 網路工具參考示範
• 待辦事項應用程式

注意事項

本頁面的部分內容是根據 Google 建立和分享 的作品進行修改，並根據知識 共享署名 4.0 國際授權條款中所述的條款使用。 原始頁面可在 此處 找到，由 Kayce Basques 撰寫。

本作品已根據 知識共享署名 4.0 國際許可證獲得許可。