Chrome DevTools: 可視化代碼覆蓋率
你好，我是TianTianUp。
今天分享一些Chrome DevTools開(kāi)發(fā)調(diào)試Tips。
可視化分析JavaScript包，你可能會(huì)想到 webpack-bundle-analyzer，諸如此類(lèi)的可視化分析工具太多了，可以參考：
https://juejin.cn/post/6844904056985485320
如果想要分析一些線上JavaScript bundles，這個(gè)時(shí)候我們需要借助Chrome DevTools。
Chrome DevTools 是輔助開(kāi)發(fā)者進(jìn)行 Web 開(kāi)發(fā)的重要調(diào)試工具,學(xué)會(huì)合理利它，還是能提高不是效率的，今天介紹一下如何利用它來(lái)可視化分析 JavaScript bundles。
設(shè)置用戶界面語(yǔ)言
基于實(shí)際開(kāi)發(fā)，我的Chrome DevTools已經(jīng)開(kāi)啟中文版用戶界面語(yǔ)言，大大減少了一些閱讀成本。
忘記這里是Chrome 94版本開(kāi)啟的 langues功能，版本過(guò)低的話，可以升級(jí)到94版本，
Chrome 94版本新功能預(yù)覽：
https://developer.chrome.com/en/blog/new-in-devtools-94/
Lighthouse Treemap
Lighthouse Treemap 顯示了 JavaScript bundles的可視化 。它與源映射兼容，非常適合理解頁(yè)面使用的大型 JavaScript 模塊。它還可以可視化未使用的字節(jié)。
接下來(lái)，講一講如何打開(kāi)這個(gè)功能：
搜索Lighthouse
打開(kāi) DevTools，使用快捷鍵Cmd + Shift + P并搜索Lighthouse。
打開(kāi) Lighthouse Panel
點(diǎn)擊后，面板是這樣子的：
接下來(lái)我們需要勾選第一個(gè)選項(xiàng)，性能(Generate report)，這里面還有其他的選擇，比如是移動(dòng)端設(shè)備，還是桌面端，然后點(diǎn)擊生成報(bào)告。
查看樹(shù)狀圖(View Treemap)
下滑生成報(bào)告后，找到View Treemap：
點(diǎn)擊查看，就能可視化看到結(jié)果：
現(xiàn)在可以看到燈塔樹(shù)形圖。此時(shí)，您可以執(zhí)行以下操作：
- 按單個(gè)捆綁包過(guò)濾。
- 可視化JavaScript 文件中未使用的字節(jié)。
- 選擇單個(gè)文件深入了解它們。
- 在靠近頁(yè)面底部的覆蓋部分查看詳細(xì)的覆蓋統(tǒng)計(jì)數(shù)據(jù)。
這里看到了未使用的字節(jié)(Unused Bytes)，能不能換一種更加直觀的方式來(lái)顯示呢，當(dāng)然有辦法。
看到代碼覆蓋率
打開(kāi)實(shí)驗(yàn)面板
首先打開(kāi)設(shè)置，然后找到實(shí)驗(yàn)面板，點(diǎn)擊 Record coverage while performance tracing， 選擇啟用它。
當(dāng)然，你可以選擇在 chrome://flags/ 查看是有也可以開(kāi)啟這個(gè)實(shí)驗(yàn)功能。
勾選覆蓋率選項(xiàng)
打開(kāi)Pe面板，然后勾選覆蓋率選項(xiàng)：
點(diǎn)擊分析(reload page)
點(diǎn)擊分析按鈕后，在性能記錄期間可以自動(dòng)捕獲代碼覆蓋率，這樣子在頁(yè)面加載時(shí)，代碼覆蓋率和性能面板記錄可以幫助您深入了解性能瓶頸。
開(kāi)始檢測(cè)覆蓋率
有了覆蓋率面板后，我們需要點(diǎn)擊開(kāi)始檢測(cè)覆蓋率面板：
接著拿到這里結(jié)果后，我們可以根據(jù)文件類(lèi)型分析，查看哪些部分未使用，可以更加直觀分析，后續(xù)這里是否可以干掉無(wú)用代碼。
總結(jié)
看完后，你會(huì)掌握三個(gè)Chrome DevTools小技巧，設(shè)置用戶界面語(yǔ)言，可視化分析JavaScript bundles，查看代碼覆蓋率，后者可以幫助你深入了解性能瓶頸。
不過(guò)這些小Tips都可以在Chrome DevTools學(xué)到，附上官網(wǎng)：
https://developer.chrome.com/docs/
