Network 面板記錄頁面上每個網絡操作的相關信息，包括詳細的耗時數據、HTTP 請求與響應標頭和 Cookie，等等。
TL;DR
- 使用 Network 面板記錄和分析網絡活動。
- 整體或單獨查看資源的加載信息。
- 過濾和排序資源的顯示方式。
- 保存、復制和清除網絡記錄。
- 根據需求自定義 Network 面板。
<一>Netwrok面板概覽
Netwrok面板由五個窗格組成
- Controls。使用這些選項可以控制 Network 面板的外觀和功能。
- Filters。 使用這些選項可以控制在 Requests Table 中顯示哪些資源。提示：按住 Cmd (Mac) 或 Ctrl(Windows/Linux) 並點擊過濾器可以同時選擇多個過濾器。
- Overview。 此圖表顯示了資源檢索時間的時間線。如果您看到多條豎線堆疊在一起，則說明這些資源被同時檢索。
- Requests Table。 此表格列出了檢索的每一個資源。 默認情況下，此表格按時間順序排序，最早的資源在頂部。點擊資源的名稱可以顯示更多信息。 提示：右鍵點擊 Timeline 以外的任何一個表格標題可以添加或移除信息列。
- Summary。 此窗格可以一目了然地告訴您請求總數、傳輸的數據量和加載時間。
備注：默認情況下，Requests Table 會顯示以下列。您可以添加和移除列
- Name。資源的名稱。
- Status。HTTP 狀態代碼。
- Type。已請求資源的 MIME 類型。
- Initiator。發起請求的對象或進程。值為以下選項之一：
- Parser。Chrome 的 HTML 解析器發起請求。
- Redirect。HTTP 重定向發起請求。
- Script。腳本發起請求。
- Other。某些其他進程或操作發起請求，例如用戶通過鏈接或者在地址欄中輸入網址導航到頁面。
- Size。響應標頭（通常為數百字節）加響應正文（由服務器提供）的組合大小。
- Time。從請求開始至在響應中接收到最終字節的總持續時間。
- Timeline。Timeline 列可以顯示所有網絡請求的可視瀑布。 點擊此列的標題可以顯示一個包含更多排序字段的菜單。
<二> 記錄網格活動
在 Network 面板打開時，DevTools 在默認情況下會記錄所有網絡活動。 要記錄活動，只需在面板打開時重新加載頁面，或者等待當前加載頁面上的網絡活動。
您可以通過 record 按鈕指示 DevTools 是否記錄。 顯示紅色 (
) 表明 DevTools 正在記錄。 顯示灰色 (
) 表明 DevTools 未在記錄。 點擊此按鈕可以開始或停止記錄，也可以按鍵盤快捷鍵 Cmd/Ctrl+e。
<三> 在記錄期間捕捉屏幕截圖
Network 面板可以在頁面加載期間捕捉屏幕截圖。此功能稱為幻燈片。
點擊攝影機圖標可以啟用幻燈片。圖標為灰色時，幻燈片處於停用狀態 (
)。如果圖標為藍色，則說明已啟用 (
)。
重新加載頁面可以捕捉屏幕截圖。屏幕截圖顯示在概覽上方。
將鼠標懸停在一個屏幕截圖上時，Timeline 將顯示一條黃色豎線，指示幀的捕捉時間。
雙擊屏幕截圖可查看放大版本。在屏幕截圖處於放大狀態時，使用鍵盤的向左和向右箭頭可以在屏幕截圖之間導航。
<四> 查看DOMContentLoaded和load事件
Network 面板突出顯示兩種事件：DOMContentLoaded 和 load。
解析頁面的初始標記時會觸發 DOMContentLoaded。 此事件將在 Network 面板上的兩個地方顯示.
a. Overview 窗格中的藍色豎線表示事件。
b. 在 Summary 窗格中，您可以看到事件的確切時間。
頁面完全加載時將觸發 load。此事件顯示在三個地方：
a.Overview 窗格中的紅色豎線表示事件。
- b. Requests Table 中的紅色豎線也表示事件。
- c
- .在 Summary 窗格中，您可以看到事件的確切時間。
<五> 查看單個資源的詳細信息
點擊資源名稱（位於 Requests Table 的 Name 列下）可以查看與該資源有關的更多信息。
可用標簽會因您所選擇資源類型的不同而不同，但下面四個標簽最常見：
- Headers。與資源關聯的 HTTP 標頭。
- Preview。JSON、圖像和文本資源的預覽。
- Response。HTTP 響應數據（如果存在）。
- Timing。資源請求生命周期的精細分解。
<六> 查看網絡耗時
點擊 Timing 標簽可以查看單個資源請求生命周期的精細分解。
生命周期按照以下類別顯示花費的時間：
- Queuing
- Stalled
- 如果適用：DNS lookup、initial connection、SSL handshake
- Request sent
- Waiting (TTFB)
- Content Download
將鼠標懸停到 Timeline 圖表內的資源上時，您也可以看到相同的信息。
<七> 查看HTTP標頭
點擊 Headers 可以顯示該資源的標頭。
Headers 標簽可以顯示資源的請求網址、HTTP 方法以及響應狀態代碼。 此外，該標簽還會列出 HTTP 響應和請求標頭、它們的值以及任何查詢字符串參數。
點擊每一部分旁邊的 view source 或 view parsed 鏈接，您能夠以源格式或者解析格式查看響應標頭、請求標頭或者查詢字符串參數。
您也可以點擊相應部分旁邊的 view URL encoded 或 view decoded 鏈接，以網址編碼或解碼格式查看查詢字符串參數。
<八> 查看資源發起者和依賴項
按住 Shift 並將鼠標懸停在資源上，可以查看其發起者和依賴項。 本部分將您懸停的資源稱為目標。
目標上方的第一個綠色編碼資源為目標的發起者。 如果上方存在第二個也是綠色編碼的資源，那么該資源將是發起者的發起者。 目標下方紅色編碼的任何資源都是目標的依賴項。
下方的屏幕截圖中，目標是 dn/。此目標的發起者為以 rs=AA2Y 開頭的腳本。 發起者 (rs=AA2Y) 的發起者為 google.com。 最后，dn.js 是目標 (dn/) 的依賴項
<九> 排序請求
默認情況下，Requests Table 中的資源按照每個請求的開始時間排序，最早的請求位於頂部。
點擊列標頭可以按照該標頭下每個資源的值對表格排序。 再次點擊相同的標頭可以將排序順序更改為升序或降序。
Timeline 列與其他列不同。點擊此列時，它將顯示一個由多個排序字段組成的菜單：
- Timeline。按每個網絡請求的開始時間排序。這是默認排序方式，與按 Start Time 選項排序相同。
- Start Time。按每個網絡請求的開始時間排序（與按 Timeline 選項排序相同）。
- Response Time。按每個請求的響應時間排序。
- End Time。按每個請求完成的時間排序。
- Duration。按每個請求的總時間排序。選擇此過濾器可以確定哪些資源的加載時間最長。
- Latency。按請求開始與響應開始之間的時間排序。 選擇此過濾器可以確定哪些資源至第一字節 (TTFB) 的時間最長。
<十> 過濾請求
Network 面板提供了多種方式來過濾要顯示哪些資源。 點擊 Filter 按鈕 (
) 可以隱藏或顯示 Filters 窗格。
使用內容類型按鈕可以僅顯示選定內容類型的資源。
注：按住 Cmd (Mac) 或 Ctrl (Windows/Linux) 並點擊過濾器可以同時啟用多個過濾器。
Filter 文本字段還支持各種關鍵詞，這樣，您可以按照各種屬性對資源排序，例如使用 larger-than 關鍵字按文件大小進行排序。
下文列表說明了所有關鍵字。
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 會使用它遇到的所有狀態代碼填充自動填充下拉菜單。
<十一> 復制，保存和清除網絡信息
在 Requests Table 中點擊右鍵可以復制、保存或刪除網絡信息。 某些選項取決於上下文，因此，如果您希望操作單個資源，則需要右鍵點擊該資源所在的行。
下面的列表說明了每一個選項。
- Copy Response。將選定資源的 HTTP 響應復制到系統剪貼板。
- Copy as cURL。以 cURL 命令字符串的形式將選定資源的網絡請求復制到系統剪貼板。請參閱以 cURL 命令形式復制請求。
- Copy All as HAR。以 HAR 數據形式將所有資源復制到系統剪貼板。HAR 文件包含用於說明網絡“瀑布”的 JSON 數據結構。多款第三方 工具 可以依據 HAR 文件中的數據重建網絡瀑布。請參閱網頁性能工具： HTTP 歸檔 (HAR)，了解更多信息。
- Save as HAR with Content。將所有網絡數據及每一個頁面資源保存到 HAR 文件。 二進制資源（包括圖像）以 Base64 編碼文本的形式編碼。
- Clear Browser Cache。清除瀏覽器緩存。提示：您也可以從 Network Conditions 抽屜式導航欄中啟用或停用瀏覽器緩存。
- Clear Browser Cookies。清除瀏覽器的 Cookie。
- Open in Sources Panel。在 Sources 面板中打開選定資源。
- Open Link in New Tab。在新標簽中打開選定資源。您也可以在 Network 表中雙擊資源名稱。
- Copy Link Address。將資源網址復制到系統剪貼板。
- Save。保存選定的文本資源。僅在文本資源上顯示。
- Replay XHR。重新發送選定的
XMLHTTPRequest。僅在 XHR 資源上顯示。