[[441997]]

你好，我是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：

點擊查看，就能可視化看到結果：

現在可以看到燈塔樹形圖。此時，您可以執行以下操作：

1. 按單個捆綁包過濾。
2. 可視化JavaScript 文件中未使用的字節。
3. 選擇單個文件深入了解它們。
4. 在靠近頁面底部的覆蓋部分查看詳細的覆蓋統計數據。

這里看到了未使用的字節(Unused Bytes)，能不能換一種更加直觀的方式來顯示呢，當然有辦法。

看到代碼覆蓋率

打開實驗面板

首先打開設置，然后找到實驗面板，點擊 Record coverage while performance tracing， 選擇啟用它。

當然，你可以選擇在 chrome://flags/ 查看是有也可以開啟這個實驗功能。

勾選覆蓋率選項

打開Pe面板，然后勾選覆蓋率選項：

點擊分析(reload page)

點擊分析按鈕后，在性能記錄期間可以自動捕獲代碼覆蓋率，這樣子在頁面加載時，代碼覆蓋率和性能面板記錄可以幫助您深入了解性能瓶頸。

開始檢測覆蓋率

有了覆蓋率面板后，我們需要點擊開始檢測覆蓋率面板：

接著拿到這里結果后，我們可以根據文件類型分析，查看哪些部分未使用，可以更加直觀分析，后續這里是否可以干掉無用代碼。

總結

看完后，你會掌握三個Chrome DevTools小技巧，設置用戶界面語言，可視化分析JavaScript bundles，查看代碼覆蓋率，后者可以幫助你深入了解性能瓶頸。

不過這些小Tips都可以在Chrome DevTools學到，附上官網：

https://developer.chrome.com/docs/