Chrome DevTools 全攻略！助力高效開發(fā)

李華西，微醫(yī)云服務(wù)團(tuán)隊(duì)前端開發(fā)工程師，喜歡瞎折騰，典型貓奴

Console 面板

此章節(jié)請(qǐng)打開 justwe7.github.io/devtools/console/console.html 一起食用

一方面用來記錄頁面在執(zhí)行過程中的信息（一般通過各種 console 語句來實(shí)現(xiàn)），另一方面用來當(dāng)做 shell 窗口來執(zhí)行腳本以及與頁面文檔、DevTools 等進(jìn)行交互

組合快捷鍵按鍵:
Windows: Control + Shift + J
Mac: Command + Option + J

首先看一下 console 對(duì)象下面都有哪些方法:

console.clear()

顧名思義，清空控制臺(tái)

console.log(), info(), warn(), error()

日常用的比較多的就是這幾個(gè)了，其中 log 和 info，印象中在 2016 年之前老用 info 打印，還是有區(qū)別的，info 輸出的內(nèi)容前面是有一個(gè)藍(lán)色背景的小圈, 大概跟這個(gè)差不多: i，后來 chrome 更新就沒了(IE 還是可以看出差別的)

console.log('普通信息')
console.info('提示性信息')
console.error('錯(cuò)誤信息')
console.warn('警示信息')

使用占位符

// 支持逗號(hào)分隔參數(shù)，不需要每個(gè)參數(shù)都單獨(dú)打印
console.log(1, '2', +'3')
// 占位符
// %s
console.log('今晚%s 老虎', '打', '？？？')
// %c
console.log('今晚%s%c 老虎', '打', 'color: red', '？？？')
// 帶有占位符的參數(shù)之后的若干參數(shù)屬于占位符的配置參數(shù)

其余的占位符列表還有：

console.time(), timeEnd()

time 和 timeEnd 一般放在一起用，傳入一個(gè)參數(shù)用來標(biāo)識(shí)起始位置用于統(tǒng)計(jì)時(shí)間:

console.time('t')
Array(900000).fill({}).forEach((v, index) => v.index = index)
console.timeEnd('t')
// t: 28.18603515625ms

會(huì)打印出中間代碼的執(zhí)行時(shí)間

console.count()

顧名思義。。計(jì)數(shù),可以用來統(tǒng)計(jì)某個(gè)函數(shù)的執(zhí)行次數(shù)，也可以傳入一個(gè)參數(shù)，并且根據(jù)傳入的參數(shù)分組統(tǒng)計(jì)調(diào)用的次數(shù)

function foo(type = '') {
  type ? console.count(type) : console.count()
  return 'type：' + type
}

foo('A') //A: 1
foo('B') //B: 1
foo()    //default: 1
foo()    //default: 2
foo()    //default: 3
foo('A') //A: 2

console.trace()

用于追蹤代碼的調(diào)用棧，不用專門斷點(diǎn)去看了

console.trace()
function foo() {
  console.trace()
}
foo()

console.table()

console.table()方法可以將復(fù)合類型的數(shù)據(jù)轉(zhuǎn)為表格顯示

var arr = [
  { name: '梅西', qq: 10 },
  { name: 'C 羅', qq: 7 },
  { name: '內(nèi)馬爾', qq: 11 },
]
console.table(arr)

console.dir()

按便于閱讀和打印的形式將對(duì)象打印

var obj = {
  name: 'justwe7',
  age: 26,
  fn: function () {
    alert('justwe7')
  },
}
console.log(obj)
console.dir(obj)

打印 DOM 對(duì)象區(qū)別：

console.assert()

斷言，用來進(jìn)行條件判斷。當(dāng)表達(dá)式為 false 時(shí)，則顯示錯(cuò)誤信息，不會(huì)中斷程序執(zhí)行。

可以用于提示用戶，內(nèi)部狀態(tài)不正確（把那個(gè)說假話的揪出來）

var val = 1
console.assert(val === 1, '等于 1')
console.assert(val !== 1, '不等于 1')
console.log('代碼往下執(zhí)行呢啊')

console.group(), groupEnd()

分組輸出信息，可以用鼠標(biāo)折疊/展開

console.group('分組 1')
console.log('分組 1-1111')
console.log('分組 1-2222')
console.log('分組 1-3333')
console.groupEnd()
console.group('分組 2')
console.log('分組 2-1111')
console.log('分組 2-2222')
console.log('分組 2-3333')
console.groupEnd()

$ 選擇器

$_

可以記錄上次計(jì)算的結(jié)果，直接用于代碼執(zhí)行:

$0,$1...$4

代表最近 5 個(gè)審查元素選中過的 DOM 節(jié)點(diǎn)，看圖（是要選中一下，我更喜歡用存儲(chǔ)全局變量的方式玩，省的自己手殘又選了一個(gè)節(jié)點(diǎn)）：

$和$$

• $(selector)是原生 document.querySelector() 的封裝。
• $$(selector)返回的是所有滿足選擇條件的元素的一個(gè)集合，是 document.querySelectorAll() 的封裝

$x

將所匹配的節(jié)點(diǎn)放在一個(gè)數(shù)組里返回

<ul>
  <ul>
    <li><p>li 下的 p1p>li>
    <li><p>li 下的 p2p>li>
    <li><p>li 下的 p3p>li>
  ul>
ul>
<p>外面的 pp>

$x('//li') // 所有的 li
$x('//p') // 所有的 p
$x('//li//p') // 所有的 li 下的 p
$x('//li[p]') // 所有的 li 下的 p

keys(), values()

跟 ES6 對(duì)象擴(kuò)展方法， Object.keys() 和 Object.values() 相同

keys(obj);
values(obj);

copy()

可以直接將變量復(fù)制到剪貼板

copy(temp1)

與 Save global variable 結(jié)合使用神器

Element 面板

此章節(jié)請(qǐng)打開 justwe7.github.io/devtools/element/element.html 一起食用

在 Elements 面板中可以通過 DOM 樹的形式查看所有頁面元素，同時(shí)也能對(duì)這些頁面元素進(jìn)行所見即所得的編輯

組合快捷鍵按鍵:
Windows: Control + Shift + C
Mac: Command + Option + C

css 調(diào)試

style

選中目標(biāo)節(jié)點(diǎn)，element 面版，查看 style->:hov,選擇對(duì)應(yīng)的狀態(tài)即可

computed

有時(shí)候樣式覆蓋過多，查看起來很麻煩，computed 就派上用場(chǎng)了

點(diǎn)擊某個(gè)樣式可以直接跳轉(zhuǎn)至對(duì)應(yīng) css 定義

調(diào)整某個(gè)元素的數(shù)值

選中想要更改的值，按方向鍵上下就可以 + / - 1 個(gè)單位的值

alt + 方向鍵 可以 ×10 調(diào)整單位值
Ctrl + 方向鍵 可以 ×100 調(diào)整單位值
shift + 方向鍵 可以 /10 調(diào)整單位

