摘要

簡單介紹 Chrome 開發(fā)者工具，科普一下 Chrome 開發(fā)者工具中一些可能不常用但實(shí)用的功能

前言

Chrome 開發(fā)者工具是一套內(nèi)置于Google Chrome中的Web開發(fā)和調(diào)試工具，可用來對網(wǎng)站進(jìn)行迭代、調(diào)試和分析（from: Google 開發(fā)者文檔）

簡介

首先我們可以通過多種方式來喚醒 Chrome 開發(fā)者工具

• 直接右上角菜單 -> 更多工具 -> 開發(fā)者工具
• 頁面上右鍵，菜單里選檢查（inspect）

或者通過快捷鍵

• Windows：ctrl + shift + I （或者 F12）
• Mac： cmd + opt + I

基礎(chǔ)面板有這幾個

• element 元素面板：主要就是查看和調(diào)試 DOM 和 CSS 相關(guān)的內(nèi)容
• console 控制臺面板：是一個 shell，可以跟 javascript 做交互
• source 源代碼面板：可以查看當(dāng)前頁面使用的靜態(tài)資源文件的代碼，斷點(diǎn)調(diào)試
• network 網(wǎng)絡(luò)面板：用來查看和分析網(wǎng)絡(luò)資源請求情況
• performace 性能面板：網(wǎng)站運(yùn)行時的監(jiān)控記錄，可以用來分析網(wǎng)站性能情況（timeline）
• memory 內(nèi)存面板：比 performance 做更深一層的記錄
• application 應(yīng)用面板：可以查看網(wǎng)頁應(yīng)用的所有資源，像 cookies，localstorage，web SQL 和緩存之類的東西
• security 安全面板：安全相關(guān)的內(nèi)容，證書之類的

全局搜索代碼

點(diǎn)擊左邊豎形排列的三個小點(diǎn)，選擇 Search
點(diǎn)擊搜索結(jié)果，會跳到具體的源碼文件。它會搜索該網(wǎng)頁下所有引入的文件。

image.png

Shadow DOM

通常一些比較復(fù)雜的原生 DOM 標(biāo)簽，像 <video>，<audio> 還有 <input type="range">，內(nèi)部是由更多的基礎(chǔ)標(biāo)簽構(gòu)成的，默認(rèn)情況下我們沒辦法查看內(nèi)部構(gòu)造和樣式是怎么樣的。

[圖片上傳失敗...(image-98551a-1630031972107)]

在 setting里的 element 一欄把 Show user agent shadow DOM 勾上

[圖片上傳失敗...(image-4298da-1630031972107)]

再重新回到 Element 面板查看頁面上的元素，就會發(fā)現(xiàn)有很多新的東西出現(xiàn)了，以 <video> 標(biāo)簽為例

image.png

Ingore List

不知道你是否很多時候會遇到這種情況，在調(diào)試代碼時需要逐步執(zhí)行，由于遇到函數(shù)的時候會跳入函數(shù)的執(zhí)行過程，很容易就在一些無關(guān)緊要的邏輯中徘徊許久，即使熟練地運(yùn)用 step in 和 step out，也還是十分影響效率甚至導(dǎo)致問題難以排查出來（因為我們很多時候關(guān)心的是業(yè)務(wù)代碼的實(shí)現(xiàn)問題）

這時候就要用到 Ingore List 的功能了，同樣打開 setting，左側(cè)導(dǎo)航選擇 Ingore List
通過 Add pattern 添加忽略的文件名規(guī)則

image.png

這樣在調(diào)試過程中遇到這些文件的內(nèi)容就會當(dāng)成黑盒處理，直接跳過

XHR/fetch Breakpoints

XHR breakpoints 用于異步請求的斷點(diǎn)，點(diǎn)擊加號圖標(biāo)添加新的斷點(diǎn)規(guī)則，輸入請求 URL 地址（片段），程序會在請求地址包含對應(yīng)字符串的異步請求發(fā)出的位置自動停止

image.png

DOM Breakpoints

