Network 皮膚記錄頁面上每個網路操作的相關資訊，包括詳細的耗時資料、HTTP 請求與響應標頭和 Cookie，等等。
Network 皮膚概覽
- Controls。使用這些選項可以控制 Network 皮膚的外觀和功能。
- Filters。 使用這些選項可以控制在 Requests Table 中顯示哪些資源。提示：按住 Cmd (Mac) 或 Ctrl (Windows/Linux) 並點選過濾器可以同時選擇多個過濾器。
- Overview。 此圖表顯示了資源檢索時間的時間線。如果您看到多條豎線堆疊在一起，則說明這些資源被同時檢索。
- Requests Table。 此表格列出了檢索的每一個資源。 預設情況下，此表格按時間順序排序，最早的資源在頂部。點選資源的名稱可以顯示更多資訊。 提示：右鍵點選 Timeline 以外的任何一個表格標題可以新增或移除資訊列。
- Summary。 此窗格可以一目瞭然地告訴您請求總數、傳輸的資料量和載入時間
記錄網路活動與螢幕截圖
記錄網路活動：顯示紅色 (記錄按鈕開啟) 表明 DevTools 正在記錄。 顯示灰色 (記錄按鈕關閉) 表明 DevTools 未在記錄。 螢幕截圖：可以在頁面載入期間捕捉螢幕截圖
檢視 DOMContentLoaded 和 load 事件資訊
我們要明白這兩個時期先要了解DOM文件載入流程：
- 解析HTML結構。
- 載入外部指令碼和樣式表檔案。
- 解析並執行指令碼程式碼。
- 構造HTML DOM模型。// DOMContentLoaded 相當於jQuery中的ready
- 載入圖片等外部檔案。
- 頁面載入完畢。// load
檢視單個資源的詳細資訊
檢視 HTTP 標頭
Headers 標籤可以顯示資源的請求網址、HTTP 方法以及響應狀態程式碼。 此外，該標籤還會列出 HTTP 響應和請求標頭、它們的值以及任何查詢字串引數。
預覽資源
點選 Preview 標籤可以檢視該資源的預覽。Preview 標籤可能顯示一些有用的資訊，也可能不顯示，具體取決於您所選擇資源的型別。
檢視 HTTP 響應內容
點選 Response 標籤可以檢視資源未格式化的 HTTP 響應內容。 Preview 標籤可能包含一些有用的資訊，也可能不包含，具體取決於您所選擇資源的型別。
檢視網路耗時
點選 Timing 標籤可以檢視單個資源請求生命週期的精細分解。
生命週期按照以下類別顯示花費的時間：
- Queuing
- Stalled
- 如果適用：DNS lookup、initial connection、SSL handshake
- Request sent
- Waiting (TTFB)
- Content Download
如果網路異常更加詳細的各流程耗時這一點很重要
// 此程式碼可以在 DevTools 的 Console 中執行。 它將使用 Network Timing API 檢索所有資源。 然後，它將通過查詢是否存在名稱中包含“style.css”的條目對條目進行過濾。 如果找到，將返回相應條目。
performance.getEntriesByType('resource').filter(item =>item.name.includes("style.css"))
複製程式碼相關指南：瞭解 Resource Timing
檢視 Cookie
點選 Cookies 標籤可以檢視在資源的 HTTP 請求和響應標頭中傳輸的 Cookie 表。 只有傳輸 Cookie 時，此標籤才可用。
檢視 WebSocket 框架
點選 Frames 標籤可以檢視 WebSocket 連線資訊。
只有選定資源發起 WebSocket 連線時，此標籤才會顯示。
檢視資源發起者和依賴項
按住 Shift 並將滑鼠懸停在資源上，可以檢視其發起者和依賴項。 本部分將您懸停的資源稱為目標。
目標上方的第一個綠色編碼資源為目標的發起者。 如果上方存在第二個也是綠色編碼的資源，那麼該資源將是發起者的發起者。 目標下方紅色編碼的任何資源都是目標的依賴項。
更多詳細功能說明 === [google文件] (developers.google.com/web/tools/c…)，絕大部分內容複製於文件，只希望引起你的注意，給你個文件連結地址