html 調(diào)試

騷操作

選中節(jié)點(diǎn)，直接按鍵盤 H 可以直接讓元素顯示/隱藏，不用手動(dòng)敲樣式了，效果等同 visibility: hidden，還是要占據(jù)盒模型空間的。（記得把輸入法改成英文~）

將某個(gè)元素存儲(chǔ)到全局臨時(shí)變量中

選中節(jié)點(diǎn)，右鍵，Store as global variable（在 network 面板中也能用，尤其是篩選接口的返回值很方便）

滾動(dòng)到某個(gè)節(jié)點(diǎn)

如果頁面很長(zhǎng)，想找一個(gè)文本節(jié)點(diǎn)的顯示位置又不想手動(dòng)滑動(dòng)可以試試 Scroll into view

Edge 專屬的 3D 視圖

使用 chromium 后的 Edge 真的是改頭換面，3D 視圖可以幫忙定位一些定位層級(jí)還有 DOM 嵌套的問題，頁面結(jié)構(gòu)寫的好不好看很直觀的可以看出來(跟輔助功能里面的 dom 樹結(jié)合使用很舒服)

目前 chrome 還是沒有這項(xiàng)功能的，Edge 打開位置：控制臺(tái)打開狀態(tài) => Esc打開抽屜 => ···選擇 3D 視圖面板

DOM 斷點(diǎn)

可以監(jiān)聽到 DOM 節(jié)點(diǎn)的變更(子節(jié)點(diǎn)變動(dòng)/屬性變更/元素移除)，并斷點(diǎn)至變更 DOM 狀態(tài)的 js 代碼行：

Network 面板

可以查看通過網(wǎng)絡(luò)請(qǐng)求的資源的相關(guān)詳細(xì)信息

組合快捷鍵按鍵:
Windows: Control + Shift + I
Mac: Command + Option + I

按區(qū)域劃分大概分為如下幾個(gè)區(qū)域：

1. Controls - 控制 Network 功能選項(xiàng)，以及一些展示外觀
2. Filters - 控制在 Requests Table 中顯示哪些類型的資源

   tips：按住 Cmd (Mac) 或 Ctrl (Windows/Linux) 并點(diǎn)擊篩選項(xiàng)可以同時(shí)選擇多個(gè)篩選項(xiàng)

3. Overview - 此圖表顯示了資源檢索時(shí)間的時(shí)間線。如果看到多條豎線堆疊在一起，則說明這些資源被同時(shí)檢索
4. Requests Table - 此表格列出了檢索的每一個(gè)資源。默認(rèn)情況下，此表格按時(shí)間順序排序，最早的資源在頂部。點(diǎn)擊資源的名稱可以顯示更多信息。提示：右鍵點(diǎn)擊 Timeline 以外的任何一個(gè)表格標(biāo)題可以添加或移除信息列
5. Summary - 可以一目了然地看到頁面的請(qǐng)求總數(shù)、傳輸?shù)臄?shù)據(jù)總量、加載時(shí)間

（1、2）Controls，F(xiàn)ilters 區(qū)域

Filters 控制的展示：

• 使用大請(qǐng)求行 - 默認(rèn)情況下，Requests Table一個(gè)資源只顯示很小的一行。選中Use large resource rows(使用大資源行)按鈕可以顯示兩個(gè)文本字段：主要字段和次要字段。
• 捕獲屏幕截圖 - 將鼠標(biāo)懸停在某個(gè)屏幕截圖上的時(shí)候，Timeline/Waterfall(時(shí)間軸)會(huì)顯示一條垂直的黃線，指示該幀是何時(shí)被捕獲的
• 顯示概述 - 展示頁面整個(gè)生命周期的各個(gè)階段（Overview 區(qū)域）的耗時(shí)（藍(lán)色綠色的那些橫杠）

（3） Overview 區(qū)域

頁面整個(gè)生命周期的各個(gè)階段網(wǎng)絡(luò)資源加載耗時(shí)信息的匯總，可以選擇區(qū)域來篩選 Requests Table 的詳細(xì)資源信息

(4) Requests Table 區(qū)域

標(biāo)題欄的對(duì)應(yīng)描述：

• Name(名稱): 資源的名稱。
• Status(狀態(tài)): HTTP 狀態(tài)代碼。
• Type(類型): 請(qǐng)求的資源的 MIME 類型。
• Initiator(發(fā)起): 發(fā)起請(qǐng)求的對(duì)象或進(jìn)程。它可能有以下幾種值：
• Parser(解析器): Chrome 的 HTML 解析器發(fā)起了請(qǐng)求。
• Redirect(重定向): HTTP 重定向啟動(dòng)了請(qǐng)求。
• Script(腳本): 腳本啟動(dòng)了請(qǐng)求。
• Other(其他): 一些其他進(jìn)程或動(dòng)作發(fā)起請(qǐng)求，例如用戶點(diǎn)擊鏈接跳轉(zhuǎn)到頁面，或在地址欄中輸入網(wǎng)址。
• Size(大小): 響應(yīng)頭的大小（通常是幾百字節(jié)）加上響應(yīng)數(shù)據(jù)，由服務(wù)器提供。
• Time(時(shí)間): 總持續(xù)時(shí)間，從請(qǐng)求的開始到接收響應(yīng)中的最后一個(gè)字節(jié)
• Timeline/Waterfall(時(shí)間軸): 顯示所有網(wǎng)絡(luò)請(qǐng)求的可視化統(tǒng)計(jì)信息

在標(biāo)題欄如(Name 上)右鍵，可以添加或刪除信息列。比如可以多加一列 Response Header => Content-Encoding 選項(xiàng)來總覽頁面資源的 gzip 壓縮情況:

重新發(fā)起xhr請(qǐng)求

在平時(shí)和后端聯(lián)調(diào)時(shí)，我們用的最多的可能就是Network面板了。但是每次想重新查看一個(gè)請(qǐng)求通過刷新頁面、點(diǎn)擊按鈕等方式去觸發(fā)xhr請(qǐng)求，這種方式有時(shí)顯得會(huì)比較麻煩，可以通過Replay XHR的方式去發(fā)起一條新的請(qǐng)求：

查看 HTTP 相關(guān)信息

查看網(wǎng)絡(luò)請(qǐng)求的參數(shù)

可以通過點(diǎn)擊 query string parameters (查詢字符串參數(shù))旁邊的 view URL encoded (查看 URL 編碼)或 view decoded (查看解碼)鏈接，查看 URL 編碼或解碼格式的 query string parameters (查詢字符串參數(shù))。在使用 postman 復(fù)制相關(guān)入?yún)r(shí)尤其實(shí)用。

查看 HTTP 響應(yīng)內(nèi)容點(diǎn)擊 Response(響應(yīng))標(biāo)簽頁可以查看該資源未格式化的 HTTP 響應(yīng)內(nèi)容

