本文介紹的 Chrome 開發者工具基於 Chrome 65版本，如果你的 Chrome 開發者工具沒有下文提到的那些內容，請檢查下 Chrome 的版本 本文是 "前端開發必備之Chrome開發者工具（上篇）" 的下篇，廢話不多說，直接開始介紹。 網路面板（Network） 網路面板記錄頁面上每個 ...
本文介紹的 Chrome 開發者工具基於 Chrome 65版本，如果你的 Chrome 開發者工具沒有下文提到的那些內容，請檢查下 Chrome 的版本
本文是 前端開發必備之Chrome開發者工具（上篇） 的下篇，廢話不多說，直接開始介紹。
網路面板（Network）
網路面板記錄頁面上每個網路操作的相關信息，包括詳細的耗時數據、HTTP 請求與響應標頭和 Cookie等等。
捕捉屏幕截圖
Network 面板可以在頁面載入期間捕捉屏幕截圖。此功能稱為幻燈片。
點擊 攝影機 圖標可以啟用幻燈片。圖標為灰色時，幻燈片處於停用狀態 ()。如果圖標為藍色，則說明已啟用 (
)。
重新載入頁面可以捕捉屏幕截圖。屏幕截圖顯示在概覽上方。
將滑鼠懸停在一個屏幕截圖上時，Timeline將顯示一條黃色豎線，指示幀的捕捉時間。
雙擊屏幕截圖可查看放大版本。在屏幕截圖處於放大狀態時，使用鍵盤的向左和向右箭頭可以在屏幕截圖之間導航。
查看 DOMContentLoaded 和 load 事件信息
Network 面板突出顯示兩種事件：DOMContentLoaded 和 load。
解析頁面的初始標記時會觸發 DOMContentLoaded。 此事件將在 Network 面板上的兩個地方顯示：
- Overview 窗格中的藍色豎線表示事件。
- 在 Summary 窗格中，您可以看到事件的確切時間。
頁面完全載入時將觸發 load。此事件顯示在三個地方：
- Overview 窗格中的紅色豎線表示事件。
- Requests Table 中的紅色豎線也表示事件。
- 在 Summary 窗格中，您可以看到事件的確切時間。
導航時保留網路日誌
預設情況下，每當您重新載入當前頁面或者載入不同的頁面時，網路活動記錄會被丟棄。啟用 Preserve log 覆選框可以在這些情況下保存網路日誌。 新記錄將附加到 Requests Table 的底部。
查看網路耗時
要查看 Network 面板中給定條目完整的耗時信息，您有三種選擇。
- 將滑鼠懸停到 Timeline 列下的耗時圖表上。這將呈現一個顯示完整耗時數據的彈出視窗。
- 點擊任何條目並打開該條目的 Timing 標簽。
- 使用 Resource Timing API 從 JavaScript 檢索原始數據。
下麵的代碼可以在 DevTools 的 Console 中運行。 它將使用 Network Timing API 檢索所有資源。 然後，它將通過查找是否存在名稱中包含“style.css”的條目對條目進行過濾。 如果找到，將返回相應條目。
performance.getEntriesByType('resource').filter(item => item.name.includes("style.css"))
Queuing
如果某個請求正在排隊，則指示：
- 請求已被渲染引擎推遲，因為該請求的優先順序被視為低於關鍵資源（例如腳本/樣式）的優先順序。 圖像經常發生這種情況。
- 請求已被暫停，以等待將要釋放的不可用 TCP 套接字。
- 請求已被暫停，因為在 HTTP 1 上，瀏覽器僅允許每個源擁有六個 TCP 連接。
- 生成磁碟緩存條目所用的時間（通常非常迅速）
Stalled/Blocking
請求等待發送所用的時間。 可以是等待 Queueing 中介紹的任何一個原因。 此外，此時間包含代理協商所用的任何時間。
Proxy Negotiation
與代理伺服器連接協商所用的時間。
DNS Lookup
執行 DNS 查詢所用的時間。 頁面上的每一個新域都需要完整的往返才能執行 DNS 查詢。
Initial Connection / Connecting
建立連接所用的時間，包括 TCP 握手/重試和協商 SSL 的時間。
SSL
完成 SSL 握手所用的時間。
Request Sent / Sending
發出網路請求所用的時間。 通常不到一毫秒。
Waiting (TTFB)
等待初始響應所用的時間，也稱為至第一位元組的時間。 此時間將捕捉到伺服器往返的延遲時間，以及等待伺服器傳送響應所用的時間。
Content Download / Downloading
接收響應數據所用的時間。
診斷網路問題
通過 Network 面板可以發現大量可能的問題。查找這些問題需要很好地瞭解客戶端與伺服器如何通信，以及協議施加的限制。
已被加入隊列或已被停止的系列
最常見問題是一系列已被加入隊列或已被停止的條目。這表明正在從單個網域檢索太多的資源。在 HTTP 1.0/1.1 連接上，Chrome 會將每個主機強制設置為最多六個 TCP 連接。如果您一次請求十二個條目，前六個將開始，而後六個將被加入隊列。最初的一半完成後，隊列中的第一個條目將開始其請求流程。
要為傳統的 HTTP 1 流量解決此問題，您需要實現域分片。也就是在您的應用上設置多個子域，以便提供資源。然後，在子域之間平均分配正在提供的資源。
HTTP 1 連接的修複結果不會應用到 HTTP 2 連接上。事實上，前者的結果會影響後者。 如果您部署了 HTTP 2，請不要對您的資源進行域分片，因為它與 HTTP 2 的操作方式相反。在 HTTP 2 中，到伺服器的單個 TCP 連接作為多路復用連接。這消除了 HTTP 1 中的六個連接限制，並且可以通過單個連接同時傳輸多個資源。
至第一位元組的漫長時間
又稱：大片綠色
等待時間長表示至第一位元組的時間 (TTFB) 漫長。建議將此值控制在 200 毫秒以下。長 TTFB 會揭示兩個主要問題之一。
- 客戶端與伺服器之間的網路條件較差
- 伺服器應用的響應慢
要解決長 TTFB，首先請儘可能縮減網路。理想的情況是將應用托管在本地，然後查看 TTFB 是否仍然很長。如果仍然很長，則需要優化應用的響應速度。可以是優化資料庫查詢、為特定部分的內容實現緩存，或者修改您的網路伺服器配置。很多原因都可能導致後端緩慢。您需要調查您的軟體並找出未滿足您的性能預算的內容。
如果本地托管後 TTFB 仍然漫長，那麼問題出在您的客戶端與伺服器之間的網路上。很多事情都可以阻止網路遍歷。客戶端與伺服器之間有許多點，每個點都有其自己的連接限制並可能引發問題。測試時間是否縮短的最簡單方法是將您的應用置於其他主機上，並查看 TTFB 是否有所改善。
達到吞吐量能力
又稱：大片藍色
如果您看到 Content Download 階段花費了大量時間，則提高伺服器響應或串聯不會有任何幫助。首要的解決辦法是減少發送的位元組數。
模擬網路連接
利用網路調節，您可以在不同的網路連接（包括 Edge、3G，甚至離線）下測試網站。這樣可以限制出現最大的下載和上傳吞吐量（數據傳輸速率）。延遲時間操控會強制連接往返時間 (RTT) 出現最小延遲。
可以通過 Network 面板開啟網路調節。從下拉菜單中選擇要應用網路節流和延遲時間操控的連接。
性能面板（Performance）
使用 Chrome DevTools 的 Timeline 面板可以記錄和分析您的應用在運行時的所有活動。 這裡是開始調查應用中可覺察性能問題的最佳位置。
面板概覽
Timeline 面板包含以下四個窗格：
- Controls。開始記錄，停止記錄和配置記錄期間捕獲的信息。
- Overview。 頁面性能的高級彙總。更多內容請參見下文。
- 火焰圖。 CPU 堆疊追蹤的可視化。 您可以在火焰圖上看到一到三條垂直的虛線。藍線代表 DOMContentLoaded 事件。 綠線代表首次繪製的時間。 紅線代表 load 事件。
- Details。選擇事件後，此窗格會顯示與該事件有關的更多信息。 未選擇事件時，此窗格會顯示選定時間範圍的相關信息。
Overview 窗格
Overview 窗格包含以下三個圖表：
- FPS。每秒幀數。綠色豎線越高，FPS 越高。 FPS 圖表上的紅色塊表示長時間幀，很可能會出現卡頓。 2.CPU。 CPU 資源。此面積圖指示消耗 CPU 資源的事件類型。
- NET。每條彩色橫杠表示一種資源。橫杠越長，檢索資源所需的時間越長。 每個橫杠的淺色部分表示等待時間（從請求資源到第一個位元組下載完成的時間）。
深色部分表示傳輸時間（下載第一個和最後一個位元組之間的時間）。
橫杠按照以下方式進行彩色編碼：
- HTML 文件為藍色。
- 腳本為黃色。
- 樣式表為紫色。
- 媒體文件為綠色。
- 其他資源為灰色。
記憶體面板（Memory）
該面板主要能做：
- 使用 Chrome 的任務管理器瞭解您的頁面當前正在使用的記憶體量。
- 使用 Timeline 記錄可視化一段時間內的記憶體使用。
- 使用堆快照確定已分離的 DOM 樹（記憶體泄漏的常見原因）。
- 使用分配時間線記錄瞭解新記憶體在 JS 堆中的分配時間。
應用面板（Application）
該面板主要能做：
- 查看和修改本地存儲與會話存儲。
- 檢查和修改 IndexedDB 資料庫。
- 對 Web SQL 資料庫執行語句。
- 查看應用緩存和服務工作線程緩存。
- 點擊一次按鈕即可清除所有存儲、資料庫、緩存和服務工作線程。
安全面板（Security）
該面板主要能做：
- 使用 Security Overview 可以立即查看當前頁面是否安全。
- 檢查各個源以查看連接和證書詳情（安全源）或找出具體哪些請求未受保護（非安全源）。
檢查源
使用左側面板可以檢查各個安全或非安全源。
點擊安全源查看該源的連接和證書詳情。
如果您點擊非安全源，Security 面板會提供 Network 面板過濾視圖的鏈接。
點擊鏈接可以查看具體是源的哪些請求通過 HTTP 提供。
主菜單（Customize and control DevTools）
模擬感測器：地理定位與加速度計
由於大多數桌面設備都沒有 GPS 晶元和加速度計，所以測試它們比較困難。Chrome DevTools 的 Sensors 模擬窗格可以通過模擬常見的移動設備感測器來降低測試的開銷。
- 模擬地理定位坐標以測試地理定位替換值。
- 模擬設備方向以測試加速度計數據。
要訪問 Chrome DevTools 感測器控制項，請執行以下操作：
- 打開 DevTools 主菜單
- 在 More Tools 菜單下，點擊 Sensors
註：如果您的應用檢測到使用 JavaScript（如 Modernizr）的感測器載入，請確保在啟用感測器模擬器之後重新載入頁面。
替換地理定位數據
與桌面設備不同，移動設備通常使用 GPS 硬體檢測位置。在 Sensors 窗格中，您可以模擬地理定位坐標，以便與 Geolocation API 結合使用。
在模擬抽屜式導航欄的 Sensors 窗格中選中 Emulate geolocation coordinates 覆選框，啟用地理定位模擬。
您可以使用此模擬器替換 navigator.geolocation 的位置值，併在地理定位數據不可用時模擬用例。
模擬加速度計（設備方向）
要測試來自 Orientation API 的加速度計數據，請在 Sensors 窗格中選中 Accelerometer 覆選框，啟用加速度計模擬器。
您可以操作下列方向參數：
- α：圍繞 Z 軸旋轉。
- β：左右傾斜。
- γ：前後傾斜。
您也可以點擊模型加速度計並將其拖動到所需方向。
總結
Chrome開發者工具是一個非常強大的工具，靈活使用將讓你在前端調試中事半功倍。
這兩篇文章只是整理的一些我平時常用的功能，還有很多的功能等著我們去挖掘。
參考資料
https://developers.google.com/web/tools/chrome-devtools/
