網路面板：分析網路負載和資源

Dale St. Marthe
Dale St. Marthe
LinkedIn

使用「Network」面板分析網頁載入情形，並檢查網路資源。

總覽

您可以透過「Network」面板執行下列操作：

請參閱「檢查網路活動」中的教學課程，瞭解幾項最常用的「網路」面板功能。

開啟「網路」面板

如要開啟「網路」面板，請開啟開發人員工具，然後按一下頂端動作列中的「網路」。

或者，如要透過指令選單開啟「網路」面板，請按照下列步驟操作：

  1. 開啟開發人員工具。
  2. 按下以下任一組合鍵，開啟指令選單：
  3. macOS：Command + Shift + P 鍵
  4. Windows、Linux 和 ChromeOS：Control + Shift + P 鍵 含有
  5. 開始輸入 Network，選取「Show Network panel」，然後按下 Enter 鍵。

記錄網路活動

開啟開發人員工具後，只要開發人員工具處於開啟狀態，網路要求就會自動記錄在「網路」面板中。

除了錄製外，您還可以執行下列操作：

檢查網路要求

所有網路要求都會記錄在面板中央的「Requests」表格中。

如要進一步瞭解預設顯示的資料欄和可新增的其他資料欄，請參閱「查看要求記錄」。

按一下要求名稱，即可查看有關要求的其他資訊分頁，包括：

  • 標頭：所選資源的 HTTP 標頭。
  • 酬載：要求的查詢字串參數和表單資料。
  • 預覽：HTML 的基本算繪。
  • 回應：所選資源的 HTML 原始碼。
  • 發起者：導致資源要求的原因。
  • 時間：所選資源的網路活動細目。
  • Cookie：要求及其回應的 Cookie。

篩選及排序網路要求

透過「網路」面板，您可以透過兩種方式在「要求」表格中排序要求：

以下是幾種在「Requests」表格中篩選要求的方法：

如要瞭解如何搜尋所有資源的 HTTP 標頭和回應，以便找出特定字串或規則運算式，請參閱「搜尋網路標頭和回應」。

變更載入行為

在「Network」面板中變更載入行為，測試網頁的使用者體驗。

您可以使用「Network」面板執行下列操作：

儲存及匯出網路要求資料

如要儲存及匯出網路要求資料，請參閱以下說明：