接口的返回值(在 preview 中）同樣也可以 Save global variable 存儲(chǔ)一個(gè)全局變量

Size 和 Time 為什么有兩行參數(shù)？

關(guān)于 Size 列

Size有兩行：

• 第一行表示的是數(shù)據(jù)的傳輸時(shí)的大小，例如上圖中的190KB
• 第二行表示的是數(shù)據(jù)實(shí)際的大小708KB

在服務(wù)器端采取gzip壓縮算法將原有708KB壓縮至190KB,傳輸大小縮短3.7 倍，大大的提高了資源傳輸?shù)男?/p>

需要注意的點(diǎn)：

gzip壓縮只會(huì)壓縮響應(yīng)體內(nèi)容，所以適用于返回?cái)?shù)據(jù)量大的時(shí)候，如果數(shù)據(jù)量太小的話，有可能會(huì)導(dǎo)致數(shù)據(jù)傳輸時(shí)的大小比實(shí)際大小要大(加入了一些額外的響應(yīng)頭)

關(guān)于 Time 列

Time 有兩行：

• 第一行表示從客戶端發(fā)送請(qǐng)求到服務(wù)端返回所有數(shù)據(jù)所花費(fèi)的總時(shí)間，對(duì)于上圖來說就是471ms
• 第二行表示的是從客戶端發(fā)送請(qǐng)求到服務(wù)器端返回第一個(gè)字節(jié)所表示的時(shí)間，對(duì)于上圖來說就是55ms

第一行的時(shí)間代表了所有項(xiàng)目：例如解析 dns，建立連接，等待服務(wù)器返回?cái)?shù)據(jù)，傳輸數(shù)據(jù)等

第二行的時(shí)間是 總時(shí)間 - 數(shù)據(jù)傳輸的時(shí)間

從上面的分析中我們看到 從客戶端請(qǐng)求到服務(wù)器處理結(jié)束準(zhǔn)備返回?cái)?shù)據(jù)花了55ms，但是在進(jìn)行傳輸數(shù)據(jù)的時(shí)候花費(fèi)了471ms

對(duì)于網(wǎng)慢的用戶來說，可能會(huì)耗費(fèi)更長(zhǎng)的時(shí)間，所以在寫代碼（接口）的時(shí)候，返回的數(shù)據(jù)量要盡量精簡(jiǎn)

Waterfall

點(diǎn)擊某個(gè)資源會(huì)展示出詳細(xì)的網(wǎng)絡(luò)加載信息：

相關(guān)字段描述:

• Queuing (排隊(duì))

  瀏覽器在以下情況下對(duì)請(qǐng)求排隊(duì)

1. 存在更高優(yōu)先級(jí)的請(qǐng)求,請(qǐng)求被渲染引擎推遲，這經(jīng)常發(fā)生在 images（圖像）上,因?yàn)樗徽J(rèn)為比關(guān)鍵資源（如腳本/樣式）的優(yōu)先級(jí)低。
2. 此源已打開六個(gè) TCP 連接，達(dá)到限值，僅適用于 HTTP/1.0 和 HTTP/1.1。在等待一個(gè)即將被釋放的不可用的 TCP socket
3. 瀏覽器正在短暫分配磁盤緩存中的空間，生成磁盤緩存條目（通常非常快）
• Stalled (停滯) - 發(fā)送請(qǐng)求之前等待的時(shí)間。它可能因?yàn)檫M(jìn)入隊(duì)列的任意原因而被阻塞，這個(gè)時(shí)間包括代理協(xié)商的時(shí)間。請(qǐng)求可能會(huì)因 Queueing 中描述的任何原因而停止。
• DNS lookup (DNS 查找) - 瀏覽器正在解析請(qǐng)求 IP 地址，頁面上的每個(gè)新域都需要完整的往返(roundtrip)才能進(jìn)行 DNS 查找
• Proxy Negotiation - 瀏覽器正在與代理服務(wù)器協(xié)商請(qǐng)求
• initial connection (初始連接) - 建立連接所需的時(shí)間，包括 TCP 握手/重試和協(xié)商 SSL。
• SSL handshake (SSL 握手) - 完成 SSL 握手所用的時(shí)間
• Request sent (請(qǐng)求發(fā)送) - 發(fā)出網(wǎng)絡(luò)請(qǐng)求所花費(fèi)的時(shí)間，通常是幾分之一毫秒。
• Waiting (等待) - 等待初始響應(yīng)所花費(fèi)的時(shí)間，也稱為Time To First Byte(接收到第一個(gè)字節(jié)所花費(fèi)的時(shí)間)。這個(gè)時(shí)間除了等待服務(wù)器傳遞響應(yīng)所花費(fèi)的時(shí)間之外，還包括 1 次往返延遲時(shí)間及服務(wù)器準(zhǔn)備響應(yīng)所用的時(shí)間（服務(wù)器發(fā)送數(shù)據(jù)的延遲時(shí)間）
• Content Download(內(nèi)容下載) - 接收響應(yīng)數(shù)據(jù)所花費(fèi)的時(shí)間(從接收到第一個(gè)字節(jié)開始，到下載完最后一個(gè)字節(jié)結(jié)束)
• ServiceWorker Preparation - 瀏覽器正在啟動(dòng) Service Worker
• Request to ServiceWorker - 正在將請(qǐng)求發(fā)送到 Service Worker
• Receiving Push - 瀏覽器正在通過 HTTP/2 服務(wù)器推送接收此響應(yīng)的數(shù)據(jù)
• Reading Push - 瀏覽器正在讀取之前收到的本地?cái)?shù)據(jù)

(5) Summary 區(qū)域

requests 查看請(qǐng)求的總數(shù)量 | transferred 查看請(qǐng)求的總大小 | resources 資源 | Finish 所有 http 請(qǐng)求響應(yīng)完成的時(shí)間 | DOMContentLoaded 時(shí)間 | load 時(shí)間

當(dāng)頁面的初始的標(biāo)記被解析完時(shí)，會(huì)觸發(fā) DOMContentLoaded。它在 Network(網(wǎng)絡(luò))面板上的顯示：

• 在 Overview (概覽)窗格中的藍(lán)色垂直線表示這個(gè)事件。
• 在 Requests Table (請(qǐng)求列表)中的紅色垂直線也表示這個(gè)事件。
• 在 Summary (概要)窗格中，您可以查看事件的確切時(shí)間。

當(dāng)頁面完全加載時(shí)觸發(fā) load 事件。它顯示也顯示在：

• 在 Overview (概覽)窗格的紅色垂直線表示這個(gè)事件。
• 在 Requests Table (請(qǐng)求列表)中的紅色垂直線也表示這個(gè)事件。
• 在 Summary (概要)中，可以查看改事件的確切時(shí)間

DOMContentLoaded 會(huì)比 Load 時(shí)間小，兩者時(shí)間差大致等于外部資源加載（一般是圖片/字體）的時(shí)間