DOM breakpoint 可以在 DOM 元素被刪除或修改的時候打斷程序，在 Element 面板的 DOM 節(jié)點(diǎn)上右鍵，break on 一欄有三個選項

• subtree modification：在子節(jié)點(diǎn)被修改時中斷
• attribute modification：在節(jié)點(diǎn)屬性被修改時中斷
• node removal：在節(jié)點(diǎn)被刪除時中斷

image.png

image.png

如上圖為 tr 添加 attribute modification 的斷點(diǎn)之后，在 DOM Breakpoint 就可以看到這個斷點(diǎn)，隨后 javascript 中如果有使這個節(jié)點(diǎn)屬性class新增了hover ，程序就會中斷

條件斷點(diǎn)

DevTools支持條件斷點(diǎn)，我們都知道在代碼的行號上單擊鼠標(biāo)可以在當(dāng)前行設(shè)置一個普通斷點(diǎn)，程序執(zhí)行到這里就會暫停。

接著，你可以在斷點(diǎn)上右鍵然后選擇 "Edit Breakpoint"，這樣就可以看到一個表達(dá)式輸入框。在里面可以定義條件，如果條件為True，斷點(diǎn)就會生效
一個通常的表達(dá)式可能是total > 25這種，然而在表達(dá)式寫console.log語句也是完全OK的。

截屏2021-08-26 15.47.20.png

image.png

這個條件表達(dá)式可以正常的工作，并且我們可以很明顯看到console.log語句在代碼經(jīng)過斷點(diǎn)的時候執(zhí)行了:

因為console.log并沒有真正的返回值，所以相當(dāng)于返回了undefined。這樣對應(yīng)的條件斷點(diǎn)相當(dāng)于不滿足條件而不會被觸發(fā)，程序在打印表達(dá)式信息后會繼續(xù)的執(zhí)行。所以這種做法感覺就相當(dāng)于硬編碼進(jìn)去一個調(diào)試語句而不需要真的修改自己的代碼。

Event Listener Breakpoints

4
Event Listener Breakpoints 可以在事件回調(diào)發(fā)生的時候中斷

image.png

例如我們選中 mouse 鼠標(biāo)類型中的 click 事件
那么當(dāng)發(fā)生 click 事件的時候，會自動在相應(yīng)的回調(diào)函數(shù)執(zhí)行時中斷

靈活運(yùn)用上面這些方法，可以使平時代碼問題排查更加靈活

Animation

除了樣式的調(diào)試，動畫也是可以檢查和調(diào)試的，通過快捷鍵 command + shift + P 輸入命令 show animation 打開動畫面板

image.png

這時候動畫面板就會開始監(jiān)聽頁面上的動畫，當(dāng)頁面上有動畫發(fā)生的時候，會被記錄下來記錄

• 最頂上是控制按鈕，可以清楚記錄的動畫，暫停監(jiān)聽，還有調(diào)整動畫播放速度
• 緊接著是動畫組，動畫面板會判斷哪些動畫是相關(guān)聯(lián)的并將它們分到同一個動畫組
• 選中某個動畫組可以看到包含的動畫過程以及時間軸
• 我們可以在時間軸上定位到任一時刻的動畫幀，也可以拖動左右兩端的圓點(diǎn)來修改動畫的延遲和周期
• 修改之后可以在屬性面板看到對應(yīng)的 css 樣式

結(jié)合這個工具來進(jìn)行動畫編寫和調(diào)試可以極大提高自己的效率，感興趣的可以自己摸索一下

Day and Night Transition

FPS meter & Paint flashing

當(dāng)用戶跟頁面發(fā)生交互的時候，頁面上的內(nèi)容有可能會發(fā)生變化，除了我們能明顯觀察到的視覺改變之外，由于 javascript 的操作，很可能頁面上也會有其他內(nèi)容被修改并重新渲染，這時候可以通過一些輔助工具來監(jiān)測頁面的運(yùn)行情況

image.png

下面是比較實(shí)用的功能：

image.png

