前端開發必備之Chrome開發者工具（下篇）

本文介紹的 Chrome 開發者工具基於 Chrome 65版本，若是你的 Chrome 開發者工具沒有下文提到的那些內容，請檢查下 Chrome 的版本

本文是 前端開發必備之Chrome開發者工具（上篇） 的下篇，廢話很少說，直接開始介紹。

網絡面板（Network）

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

捕捉屏幕截圖

Network 面板能夠在頁面加載期間捕捉屏幕截圖。此功能稱爲幻燈片。

點擊 攝影機 圖標能夠啓用幻燈片。圖標爲灰色時，幻燈片處於停用狀態 ()。若是圖標爲藍色，則說明已啓用 ()。

從新加載頁面能夠捕捉屏幕截圖。屏幕截圖顯示在概覽上方。

將鼠標懸停在一個屏幕截圖上時，Timeline將顯示一條黃色豎線，指示幀的捕捉時間。

雙擊屏幕截圖可查看放大版本。在屏幕截圖處於放大狀態時，使用鍵盤的向左和向右箭頭能夠在屏幕截圖之間導航。

查看 DOMContentLoaded 和 load 事件信息

Network 面板突出顯示兩種事件：DOMContentLoaded 和 load。

解析頁面的初始標記時會觸發 DOMContentLoaded。 此事件將在 Network 面板上的兩個地方顯示：

1. Overview 窗格中的藍色豎線表示事件。
2. 在 Summary 窗格中，您能夠看到事件的確切時間。

頁面徹底加載時將觸發 load。此事件顯示在三個地方：

1. Overview 窗格中的紅色豎線表示事件。
2. Requests Table 中的紅色豎線也表示事件。
3. 在 Summary 窗格中，您能夠看到事件的確切時間。

導航時保留網絡日誌

默認狀況下，每當您從新加載當前頁面或者加載不一樣的頁面時，網絡活動記錄會被丟棄。啓用 Preserve log 複選框能夠在這些狀況下保存網絡日誌。 新記錄將附加到 Requests Table 的底部。

查看網絡耗時

要查看 Network 面板中給定條目完整的耗時信息，您有三種選擇。

1. 將鼠標懸停到 Timeline 列下的耗時圖表上。這將呈現一個顯示完整耗時數據的彈出窗口。
2. 點擊任何條目並打開該條目的 Timing 標籤。
3. 使用 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 會揭示兩個主要問題之一。

1. 客戶端與服務器之間的網絡條件較差
2. 服務器應用的響應慢

要解決長 TTFB，首先請儘量縮減網絡。理想的狀況是將應用託管在本地，而後查看 TTFB 是否仍然很長。若是仍然很長，則須要優化應用的響應速度。能夠是優化數據庫查詢、爲特定部分的內容實現緩存，或者修改您的網絡服務器配置。不少緣由均可能致使後端緩慢。您須要調查您的軟件並找出未知足您的性能預算的內容。

若是本地託管後 TTFB 仍然漫長，那麼問題出在您的客戶端與服務器之間的網絡上。不少事情均可以阻止網絡遍歷。客戶端與服務器之間有許多點，每一個點都有其本身的鏈接限制並可能引起問題。測試時間是否縮短的最簡單方法是將您的應用置於其餘主機上，並查看 TTFB 是否有所改善。

達到吞吐量能力

又稱：大片藍色

若是您看到 Content Download 階段花費了大量時間，則提升服務器響應或串聯不會有任何幫助。首要的解決辦法是減小發送的字節數。

模擬網絡鏈接

利用網絡調節，您能夠在不一樣的網絡鏈接（包括 Edge、3G，甚至離線）下測試網站。這樣能夠限制出現最大的下載和上傳吞吐量（數據傳輸速率）。延遲時間操控會強制鏈接往返時間 (RTT) 出現最小延遲。

能夠經過 Network 面板開啓網絡調節。從下拉菜單中選擇要應用網絡節流和延遲時間操控的鏈接。

性能面板（Performance）

使用 Chrome DevTools 的 Timeline 面板能夠記錄和分析您的應用在運行時的全部活動。 這裏是開始調查應用中可覺察性能問題的最佳位置。

面板概覽

Timeline 面板包含如下四個窗格：

1. Controls。開始記錄，中止記錄和配置記錄期間捕獲的信息。
2. Overview。 頁面性能的高級彙總。更多內容請參見下文。
3. 火焰圖。 CPU 堆疊追蹤的可視化。
   您能夠在火焰圖上看到一到三條垂直的虛線。藍線表明 DOMContentLoaded 事件。 綠線表明首次繪製的時間。 紅線表明 load 事件。
4. Details。選擇事件後，此窗格會顯示與該事件有關的更多信息。 未選擇事件時，此窗格會顯示選定時間範圍的相關信息。

Overview 窗格

Overview 窗格包含如下三個圖表：

1. FPS。每秒幀數。綠色豎線越高，FPS 越高。 FPS 圖表上的紅色塊表示長時間幀，極可能會出現卡頓。
   2.CPU。 CPU 資源。此面積圖指示消耗 CPU 資源的事件類型。
2. 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 傳感器控件，請執行如下操做：

1. 打開 DevTools 主菜單
2. 在 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/