Finish 時(shí)間是頁面上所有 http 請(qǐng)求發(fā)送到響應(yīng)完成的時(shí)間（如果頁面存在一個(gè)輪詢的接口，這個(gè)值也會(huì)累加的）。HTTP1.0/1.1 協(xié)議限定單個(gè)域名的請(qǐng)求并發(fā)量是 6 個(gè)，即 Finish 是所有請(qǐng)求（不只是 XHR 請(qǐng)求，還包括 DOC，img，js，css 等資源的請(qǐng)求）在并發(fā)量為 6 的限制下完成的時(shí)間。

• Finish?的時(shí)間比?Load?大，意味著頁面有相當(dāng)部分的請(qǐng)求量
• Finish?的時(shí)間比?Load?小，意味著頁面請(qǐng)求量很少，如果頁面是只有一個(gè) html 文檔請(qǐng)求的靜態(tài)頁面，F(xiàn)inish 時(shí)間基本就等于 HTML 文檔請(qǐng)求的時(shí)間

所以 Finish?時(shí)間與 DOMContentLoaded?和?Load?并無直接關(guān)系

使用 Network 面板進(jìn)行網(wǎng)絡(luò)優(yōu)化

參考 Network 面板可以針對(duì) Network 提出一些優(yōu)化建議

排隊(duì)或停止阻塞

最常見的問題是很多個(gè)請(qǐng)求排隊(duì)或被阻塞。這表示從單個(gè)客戶端檢索的資源太多。在 HTTP 1.0/1.1 連接協(xié)議中，Chrome 限制每個(gè)域名最多執(zhí)行 6 個(gè) TCP 連接。如果一次請(qǐng)求十二個(gè)資源，前 6 個(gè)將開始，后 6 個(gè)將排隊(duì)。一旦其中一個(gè)請(qǐng)求完成，隊(duì)列中的第一個(gè)請(qǐng)求項(xiàng)目將開始其請(qǐng)求過程。

要解決傳統(tǒng) HTTP 1 的此問題，需要用多個(gè)子域名提供服務(wù)資源，將資源拆分到多個(gè)子域中，均勻分配。

上面說的修復(fù) HTTP 1 連接數(shù)問題，不適用于 HTTP 2 連接，如果已部署 HTTP 2，不要對(duì)資源進(jìn)行域劃分，因?yàn)樗鼤?huì)影響 HTTP 2 的工作原理（在 HTTP 2 中 TCP 連接多路復(fù)用連接的）。取消了 HTTP 1 的 6 個(gè)連接限制，并且可以通過單個(gè)連接同時(shí)傳輸多個(gè)資源。

接收到第一個(gè)字節(jié)的時(shí)間很慢

綠色的塊占據(jù)比例很高：

TTFB 就是等待第一個(gè)響應(yīng)字節(jié)的時(shí)間，建議在 200ms 以下，以下情況可能會(huì)導(dǎo)致高 TTFB:

1. 客戶端和服務(wù)器之間的網(wǎng)絡(luò)條件差
2. 要么，服務(wù)器端程序響應(yīng)很慢

為了解決高 TTFB，首先去排除盡可能多的網(wǎng)絡(luò)連接。理想情況下，在本地托管應(yīng)用程序（部署在本地），并查看是否仍有一個(gè)大的 TTFB。如果有，那么需要優(yōu)化應(yīng)用程序針的響應(yīng)速度。這可能意味著優(yōu)化數(shù)據(jù)庫查詢，為內(nèi)容的某些部分實(shí)現(xiàn)高速緩存，或修改 Web 服務(wù)器配置。后端可能很慢的原因有很多。您需要對(duì)您的程序進(jìn)行研究，并找出不符合您預(yù)期的內(nèi)容。

如果本地 TTFB 低，那么是您的客戶端和服務(wù)器之間的網(wǎng)絡(luò)問題。網(wǎng)絡(luò)傳輸可能被很多種事情干擾阻礙。在客戶端和服務(wù)器之間有很多點(diǎn)，每個(gè)都有自己的連接限制，可能會(huì)導(dǎo)致問題。測(cè)試減少這種情況的最簡(jiǎn)單的方法是將您的應(yīng)用程序放在另一臺(tái)主機(jī)上，看看 TTFB 是否改進(jìn)。

加載緩慢

藍(lán)色的塊占據(jù)比例很高：

如果 Content Download (內(nèi)容下載)階段花費(fèi)了很多時(shí)間，提高服務(wù)響應(yīng)速度、并行下載等優(yōu)化措施幫助都不大。主要的解決方案是發(fā)送更少的字節(jié)（比如一張高質(zhì)量的大圖可能幾 M 的大小，這時(shí)可以酌情優(yōu)化一下圖片的寬高/清晰度）

Sources 面板

此章節(jié)請(qǐng)打開 justwe7.github.io/devtools/debug-js/get-started.html 一起食用

主要用來調(diào)試頁面中的 JavaScript

自定義代碼片段 Snippets

我們經(jīng)常有些 JavaScript 的代碼想在控制臺(tái)中調(diào)試，假如代碼量多的情況下直接在 console 下寫比較麻煩，或者我們經(jīng)常有些代碼片段(防抖、節(jié)流、獲取地址欄參數(shù)等)想保存起來，每次打開 Devtools 都能獲取到這些代碼片段，而不用再去從筆記里面找。

如圖所示，在 Sources 這個(gè)tab欄下，有個(gè) Snippets 標(biāo)簽，在里面可以添加一些常用的代碼片段。（當(dāng)個(gè)小筆記本）

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

斷點(diǎn)的面板

指定位置的中斷

斷點(diǎn)調(diào)試基本流程

找到源代碼，點(diǎn)擊要中斷代碼執(zhí)行的位置，點(diǎn)擊紅色按鈕的位置。然后再觸發(fā)該方法執(zhí)行，因?yàn)橐阎c(diǎn)擊按鈕可以觸發(fā)，精準(zhǔn)的定位到代碼行就可以了:

全局事件中斷

假如不知道代碼執(zhí)行的位置，如以下場(chǎng)景：

看接口返回的列表總數(shù)應(yīng)該是 20 條，但是頁面到 15 條就顯示到底部了

看代碼寫的判斷條件有點(diǎn)問題，但從編譯后的代碼找到對(duì)應(yīng)位置進(jìn)行調(diào)試就相當(dāng)于大海撈針了。想試試自己的設(shè)想的解決方式是否正確：

1. 因?yàn)榱斜硎翘崂虞d，所以肯定會(huì)觸發(fā)網(wǎng)絡(luò)請(qǐng)求，可以在事件偵聽器里面打一個(gè) XHR 的斷點(diǎn)

2. 然后提拉加載頁面觸發(fā)接口請(qǐng)求，如預(yù)期的，代碼中斷執(zhí)行了。但提示找不到 sourcemap，暫時(shí)把 js 的資源映射給關(guān)掉(相關(guān)解決方式)：

