本文參考：

• Chrome 開發(fā)者工具中文手冊
• Chrome 開發(fā)者工具官網(wǎng)

概覽

• Elements
• Console
• Source
• Network
• Performance
• Memory
• Application
• Security
• Audits

快捷鍵

訪問 DevTools

全局鍵盤快捷鍵

按面板分類的鍵盤快捷鍵

Elements

Styles 邊欄

Sources

1. 鍵盤快捷鍵參考
2. 打開 Developer Tools（F12） --> 轉(zhuǎn)到設(shè)置（F1）--> 點(diǎn)擊 Shortcuts

Elements 面板

• 檢查和調(diào)整頁面
• 編輯樣式
• 編輯 DOM

檢查和編輯頁面與樣式

• 檢查和實(shí)時(shí)編輯 DOM 樹中的任何元素
• Styles 窗格中查看和更改任何選定元素的 CSS Rules
• Computed 窗格中查看和修改選定元素的盒模型

編輯樣式

• 利用 Styles 窗格，可以在本地以盡可能多的方法更改 CSS ，包括修改現(xiàn)有樣式、添加新樣式，以及為樣式添加規(guī)則
• 如果希望樣式可以保持（刷新后不會(huì)消失），則需要將其保存到開發(fā)工作區(qū)中

檢查應(yīng)用到元素的樣式

Styles 窗格可以顯示應(yīng)用到選定元素的 CSS 規(guī)則，優(yōu)先級(jí)從高到低：

• 頂端為 element.style
• 下方是與元素匹配的任何 CSS 規(guī)則
• 再下方是繼承的樣式，其中包括與選定元素的祖先實(shí)體匹配的任何可繼承樣式規(guī)則

元素應(yīng)用到的樣式

添加、啟用和停用 CSS 類

點(diǎn)擊 .cls 按鈕可查看與當(dāng)前選定元素關(guān)聯(lián)的所有 CSS 類

• 啟用或停用當(dāng)前與元素關(guān)聯(lián)的類
• 向元素添加新類

.cls 按鈕

向樣式規(guī)則添加背景色或顏色

Styles 窗格提供了一個(gè)用于向樣式規(guī)則添加 color 和 background-color 聲明的快捷方式。

添加color等屬性的快捷方式

使用 Color Picker 修改顏色

點(diǎn)擊顏色聲明值左側(cè)帶顏色的小方格，即可打開 Color Picker 。

color-picker 簡介

1. 取色器
2. 當(dāng)前顏色
3. 當(dāng)前值
4. 調(diào)色板
5. 著色和陰影選擇器
6. 色調(diào)選擇器
7. 不透明度選擇器
8. 顏色值選擇器
9. 調(diào)色板選擇器

編輯 DOM

• 定義你的頁面結(jié)構(gòu)
• 通過渲染的 DOM 實(shí)時(shí)編輯頁面的內(nèi)容和結(jié)構(gòu)
• 無法在 Elements 面板中通過 DOM 更改修改源文件
• 使用 DOM 斷點(diǎn)留意 DOM 更改

滾動(dòng)到視圖

點(diǎn)擊右鍵節(jié)點(diǎn)并選擇 Scroll into View

設(shè)置 DOM 斷點(diǎn)

可用于調(diào)試復(fù)雜的 JavaScript 應(yīng)用，在發(fā)生下列一種 DOM 更改時(shí)觸發(fā)斷點(diǎn)：子樹更改、屬性更改、節(jié)點(diǎn)移除

與 DOM 斷點(diǎn)交互

觸發(fā) DOM 斷點(diǎn)時(shí)，斷點(diǎn)將在 DOM Breakpoints 窗格中突出顯示。 Call Stack 窗格將顯示調(diào)試程序暫停的原因

查看元素事件偵聽器

在 Event Listeners 窗格中查看與 DOM 節(jié)點(diǎn)關(guān)聯(lián)的 JavaScript 事件偵聽器

Event Listeners 窗格

Console 面板

• 使用控制臺(tái)面板
• 命令行交互

使用控制臺(tái)

• 堆疊冗余消息，或者將其顯示在各自的行上
• 清除或保留頁面之間的輸出，或者將其保存到文件中
• 按嚴(yán)重性等級(jí)、通過隱藏網(wǎng)絡(luò)消息或者按正則表達(dá)式模式對輸出進(jìn)行過濾

處理控制臺(tái)歷史記錄

保留歷史記錄：啟用控制臺(tái)頂部的 Preserve log 復(fù)選框可以在頁面刷新或更改之間保留控制臺(tái)歷史記錄。消息會(huì)一直存儲(chǔ)，直到清除控制臺(tái)或關(guān)閉標(biāo)簽。