• Paint flashing，實(shí)時高亮重繪區(qū)域（綠色）。
• Layout Shift Regions，實(shí)時高亮重排（重新布局）區(qū)域（紫色）。
• Layer borders，將合成層用邊框標(biāo)出來（橙色、橄欖色、青色）。
• Frame Rendering Stats，顯示 GPU 的信息，還有實(shí)時 FPS 顯示。
• Scrolling performance issues， 高亮具有滾動、點(diǎn)擊等事件的元素或者區(qū)域（黃色）
• Core Web Vitals，使用者體驗量化
  1. LCP 顯示最大內(nèi)容元素所需時間 (衡量網(wǎng)站初次載入速度)
  2. FID 首次輸入延遲時間 (衡量網(wǎng)站互動順暢程度)
  3. CLS 累計版面配置移轉(zhuǎn) (衡量網(wǎng)頁元件視覺穩(wěn)定性

通過 FPS meter 可以看到當(dāng)前頁面的實(shí)時幀率，正常情況下頁面應(yīng)該是處于 60 fps 的狀態(tài)，當(dāng)頁面更新不流暢的時候，fps 數(shù)值會下降，曲線出現(xiàn)波動。我們可以清楚地看到頁面操作造成了哪些位置的更新，結(jié)合前面 FPS meter，更方便我們定位頁面性能下降的原因。

同時開啟Paint flashing。這樣我們可以清楚地看到頁面操作造成了哪些位置的更新，結(jié)合前面 FPS meter，更方便我們定位頁面性能下降的原因

內(nèi)存分析類型

內(nèi)存快照: 展示了整個頁面的JavaScript對象以及DOM節(jié)點(diǎn)的內(nèi)存分配

打開控制臺上的Memory面板，會發(fā)現(xiàn)相應(yīng)的錄制按鈕等操作。

開始錄制前先點(diǎn)擊下垃圾回收-->點(diǎn)擊開始錄制。
如果JS堆內(nèi)存動態(tài)分配時間線，結(jié)束之前要再點(diǎn)擊下垃圾回收，再結(jié)束錄制

image.png

上面有三個按鈕：

• Heap snapshot - 用以打印堆快照，堆快照文件顯示頁面的 javascript 對象和相關(guān) DOM 節(jié)點(diǎn)之間的內(nèi)存分配
• Allocation instrumentation on timeline - 在時間軸上記錄內(nèi)存信息，隨著時間變化記錄內(nèi)存信息。
• Allocation sampling - 內(nèi)存信息采樣，使用采樣的方法記錄內(nèi)存分配。此配置文件類型具有最小的性能開銷，可用于長時間運(yùn)行的操作。它提供了由 javascript 執(zhí)行堆棧細(xì)分的良好近似值分配。

1. Summary 總覽視圖
可以顯示按構(gòu)造函數(shù)名稱分組的對象。使用此視圖可以根據(jù)按構(gòu)造函數(shù)名稱分組的類型深入了解對象（及其內(nèi)存使用），適用于跟蹤 DOM 泄漏。

內(nèi)存快照中，展示了整個頁面的JavaScript對象以及DOM節(jié)點(diǎn)的內(nèi)存分配

image.png

image.png

• Contructor - 表示使用此構(gòu)造函數(shù)創(chuàng)建的所有對象
• Distance - 顯示使用節(jié)點(diǎn)最短簡單路徑時距根節(jié)點(diǎn)的距離
• Shallow Size - 顯示通過特定構(gòu)造函數(shù)創(chuàng)建的所有對象淺層大小的總和。淺層- - 大小是指對象自身占用的內(nèi)存大?。ㄒ话銇碚f，數(shù)組和字符串的淺層大小比較大）
• Retained Size - 顯示同一組對象中最大的保留大小。對象的最大保留內(nèi)存，保留內(nèi)存是指對象被刪除后可以釋放的那部分內(nèi)存。

常見的頂層構(gòu)造函數(shù)：

• (global property)：全局對象和普通對象的中間對象，和常規(guī)思路不同。比如在Window上定義了一個Person對象，那么他們之間的關(guān)系就是[global] => - (global property) => Person。之所以使用中間對象，是出于性能的考慮。
• (closure)：使用函數(shù)閉包的對象。
• (array, string, number, regexp)：一系列對象類型，其屬性指向Array/String/Number/Regexp。
• HTMLDivElement/HTMLAnchorElement/DocumentFragment：元素的引用或者代碼引用的指定文檔對象。

快照可以用來發(fā)現(xiàn)DOM泄露。在Class filter(類過濾器)文本框中輸入Detached可以搜索分離的DOM樹。如果分離節(jié)點(diǎn)被JS引用，有可能就是泄露點(diǎn)。

如下代碼，class filter中查找string，在string列表中找到'Hello World!'可以查看到testArray的內(nèi)存引用。

var testArray = [ {value: 'Hello World!'} ];

最后，根據(jù)上面的圖來分析一下上面代碼產(chǎn)生的效果，根據(jù) js 的類型和引用的關(guān)系來分析，變量 testArray 在列表中的情況是：

image.png

基礎(chǔ)類型 string 值為 hello ，內(nèi)存標(biāo)記是 string@94357，這個 string 值存在于 Object @99423 對象上的 value 屬性上；
Object @99423 在 Object 列表里，在 Array @356493 的索引 0 位置存在該對象的引用；
Array @356493 在 Window / @353829 對象上存在引用，屬性名為"testArray"；
Window / @353829 是個 Windows 對象，在 Windows 列表里。

"hello" -> 在(string)列表里 -> string@94357 -> value in Object @99423

Object  -> 在 Object 列表里 -> [0] in Array @108181

Array -> 在(array)列表里 -> testArray in Window / @94129

Windows ->  在 Windows 列表里 -> Window / @94129

2. Comparison 對比視圖

顯示兩個快照之間的不同。使用此視圖可以比較兩個（或多個）內(nèi)存快照在某個操作前后的差異。檢查已釋放內(nèi)存的變化和參考計數(shù)，可以確認(rèn)是否存在內(nèi)存泄漏及其原因

• New - Comparison 特有 - 新增項
• Deleted - Comparison 特有 - 刪除項
• Delta - Comparison 特有 - 增量
• Alloc. Size - Comparison 特有 - 內(nèi)存分配大小
• Freed Size - Comparison 特有 - 釋放大小
• Size Delta - Comparison 特有 - 內(nèi)存增量

var testArray = [ {value: 'Hello World!'} ];
function doSomething() { testArray.push({ value: 'Hello Everyone!' }) } 
document.querySelector('#btn').addEventListener('click', doSomething)

點(diǎn)擊按鈕后，數(shù)組中 push 了新的一項對象

image.png

3. Containment 內(nèi)容視圖
查看內(nèi)存內(nèi)容。由頂級對象作為入口，更適合查看對象結(jié)構(gòu)，有助于分析對象的引用情況。適用于分析閉包以及深入分析對象。

image.png

4. Statistics 統(tǒng)計視圖
總覽內(nèi)存的統(tǒng)計信息

image.png

5. 分配時間線

看完靜態(tài)的快照，再來看看動態(tài)的。
可以持續(xù)的記錄堆分配的情況,隨著時間變化記錄內(nèi)存信息

var testArray = [ {value: 'Hello World!'} ]; 
var count = 1; 
function doSomething() {
  // 每次點(diǎn)擊 字符串長度都以上一次為基礎(chǔ)增加到5倍，拉大差異突出效果，并且之后在字符串頭部加上count值做區(qū)分
  count *= 5
  var str = new Array(count * 10).join(':')
  testArray.push({
    value: count + str
  })
}
document.querySelector('#btn').addEventListener('click', doSomething)

每條線的高度與最近分配的對象大小對應(yīng)，豎線的顏色表示這些對象是否仍然顯示在最終的堆快照中。
藍(lán)色豎線表示在時間線最后對象仍然顯示，灰色豎線表示對象已在時間線期間分配，但曾對其進(jìn)行過垃圾回收。

image.png

參考資料：

• Fix memory problems