3. 再次觸發(fā)斷點(diǎn)，發(fā)現(xiàn)可以查看到中斷的代碼了，因?yàn)榭隙ㄊ琼撁嬷械臉I(yè)務(wù)代碼將請(qǐng)求推入到執(zhí)行堆棧的，所以可以在堆棧中找到對(duì)應(yīng)的方法名：getVideoList

   

4. 點(diǎn)擊方法名可以跳轉(zhuǎn)到對(duì)應(yīng)的源碼，可以看到圈起來的代碼和所猜想的問題代碼應(yīng)該是同一處

5. 回過來看下問題原因：頁面請(qǐng)求完新數(shù)據(jù)后直接 pageNum 自增，然后直接就用于是否結(jié)束的判斷了，有點(diǎn)不夠嚴(yán)謹(jǐn)，不如直接比對(duì)當(dāng)前的列表長(zhǎng)度與接口返回的數(shù)據(jù)總數(shù)來判斷:

6. 記住要修改的代碼，在這個(gè)文件開頭，也就是 191.xxx.js

1. 第一行先打個(gè)斷點(diǎn)，push 方法之前再打一個(gè)斷點(diǎn): (如果沒有再刷新一下(也不清楚為什么可能會(huì)沒有))
2. 然后刷新頁面，找到剛剛想要修改的代碼: 用 t.recommendList.length 替換掉 n.pageSize*t.pageNo（前兩步是為了避免 js 開始解析問題代碼，先阻塞一下運(yùn)行: stackoverflow）

7. 再Ctrl + S，保存一下，然后看下頁面效果，列表可以全部加載出來了:

在美化代碼的面板中是不支持直接修改頁面代碼的

黑盒模式

把腳本文件放入 Blackbox(黑盒)，可以忽略來自第三方庫的調(diào)用堆棧

默認(rèn)（不開啟黑盒）：

開啟黑盒：

• 打開方式①

1. 打開 DevTools Settings (設(shè)置)
2. 在左側(cè)的導(dǎo)航菜單中，單擊 Blackboxing (黑箱)
3. 點(diǎn)擊 Add pattern... (添加模式)按鈕。
4. 在 Pattern(模式)文本框輸入您希望從調(diào)用堆棧中排除的文件名模式。DevTools 會(huì)排除該模式匹配的任何腳本。
5. 在文本字段右側(cè)的下拉菜單中，選擇 Blackbox (黑箱)以執(zhí)行腳本文件但是排除來自調(diào)用堆棧的調(diào)用，或選擇 Disabled (禁用)來阻止文件執(zhí)行。
6. 點(diǎn)擊Add(添加) 保存

• 打開方式②
  直接在想要忽略的堆棧信息上 blackbox script

DOM 斷點(diǎn)

查看 element 面板DOM 斷點(diǎn)

Performance 面板

此章節(jié)請(qǐng)使用Chrome 的隱身模式打開 justwe7.github.io/devtools/jank/index.html 一起食用 隱身模式可以保證 Chrome 在一個(gè)相對(duì)干凈的環(huán)境下運(yùn)行。假如安裝了許多 chrome 插件，這些插件可能會(huì)影響分析性能表現(xiàn)

在 Performance 面板可以查看頁面加載過程中的詳細(xì)信息，比如在什么時(shí)間開始做什么事情，耗時(shí)多久等等。相較于 Network 面板，不僅可以看到通過網(wǎng)絡(luò)加載資源的信息，還能看到解析 JS、計(jì)算樣式、重繪等頁面加載的方方面面的信息

面板主要的區(qū)域劃分：

1. Controls - 開始記錄，停止記錄和配置記錄期間捕獲的信息
2. Overview - 頁面性能的匯總
3. Flame Chart - [火焰圖(線程面板)]。在火焰圖上看到三條（綠色的有好幾條）垂直的虛線：
• 藍(lán)線代表 DOMContentLoaded?事件
• 綠線代表首次繪制的時(shí)間
• 紅線代表?load?事件
4. Details - 在 Flame Chart 中，選擇了某一事件后，這部分會(huì)展示與這個(gè)事件相關(guān)的更多信息；

   如果選擇了某一幀，這部分會(huì)展示與選中幀相關(guān)的信息。如果既沒有選中事件也沒有選中幀，則這部分會(huì)展示當(dāng)前記錄時(shí)間段內(nèi)的相關(guān)信息。

開始記錄

1. 首先點(diǎn)擊控制條左邊的第一個(gè)圓圈，開始記錄日志
2. 等待幾分鐘(正常操作頁面)
3. 點(diǎn)擊 Stop 按鈕，Devtools 停止錄制，處理數(shù)據(jù)，然后顯示性能報(bào)告

然后就會(huì)出來上圖的內(nèi)容

與臺(tái)式機(jī)和筆記本電腦相比移動(dòng)設(shè)備的 CPU 功率要小得多。無論何時(shí)分析頁面，都使用 CPU 限制來模擬頁面在移動(dòng)設(shè)備上的表現(xiàn)。在"開發(fā)工具"中，單擊"性能"選項(xiàng)卡。確保啟用"屏幕截圖"復(fù)選框。單擊"捕獲設(shè)置"。Capture SettingsDevTools 揭示了與如何捕獲性能指標(biāo)相關(guān)的設(shè)置。對(duì)于 CPU，選擇 2 倍減速。DevTools 會(huì)限制 CPU 使其速度比平時(shí)慢 2 倍

注意：如果想要確保它們?cè)诘投艘苿?dòng)設(shè)備上運(yùn)行良好，請(qǐng)將 CPU 限制設(shè)置為 20 倍減速。

(1)controls 控制條區(qū)域

• 上半?yún)^(qū)域
• Screenshots 截圖：默認(rèn)勾選，每一幀都會(huì)截圖
• Memory 內(nèi)存消耗記錄：勾選后可以看到各種內(nèi)存消耗曲線
• 下面的 checkbox 區(qū)域
• Disable javaScript samples [禁用 javaScript 示例]：減少在手機(jī)運(yùn)行時(shí)系統(tǒng)的開銷，模擬手機(jī)運(yùn)行時(shí)勾選
• Network [網(wǎng)絡(luò)模擬]：可以模擬在 3G,4G 等網(wǎng)絡(luò)條件下運(yùn)行頁面
• Enable advanced paint instrumentation(slow) [啟用高級(jí)畫圖檢測(cè)工具(慢速)]：捕獲高級(jí)畫圖檢測(cè)工具，帶來顯著的性能開銷
• CPU [CPU 限制性能]：主要為了模擬底 CPU 下運(yùn)行性能

(2)overview 總覽區(qū)域

FPS