選擇執(zhí)行環(huán)境

Execution Context Selector

一般，執(zhí)行環(huán)境默認(rèn)為top（頁面的頂部框架）。
如果要查看 <iframe> 元素的日志輸出，并修改該環(huán)境中存在的某個(gè)變量，需要從 Execution Context Selector 下拉菜單中選中該元素，另外開發(fā)者很少需要在 top 以外的任意環(huán)境中操作。

Execution Context Selector 設(shè)置為該 <iframe> 的環(huán)境

其他設(shè)置

Console 其他設(shè)置

Source 面板

• 斷點(diǎn)調(diào)試
• 調(diào)試混淆的代碼
• 使用開發(fā)者工具的Workspaces（工作區(qū)）進(jìn)行持久化保存

使用斷點(diǎn)調(diào)試代碼

XHR

在 XHR Breakpoints 中添加斷點(diǎn)，如圖所示，當(dāng)匹配到 URL 中包含'org'字符時(shí)，代碼暫停執(zhí)行。

添加 XHR 斷點(diǎn)

Network 面板

• 網(wǎng)絡(luò)面板基礎(chǔ)
• 資源時(shí)間軸
• 網(wǎng)絡(luò)帶寬限制

測量資源加載時(shí)間

• 使用 Network 面板記錄和分析網(wǎng)絡(luò)活動(dòng)
• 整體或單獨(dú)查看資源的加載信息
• 過濾和排序資源的顯示方式
• 保存、復(fù)制和清除網(wǎng)絡(luò)記錄

Network 面板概覽

Network 面板由五個(gè)窗格組成：

1. Controls
2. Filters
3. OverView：顯示了資源檢索時(shí)間的時(shí)間線，如果多條豎線堆疊在一起，說明這些資源被同時(shí)檢索
4. Requests Table
5. Summary

Network 面板

默認(rèn)情況下，Requests Table 會(huì)顯示以下列。

• Name：資源的名稱
• Status：HTTP 狀態(tài)代碼
• Type：已請求資源的 MIME 類型
• Initiator：發(fā)起請求的對象或進(jìn)程。值為以下選項(xiàng)之一：
  1. Parser：Chrome 的 HTML 解析器發(fā)起請求
  2. Redirect：HTTP 重定向發(fā)起請求
  3. Script：腳本發(fā)起請求
  4. Other：某些其他進(jìn)程或操作發(fā)起請求，例如用戶通過鏈接或者在地址欄中輸入網(wǎng)址導(dǎo)航到頁面。
• Size：響應(yīng)頭（通常為數(shù)百字節(jié)）加響應(yīng)正文（由服務(wù)器提供）的組合大小
• Time：從請求開始至在響應(yīng)中接收到最終字節(jié)的總持續(xù)時(shí)間
• Timeline：顯示所有網(wǎng)絡(luò)請求的可視瀑布

在記錄期間捕捉屏幕截圖

點(diǎn)擊攝影機(jī)圖標(biāo)可以啟用幻燈片功能，即頁面加載期間捕捉屏幕截圖。

查看 DOMContentLoaded 和 load 事件信息

解析頁面的初始標(biāo)記時(shí)會(huì)觸發(fā) DOMContentLoaded 。

DOMContentLoaded

頁面完全加載時(shí)將觸發(fā) Load。

Load

查看單個(gè)資源的詳細(xì)信息

點(diǎn)擊資源名稱，可查看與該資源更多的信息，下面四個(gè)標(biāo)簽最常見：

• Headers：與資源關(guān)聯(lián)的 HTTP 標(biāo)頭
• Preview：JSON、圖像和文本資源的預(yù)覽
• Response：HTTP 響應(yīng)數(shù)據(jù)（如果存在）
• Timing：資源請求生命周期的精細(xì)分解

產(chǎn)看網(wǎng)絡(luò)耗時(shí)

鼠標(biāo)懸停在 Timeline 圖表內(nèi)的資源上，可查看網(wǎng)絡(luò)耗時(shí)信息

網(wǎng)絡(luò)耗時(shí)信息

查看 HTTP 標(biāo)頭

Headers 標(biāo)簽可以顯示資源的請求網(wǎng)址、HTTP 方法以及響應(yīng)狀態(tài)代碼。 此外，該標(biāo)簽還會(huì)列出 HTTP 響應(yīng)和請求標(biāo)頭、它們的值以及任何查詢字符串參數(shù)。

查看 Cookie

點(diǎn)擊 Cookies 標(biāo)簽可以查看在資源的 HTTP 請求和響應(yīng)標(biāo)頭中傳輸?shù)?Cookie 表。 只有傳輸 Cookie 時(shí)，此標(biāo)簽才可用。

