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