綠色豎線越高，F(xiàn)PS 越高。FPS 圖表上的紅色塊(上圖剛開始的部分)表示長(zhǎng)時(shí)間幀，很可能會(huì)出現(xiàn)卡頓。經(jīng)常打游戲肯定知道這個(gè)指標(biāo)代表什么，120FPS 代表流暢（手動(dòng)滑稽）

火焰圖的 FPS 可以量化這項(xiàng)參數(shù)

FPS（frames per second）是用來分析動(dòng)畫的一個(gè)主要性能指標(biāo)。能保持在 60 的 FPS 的話，那么用戶體驗(yàn)就是不錯(cuò)的

Q: 為什么是 60fps?

A: 我們的目標(biāo)是保證頁面要有高于每秒 60fps(幀)的刷新頻率，這和目前大多數(shù)顯示器的刷新率相吻合(60Hz)。如果網(wǎng)頁動(dòng)畫能夠做到每秒 60 幀，就會(huì)跟顯示器同步刷新，達(dá)到最佳的視覺效果。這意味著，一秒之內(nèi)進(jìn)行 60 次重新渲染，每次重新渲染的時(shí)間不能超過 16.66 毫秒

CPU

CPU 資源。此面積圖指示消耗 CPU 資源的事件類型。在 CPU 圖表中的各種顏色與 Summary 面板里的顏色是相互對(duì)應(yīng)的，Summary 面板就在 Performance 面板的下方。CPU 圖表中的各種顏色代表著在這個(gè)時(shí)間段內(nèi)，CPU 在各種處理上所花費(fèi)的時(shí)間。如果你看到了某個(gè)處理占用了大量的時(shí)間，那么這可能就是一個(gè)可以找到性能瓶頸的線索

CPU 資源面積圖顏色劃分:

重繪是當(dāng)節(jié)點(diǎn)需要更改外觀而不會(huì)影響布局的，比如改變 color 就叫稱為重繪 回流(重排)是布局或者幾何屬性需要改變就稱為回流

重排必定會(huì)發(fā)生重繪，重繪不一定會(huì)引發(fā)重排。重排所需的成本比重繪高的多，改變深層次的節(jié)點(diǎn)很可能導(dǎo)致父節(jié)點(diǎn)的一系列重排

js 修改 dom 結(jié)構(gòu)或樣式 -> 計(jì)算 style -> layout(重排) -> paint(重繪) -> composite(合成)

justwe7.github.io/性能優(yōu)化的相關(guān)總結(jié)

NET

每條彩色橫杠表示一種資源。橫杠越長(zhǎng)，檢索資源所需的時(shí)間越長(zhǎng)。每個(gè)橫杠的淺色部分表示等待時(shí)間（從請(qǐng)求資源到第一個(gè)字節(jié)下載完成的時(shí)間） 深色部分表示傳輸時(shí)間（下載第一個(gè)和最后一個(gè)字節(jié)之間的時(shí)間）

• HTML：藍(lán)色
• CSS：紫色
• JS：黃色
• 圖片：綠色

感覺優(yōu)化網(wǎng)絡(luò)性能直接使用 network 面板就好了

(3)Flame Chart 火焰圖（線程面板）

詳細(xì)的分析某些任務(wù)的詳細(xì)耗時(shí)，從而定位問題

看到的幾條虛線：

• 藍(lán)線代表 DOMContentLoaded?事件
• 綠線代表首次繪制的時(shí)間
• FP(First Paint): 首次繪制
• FCP(First Contentful Paint)：第一次豐富內(nèi)容的繪圖
• FMP(First Meaningful Paint)：第一次有意義的繪圖
• LCP(Largest Contentful Paint)：最大區(qū)域內(nèi)容繪制
• 紅線代表?load?事件

• DOMContentLoaded: 就是 dom 內(nèi)容加載完畢。那什么是 dom 內(nèi)容加載完畢呢？打開一個(gè)網(wǎng)頁當(dāng)輸入一個(gè) URL，頁面的展示首先是空白的，然后過一會(huì)，頁面會(huì)展示出內(nèi)容，但是頁面的有些資源比如說圖片資源還無法看到，此時(shí)頁面是可以正常的交互，過一段時(shí)間后，圖片才完成顯示在頁面。從頁面空白到展示出頁面內(nèi)容，會(huì)觸發(fā) DOMContentLoaded 事件。而這段時(shí)間就是 HTML 文檔被加載和解析完成。

• load: 頁面上所有的資源（圖片，音頻，視頻等）被加載以后才會(huì)觸發(fā) load 事件，簡(jiǎn)單來說，頁面的 load 事件會(huì)在 DOMContentLoaded 被觸發(fā)之后才觸發(fā)。

Main

看下主線程，Devtools 展示了主線程運(yùn)行狀況

• X 軸代表著時(shí)間。每個(gè)長(zhǎng)條代表著一個(gè) event。長(zhǎng)條越長(zhǎng)就代表這個(gè) event 花費(fèi)的時(shí)間越長(zhǎng)。
• Y 軸代表了調(diào)用棧（call stack）。在棧里，上面的 event 調(diào)用了下面的 event

Google 官方文檔的例子：

如上圖：click 事件觸發(fā)了 script_foot_closure.js 第 53 行的函數(shù)調(diào)用。再看下面，F(xiàn)unction Call 可以看到一個(gè)匿名函數(shù)被調(diào)用，然后調(diào)用 Me() 函數(shù)，然后調(diào)用 Se()，依此類推。

DevTools 為腳本分配隨機(jī)顏色。在上圖中，來自一個(gè)腳本的函數(shù)調(diào)用顯示為淺綠色。來自另一個(gè)腳本的調(diào)用被渲染成米色。較深的黃色表示腳本活動(dòng)，而紫色的事件表示渲染活動(dòng)。這些較暗的黃色和紫色事件在所有記錄中都是一致的。

1. 在性能報(bào)告中，有很多的數(shù)據(jù)。可以通過雙擊，拖動(dòng)等等動(dòng)作來放大縮小報(bào)告范圍，從各種時(shí)間段來觀察分析報(bào)告
2. 在事件長(zhǎng)條的右上角處，如果出現(xiàn)了紅色小三角，說明這個(gè)事件是存在問題的，需要特別注意
3. 雙擊這個(gè)帶有紅色小三角的事件。在 Summary 面板會(huì)看到詳細(xì)信息。注意 reveal 這個(gè)鏈接，雙擊它會(huì)讓高亮觸發(fā)這個(gè)事件的 event。如果點(diǎn)擊了 app.js:94 這個(gè)鏈接，就會(huì)跳轉(zhuǎn)到對(duì)應(yīng)的代碼處

(4)Details 區(qū)域

一般要配合 Flame Chart 一起使用