查看資源發(fā)起者和依賴項(xiàng)

按住 Shift 并將鼠標(biāo)懸停在資源上，可查看其發(fā)起者和依賴項(xiàng)。將懸停部分的資源稱為目標(biāo)，目標(biāo)上方綠色編碼資源為目標(biāo)的發(fā)起者，下方紅色編碼資源為都是目標(biāo)的依賴項(xiàng)。

資源發(fā)起者和依賴項(xiàng)

優(yōu)化網(wǎng)絡(luò)性能的相關(guān)資源

• 使用 PageSpeed Insights 確定可以應(yīng)用到您網(wǎng)站的性能最佳做法
• 網(wǎng)頁性能最佳做法提供了更多用于優(yōu)化您的網(wǎng)頁或應(yīng)用的網(wǎng)絡(luò)性能的提示

資源時(shí)間軸

Resource Timing API 提供了與接收各個(gè)資源的時(shí)間有關(guān)的大量詳細(xì)信息。請求生命周期的主要階段如下圖所示。

請求生命周期的主要階段

在 Devtools 中查看

資源耗時(shí)信息

Queuing
如果某個(gè)請求正在排隊(duì)，則指示：

• 請求已被渲染引擎推遲，因?yàn)樵撜埱蟮膬?yōu)先級(jí)被視為低于關(guān)鍵資源（例如腳本/樣式）的優(yōu)先級(jí)。 圖像經(jīng)常發(fā)生這種情況。
• 請求已被暫停，以等待將要釋放的不可用 TCP 套接字。
• 請求已被暫停，因?yàn)樵?HTTP 1 上，瀏覽器僅允許每個(gè)源擁有六個(gè) TCP 連接。
• 生成磁盤緩存條目所用的時(shí)間（通常非常迅速）。

Stalled/Blocking
請求等待發(fā)送所用的時(shí)間。 可以是等待 Queueing 中介紹的任何一個(gè)原因。 此外，此時(shí)間包含代理協(xié)商所用的任何時(shí)間。

Proxy Negotiation
與代理服務(wù)器連接協(xié)商所用的時(shí)間。

DNS Lookup
執(zhí)行 DNS 查詢所用的時(shí)間。 頁面上的每一個(gè)新域都需要完整的往返才能執(zhí)行 DNS 查詢。

Initial Connection / Connecting
建立連接所用的時(shí)間，包括 TCP 握手/重試和協(xié)商 SSL 的時(shí)間。

SSL
完成 SSL 握手所用的時(shí)間。

Request Sent / Sending
發(fā)出網(wǎng)絡(luò)請求所用的時(shí)間。 通常不到一毫秒。

Waiting (TTFB)
等待初始響應(yīng)所用的時(shí)間，也稱為至第一字節(jié)（Time To First Byte）的時(shí)間。 此時(shí)間將捕捉到服務(wù)器往返的延遲時(shí)間，以及等待服務(wù)器傳送響應(yīng)所用的時(shí)間。

Content Download / Downloading
接收響應(yīng)數(shù)據(jù)所用的時(shí)間。

至第一字節(jié)的漫長時(shí)間

又稱：大片綠色

大片綠色

等待時(shí)間長表示至第一字節(jié)的時(shí)間 (TTFB) 漫長。建議將此值控制在200 毫秒以下。
要解決長TTFB，首先盡可能地縮減網(wǎng)絡(luò)。理想情況是將應(yīng)用托管在本地，若TTFB仍然很長，則需要優(yōu)化應(yīng)用的響應(yīng)速度?？梢允莾?yōu)化數(shù)據(jù)庫查詢、為特定部分的內(nèi)容實(shí)現(xiàn)緩存，或者修改您的網(wǎng)絡(luò)服務(wù)器配置。

達(dá)到吞吐量能力

又稱：大片綠色

大片藍(lán)色

如果 Content Download 階段花費(fèi)了大量時(shí)間，首要的解決辦法是減少發(fā)送的字節(jié)數(shù)。

Performance 面板

• 查看性能
• 分析運(yùn)行時(shí)性能
• 診斷強(qiáng)制的同步布局

使用 Timeline 工具

• 執(zhí)行 Timeline 記錄，分析頁面加載或用戶交互后發(fā)生的每個(gè)事件
• 在 Overview 窗格中查看 FPS、CPU 和網(wǎng)絡(luò)請求
• 點(diǎn)擊火焰圖中的事件以查看與其相關(guān)的詳細(xì)信息
• 放大顯示一部分記錄以簡化分析

Timeline 面板概覽

Timeline 面板包含以下四個(gè)窗格：

