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