• Summary 區(qū)域是一個(gè)餅狀圖總覽，匯總了各個(gè)事件類型所耗費(fèi)的總時(shí)長(zhǎng)，另外還有三個(gè)查看選項(xiàng)：
• Bottom-Up 選項(xiàng)卡：要查看直接花費(fèi)最多時(shí)間的活動(dòng)時(shí)使用
• Call Tree 選項(xiàng)卡：想查看導(dǎo)致最多工作的根活動(dòng)時(shí)使用
• Event Log 選項(xiàng)卡：想要按記錄期間的活動(dòng)順序查看活動(dòng)時(shí)使用

window.performance 對(duì)象

Performance 接口可以獲取到當(dāng)前頁面中與性能相關(guān)的信息。它是 High Resolution Time API 的一部分，同時(shí)也融合了 Performance Timeline API、Navigation Timing API、 User Timing API 和 Resource Timing API。

實(shí)質(zhì)上來說 performance 對(duì)象就是專門用于性能監(jiān)測(cè)的對(duì)象，內(nèi)置了幾乎所有常用前端需要的性能參數(shù)監(jiān)控

幾個(gè)實(shí)用的 API

performance.now()方法

performance.now() 返回 performance.navigationStart 至當(dāng)前的毫秒數(shù)。performance.navigationStart 是下文將介紹到的可以說是瀏覽器訪問最初的時(shí)間測(cè)量點(diǎn)。

值得注意的兩點(diǎn)：

• 測(cè)量初始點(diǎn)是瀏覽器訪問最初測(cè)量點(diǎn)，或者理解為在地址欄輸入 URL 后按回車的那一瞬間。
• 返回值是毫秒數(shù)，但帶有精準(zhǔn)的多位小數(shù)。

用 performance.now()檢測(cè) js 代碼的執(zhí)行時(shí)間(毫秒):

  var st = performance.now();
  console.log(Array(9999999).fill(null).filter(v => !v).length);
  var end = performance.now();
  console.log(`取值時(shí)間${end - st}ms`); // 取值時(shí)間 558.7849999992759ms

performance.navigation

performance.navigation 負(fù)責(zé)紀(jì)錄用戶行為信息，只有兩個(gè)屬性:

• redirectCount
• 如果有重定向的話，頁面通過幾次重定向跳轉(zhuǎn)而來
• type
• type 的值：
• 0 ?即 TYPE_NAVIGATENEXT 正常進(jìn)入頁面（非刷新、非重定向等)
• 1 ?即 TYPE_RELOAD 通過 window.location.reload()刷新的頁面
• 2 ?即 TYPE_BACK_FORWARD 通過瀏覽器的前進(jìn)后退按鈕進(jìn)入的頁面（歷史記錄）
• 255 即 TYPE_UNDEFINED 非以上方式進(jìn)入的頁面

  console.log(performance.navigation); // PerformanceNavigation {type: 1, redirectCount: 0}

performance.timing

timing 內(nèi)包含了幾乎所有時(shí)序的時(shí)間節(jié)點(diǎn)

可以通過此字段來統(tǒng)計(jì)頁面相關(guān)事件的發(fā)生時(shí)長(zhǎng)：

function getTiming() {
  try {
    var timing = performance.timing;
    var timingObj = {};

    var loadTime = (timing.loadEventEnd - timing.loadEventStart) / 1000;

    if(loadTime < 0) {
      setTimeout(function() {
        getTiming();
      }, 0);
      return;
    }

    timingObj['重定向時(shí)間'] = (timing.redirectEnd - timing.redirectStart);
    timingObj['DNS 解析時(shí)間'] = (timing.domainLookupEnd - timing.domainLookupStart);
    timingObj['TCP 完成握手時(shí)間'] = (timing.connectEnd - timing.connectStart);
    timingObj['HTTP 請(qǐng)求響應(yīng)完成時(shí)間'] = (timing.responseEnd - timing.requestStart);
    timingObj['DOM 開始加載前所花費(fèi)時(shí)間'] = (timing.responseEnd - timing.navigationStart);
    timingObj['DOM 加載完成時(shí)間'] = ((timing.domComplete || timing.domLoading) - timing.domLoading);
    timingObj['DOM 結(jié)構(gòu)解析完成時(shí)間'] = (timing.domInteractive - timing.domLoading);
    timingObj['總體網(wǎng)絡(luò)交互耗時(shí)，即開始跳轉(zhuǎn)到服務(wù)器資源下載完成時(shí)間'] = (timing.responseEnd - timing.navigationStart);
    timingObj['可交互的時(shí)間'] = (timing.domContentLoadedEventEnd - timing.domContentLoadedEventStart);
    timingObj['首次出現(xiàn)內(nèi)容'] = (timing.domLoading - timing.navigationStart);
    timingObj['onload 事件時(shí)間'] = (timing.loadEventEnd - timing.loadEventStart);
    timingObj['頁面完全加載時(shí)間'] = (timingObj['重定向時(shí)間'] + timingObj['DNS 解析時(shí)間'] + timingObj['TCP 完成握手時(shí)間'] + timingObj['HTTP 請(qǐng)求響應(yīng)完成時(shí)間'] + timingObj['DOM 結(jié)構(gòu)解析完成時(shí)間'] + timingObj['DOM 加載完成時(shí)間']);

    for(item in timingObj) {
      console.log(item + ":" + timingObj[item] + '(ms)');
    }

    console.log(performance.timing);

  } catch(e) {
    console.log(performance.timing);
  }
}
window.onload = getTiming

performance.memory

用于顯示當(dāng)前的內(nèi)存占用情況

console.log(performance.memory)
/* {
  jsHeapSizeLimit: 4294705152,
  totalJSHeapSize: 13841857,
  usedJSHeapSize: 12417637
} */

• usedJSHeapSize 表示：JS 對(duì)象（包括 V8 引擎內(nèi)部對(duì)象）占用的內(nèi)存數(shù)
• totalJSHeapSize 表示：可使用的內(nèi)存
• jsHeapSizeLimit 表示：內(nèi)存大小限制

通常，usedJSHeapSize 不能大于 totalJSHeapSize，如果大于，有可能出現(xiàn)了內(nèi)存泄漏。

performance.getEntries()

瀏覽器獲取網(wǎng)頁時(shí)，會(huì)對(duì)網(wǎng)頁中每一個(gè)對(duì)象（腳本文件、樣式表、圖片文件等等）發(fā)出一個(gè) HTTP 請(qǐng)求。performance.getEntries 方法以數(shù)組形式，返回一個(gè) PerformanceEntry 列表，這些請(qǐng)求的時(shí)間統(tǒng)計(jì)信息，有多少個(gè)請(qǐng)求，返回?cái)?shù)組就會(huì)有多少個(gè)成員

