Chrome DevTools的Network面板

Network 面板記錄頁面上每一個網絡操做的相關信息，包括詳細的耗時數據、HTTP 請求與響應標頭和 Cookie，等等。

Network 面板概覽

1. Controls。使用這些選項能夠控制 Network 面板的外觀和功能。
2. Filters。 使用這些選項能夠控制在 Requests Table 中顯示哪些資源。提示：按住 Cmd (Mac) 或 Ctrl (Windows/Linux) 並點擊過濾器能夠同時選擇多個過濾器。
3. Overview。 此圖表顯示了資源檢索時間的時間線。若是您看到多條豎線堆疊在一塊兒，則說明這些資源被同時檢索。
4. Requests Table。 此表格列出了檢索的每個資源。 默認狀況下，此表格按時間順序排序，最先的資源在頂部。點擊資源的名稱能夠顯示更多信息。 提示：右鍵點擊 Timeline 之外的任何一個表格標題能夠添加或移除信息列。
5. Summary。 此窗格能夠一目瞭然地告訴您請求總數、傳輸的數據量和加載時間

記錄網絡活動與屏幕截圖

記錄網絡活動：顯示紅色 (記錄按鈕打開) 代表 DevTools 正在記錄。 顯示灰色 (記錄按鈕關閉) 代表 DevTools 未在記錄。 屏幕截圖：能夠在頁面加載期間捕捉屏幕截圖

查看 DOMContentLoaded 和 load 事件信息

咱們要明白這兩個時期先要了解DOM文檔加載流程：

1. 解析HTML結構。
2. 加載外部腳本和樣式表文件。
3. 解析並執行腳本代碼。
4. 構造HTML DOM模型。// DOMContentLoaded 至關於jQuery中的ready
5. 加載圖片等外部文件。
6. 頁面加載完畢。// 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…)，絕大部份內容複製於文檔，只但願引發你的注意，給你個文檔連接地址