1. Controls：開始記錄，停止記錄和配置記錄期間捕獲的信息
2. Overview：頁面性能的高級(jí)匯總
3. 火焰圖：CPU 堆疊追蹤的可視化?；鹧鎴D上有三條垂直的虛線，藍(lán)線代表 DOMContentLoaded 事件，綠線代表首次繪制的時(shí)間，紅線代表 load 事件
4. Details：選擇事件后，此窗格會(huì)顯示與該事件有關(guān)的更多信息。 未選擇事件時(shí)，此窗格會(huì)顯示選定時(shí)間范圍的相關(guān)信息。

TimeLine 面板

Overview 窗格

Overview 窗格包含以下三個(gè)圖表：

1. FPS：每秒幀數(shù)。綠色豎線越高，F(xiàn)PS 越高。 FPS 圖表上的紅色塊表示長時(shí)間幀，很可能會(huì)出現(xiàn)卡頓
2. CPU：CPU 資源。此面積圖指示消耗 CPU 資源的事件類型。
3. NET：每條彩色橫杠表示一種資源。橫杠越長，檢索資源所需的時(shí)間越長。 橫杠按照以下方式進(jìn)行彩色編碼：

• HTML 文件為藍(lán)色
• 腳本為黃色
• 樣式表為紫色
• 媒體文件為綠色
• 其他資源為灰色

OverView 窗格

分析運(yùn)行時(shí)性能

• 不要編寫會(huì)強(qiáng)制瀏覽器重新計(jì)算布局的 JavaScript
• CSS 不要過于復(fù)雜
• 選擇根本不會(huì)觸發(fā)布局的 CSS
• 繪制比任何其他渲染活動(dòng)花費(fèi)的時(shí)間都要多

診斷強(qiáng)制同步布局

收集數(shù)據(jù)

1. 演示地址
2. 打開 Performance 面板
3. 點(diǎn)擊頁面上的 Start 啟動(dòng)動(dòng)畫
4. 點(diǎn)擊 Performance 面板上的 Record 按鈕開始記錄
5. 等待幾秒后，再次點(diǎn)擊 Record 按鈕停止記錄

完成記錄后，應(yīng)看到如下圖所示的內(nèi)容。

收集數(shù)據(jù)記錄

確定問題

在 Timeline 記錄的 Summary 窗格中可以看出瀏覽器在渲染上花費(fèi)的時(shí)間最多。如果可以優(yōu)化頁面布局操作，就可以減少花費(fèi)在渲染上的時(shí)間。
要使動(dòng)畫流暢，就需要使 FPS 達(dá)到 60。
現(xiàn)在，將調(diào)用棧放大：

函數(shù)調(diào)用棧

堆棧的頂端是 Animation Frame Fired 事件。在 Animation Frame Fired 下方，可以看到 Function Call，在它的下方，看到 update?？梢酝茢嗝麨?update() 的方法是 requestAnimationFrame() 的回調(diào)。

現(xiàn)在，將注意力轉(zhuǎn)移到 update 事件下方的所有紫色小事件上。 許多這些事件的頂部為紅色，那是警告標(biāo)志。 將鼠標(biāo)懸停在這些事件上方，可以看到 DevTools 在警告頁面可能會(huì)被強(qiáng)制自動(dòng)重排。
點(diǎn)擊其中一個(gè)布局事件可以選擇它。在 Summary 窗格中，會(huì)看到與此事件有關(guān)的詳細(xì)信息。 點(diǎn)擊 Layout Forced (update @ forcedsync.html:457) 下面的鏈接跳轉(zhuǎn)到函數(shù)定義。

診斷問題

現(xiàn)在，在 Sources 面板中應(yīng)看到函數(shù)定義

跳轉(zhuǎn)至函數(shù)定義

update() 函數(shù)是 requestAnimationCallback() 的回調(diào)處理程序。 處理程序會(huì)根據(jù)每個(gè)圖像的 offsetTop 值計(jì)算其 left 屬性。 這將強(qiáng)制瀏覽器立即執(zhí)行新布局，以便確保其提供正確的值。在每個(gè)動(dòng)畫幀期間強(qiáng)制布局是導(dǎo)致頁面上出現(xiàn)動(dòng)畫卡頓的原因。

在 DevTools 中應(yīng)用修復(fù)

打開 Console 面板，在 Console 中重新定義函數(shù)。從 HTML 文件復(fù)制函數(shù)定義，并將其粘貼到 DevTools 的 Console 中。刪除使用 offsetTop 的語句并取消注釋其下面的語句。 完成后，按 Enter。

修復(fù)問題

現(xiàn)在，重啟動(dòng)畫?？梢灾庇^地驗(yàn)證現(xiàn)在順暢多了。

使用另一個(gè)記錄驗(yàn)證

優(yōu)化后效果