• name：資源的鏈接
• duration: 資源的總耗時(shí)（包括等待時(shí)長(zhǎng)，請(qǐng)求時(shí)長(zhǎng)，響應(yīng)時(shí)長(zhǎng) 相當(dāng)于 responseEnd - startTime）
• entryType: 資源類型，entryType 類型不同數(shù)組中的對(duì)象結(jié)構(gòu)也不同:

  值	該類型對(duì)象	描述
  mark	PerformanceMark	通過 mark()方法添加到數(shù)組中的對(duì)象
  measure	PerformanceMeasure	通過 measure()方法添加到數(shù)組中的對(duì)象
  paint	PerformancePaintTiming	值為 first-paint'首次繪制、'first-contentful-paint'首次內(nèi)容繪制。
  resource	PerformanceResourceTiming	所有資源加載時(shí)間，用處最多
  navigation	PerformanceNavigationTiming	現(xiàn)除 chrome 和 Opera 外均不支持，導(dǎo)航相關(guān)信息
  frame	PerformanceFrameTiming	現(xiàn)瀏覽器均未支持

• initiatorType: 如何發(fā)起的請(qǐng)求,初始類型（注意這個(gè)類型并不準(zhǔn)確，例如在 css 中的圖片資源會(huì)這個(gè)值顯示 css，所以還是推薦用 name 中的后綴名）

  發(fā)起對(duì)象	值	描述
  a Element	link/script/img/iframe 等	通過標(biāo)簽形式加載的資源，值是該節(jié)點(diǎn)名的小寫形式
  a CSS resource	css	通過 css 樣式加載的資源，比如 background 的 url 方式加載資源
  a XMLHttpRequest object	xmlhttprequest/fetch	通過 xhr 加載的資源
  a PerformanceNavigationTiming object	navigation	當(dāng)對(duì)象是 PerformanceNavigationTiming 時(shí)返回

performance.getEntriesByType()

方法返回給定類型的 getEntries 列表打開頁面（justwe7.github.io/devtools/network/queue.html）

這段代碼可以在 DevTools 控制臺(tái)中運(yùn)行。它將使用Resource Timing API(資源時(shí)序 API)來檢索所有資源。然后它過濾條目，查找包含logo-1024px.png名稱的條目。如果找到，會(huì)返回相關(guān)信息。

performance
  .getEntriesByType('resource')
  .filter(item => item.name.includes('logo-1024px.png'))

注意:
返回資源的 connectEnd 等相關(guān)字段不是 Unix 時(shí)間戳，而是 DOMHighResTimeStamp。MDN PerformanceResourceTiming

DOMHighResTimeStamp 是一個(gè) double 類型，用于存儲(chǔ)時(shí)間值。該值可以是離散的時(shí)間點(diǎn)或兩個(gè)離散時(shí)間點(diǎn)之間的時(shí)間差。T 單位為毫秒 ms (milliseconds) ，應(yīng)準(zhǔn)確至 5 微秒 μs (microseconds)。但是，如果瀏覽器無法提供準(zhǔn)確到 5 微秒的時(shí)間值(例如,由于硬件或軟件的限制), 瀏覽器可以以毫秒為單位的精確到毫秒的時(shí)間表示該值

Lighthouse(Audits) 面板

來自 Google 的描述：Lighthouse 是一個(gè)開源的自動(dòng)化工具，用于改進(jìn)網(wǎng)絡(luò)應(yīng)用的質(zhì)量。您可以將其作為一個(gè) Chrome 擴(kuò)展程序運(yùn)行，或從命令行運(yùn)行。您為 Lighthouse 提供一個(gè)您要審查的網(wǎng)址，它將針對(duì)此頁面運(yùn)行一連串的測(cè)試，然后生成一個(gè)有關(guān)頁面性能的報(bào)告

會(huì)對(duì)頁面的加載進(jìn)行分析，然后給出提高頁面性能的建議

懶人專用?

有 5 個(gè)指標(biāo):

• Performance 性能
• accessibility 無障礙使用
• Best Practice 用戶體驗(yàn)
• SEO SEO 優(yōu)化
• Progressive Web App 頁對(duì)于 PWA 的兼容性

Security 面板

用于檢測(cè)當(dāng)面頁面的安全性

該面板可以區(qū)分兩種類型的不安全的頁面：

• 如果被請(qǐng)求的頁面通過 HTTP 提供服務(wù)，那么這個(gè)主源就會(huì)被標(biāo)記為不安全。
• 如果被請(qǐng)求的頁面是通過 HTTPS 獲取的，但這個(gè)頁面接著通過 HTTP 繼續(xù)從其他來源檢索內(nèi)容，那么這個(gè)頁面仍然被標(biāo)記為不安全。這就是所謂的混合內(nèi)容頁面,混合內(nèi)容頁面只是部分受到保護(hù),因?yàn)?HTTP 內(nèi)容(非加密的內(nèi)容通信使用明文)可能會(huì)被竊聽,容易受到中間人攻擊。如 163，雖然證書是有效的，但是頁面有一部分 http 資源：
  

Command 終極大招

在控制臺(tái)打開的狀態(tài)下， 組合按鍵 Ctrl + Shift + P / ?Command + Shift + P 打開“命令”菜單，接下來就可以為所欲為了~

截圖

當(dāng)你只想對(duì)一個(gè)特定的 DOM 節(jié)點(diǎn)進(jìn)行截圖時(shí)，可能需要使用其他工具操作好久，使用控制臺(tái)可以直接選中想要截圖的節(jié)點(diǎn)，打開 Command 菜單并且使用 節(jié)點(diǎn)截圖 就可以了

• 截取特定節(jié)點(diǎn)：Screenshot Capture node screenshot
• 全屏截圖：Screenshot Capture full size screenshot

CSS/JS 覆蓋率

• 打開調(diào)試面板，通過命令菜單輸入 Show Coverage 調(diào)出面板
• 點(diǎn)擊 reload 按鈕開始檢測(cè)
• 點(diǎn)擊相應(yīng)文件即可查看具體的覆蓋情況（藍(lán)色的為用到的代碼，紅色表示沒有用到的代碼）

媒體查詢

媒體查詢是自適應(yīng)網(wǎng)頁設(shè)計(jì)的基本部分。在 Chrome Devtools 中的設(shè)備模式下，在三圓點(diǎn)菜單點(diǎn)擊, Show Media queries 即可啟用：

右鍵點(diǎn)擊某個(gè)條形，查看媒體查詢?cè)?CSS 中何處定義并跳到源代碼中的定義

回饋鐵粉點(diǎn)擊圖片訪問抽獎(jiǎng)送3本《JavaScript高級(jí)程序設(shè)計(jì)(第4版)》和8份5元現(xiàn)金

截止到9月14日20:00

參考

• Chrome Network ，Size 和 Time 為什么有兩行參數(shù)
• Chrome 開發(fā)者工具
• Google chrome-devtools
• Chrome devtools 使用詳解——Performance
• 全新 Chrome Devtool Performance 使用指南
• Chrome-performance 頁面性能分析使用教程
• MDN Performance
• 網(wǎng)頁性能檢測(cè)-performance
• 瀏覽器渲染詳細(xì)過程
• chrome 設(shè)置斷點(diǎn)的各種姿勢(shì)
• Network Summary