聽起來很熟悉嗎?你正在對 Chrome 開發人員工具中的效能問題進行偵錯,但「效能」面板中的資訊量十分龐大,因此難以只專注於最相關的實用部分。在時間軸長度、火焰圖深度,以及許多不同軌跡之間,要瀏覽是一項艱鉅的挑戰。和「效能」面板一樣強大,提供的實用性不應該犧牲可用性!
在改善 Chrome 效能工具的計畫中,我們最近推出了三項新功能,旨在降低資訊密度,並協助開發人員自訂工作流程:
在這篇文章中,我們將詳細介紹每一項功能,並示範如何利用這些功能,專注在最重要的資訊上。
隱藏時間軸中不相關的部分
網站效能的運作規模是毫秒,因此,即使效能記錄只有幾秒鐘,也仍有大量機會讓您難以置信。
在 Chrome 122 版中,我們新增了建立導覽標記的功能。這項功能可讓您限制時間軸的邊界,只能縮放或平移至您設定的指定區域。如果您想對回應速度問題進行偵錯,因此限制時間軸這項做法就格外有用。舉例來說,您可以專心處理單一互動或耗時較長的工作。
![時間軸導覽標記 UI 的視覺化呈現](https://developer.chrome.com/static/blog/devtools-customization/image/timeline.png?authuser=19&hl=zh-tw)
上述螢幕截圖是時間軸總覽的特寫,能以視覺化方式呈現主要執行緒活動,例如指令碼執行和簡報工作。將遊標懸停在指標上時,會出現新的按鈕,將時間軸的界線設為目前的視窗。按鈕上取決於時間範圍的寬度 (以毫秒為單位) 和
圖示。導覽標記位於時間軸總覽上方,每個導覽標記都會依時間範圍的大小加上標籤。這項功能的使用需求如下:
- 縮放時間軸並平移到要查看的區域。
- 按一下時間軸總覽中的放大鏡圖示 ,即可限制時間軸並設定導覽標記。
- 視需要重複以上步驟,放大感興趣的巢狀區域。
- 按一下導覽標記,即可回到上一個搜尋範圍或完整的時間軸範圍。
修剪時間軸有助於確保您不會意外捲動至時間軸中不相關的部分。不過需要時,您可以按一下導覽標記來縮小畫面。另一個好處是,時間軸總覽會與下列課程保持一致。如此一來,就能輕鬆找出強制重排等效能商機,並找出火焰圖中的根本原因。
隱藏火焰圖中不相關的部分
分析主要執行緒活動並不容易。這部分的「效能」面板稱為火焰圖,因為呼叫堆疊可以達到多少時間,以及局長。在某些極端的情況下,這些堆疊可能讓人難以理解整個內容,因而難以瞭解要最佳化的項目。
從 Chrome 124 版開始,您可以自訂要在火焰圖中隱藏的確切項目,以便專注於執行最可行的資訊。
![火焰圖內容選單 UI 的視覺化呈現](https://developer.chrome.com/static/blog/devtools-customization/image/flame-chart.png?authuser=19&hl=zh-tw)
當您在火焰圖中的函式上按一下滑鼠右鍵時,會出現內容選單,其中包含多個隱藏項目的選項:
- 隱藏函式:從火焰圖中移除所選函式。其子項在父項函式之後會向上移動。
- 隱藏子項:依據所選函式修剪火焰圖,並隱藏其所有子項。
- 隱藏重複子項:從火焰圖的其他部分移除所選函式的所有例項。
選取函式後,還有幾個實用的鍵盤快速鍵可供使用:
- H:隱藏所選函式
- C:隱藏所選函式的子項
- R:稍後在堆疊中隱藏所選函式的執行個體
- U:顯示所選函式的隱藏子項
永久隱藏不相關的指令碼
「新增要忽略的指令碼」選項會在火焰圖中隱藏所選函式,以及在同一個指令碼檔案中定義的所有其他函式。此外,這個指令碼也會新增至 ignore 清單,開發人員工具偵錯工具會使用這份清單來逐步處理函式,並忽略來自指令碼的例外狀況。
新增至忽略清單的指令碼會保留下來,因此這些指令碼會繼續顯示在新的追蹤記錄火焰圖中。控制名單之外的指令碼則很適合設為忽略清單。另一方面,隱藏個別函式是暫時的追蹤記錄,與情境息息相關。舉例來說,您可以隱藏週期性函式呼叫中麻煩的堆疊,讓追蹤記錄更容易使用。
如要在火焰圖中還原忽略清單或任何其他隱藏函式,您可以使用內容選單重設所選函式的子項,或者重設追蹤記錄中的所有隱藏函式。系統會為含有隱藏子項的函式加上 ▼ 註解,點選該圖示會一併重設子項。
如能去除火焰圖中的非必要深度和複雜度,就更易於使用。如有需要,能夠自訂要顯示的項目可協助符合人體工學,助您專心處理手邊工作中最重要的資訊。
隱藏不相關的曲目
主要執行緒活動只構成「效能」面板的一次軌跡。「效能」面板中的追蹤會以視覺化方式呈現程序的活動,而且這些軌跡都與通用時間軸相對應,方便偵錯。除了「Main」(主要) 軌以外,頁面還會有個別的軌跡,適用於網頁使用的其他子頁框、執行緒和工作站,以及「網路」、「頁框」、「動畫」和「互動」軌。更多的追蹤記錄會標示低階 Chrome 程序 (例如 IO、GPU 和合成器) 的活動。這項資訊很多!至於大多數效能工作流程,您一次只會考慮幾首曲目的資訊。
自 Chrome 125 起,您可以透過全新的設定模式隱藏不需要的測試群組,或依喜好重新排列測試群組。舉例來說,如果您想對緩慢互動進行最佳化,可以選擇隱藏除了「互動」、「主要」和「GPU」追蹤的所有內容。
![測試群組設定 UI 的視覺化圖表](https://developer.chrome.com/static/blog/devtools-customization/image/tracks.png?authuser=19&hl=zh-tw)
如要編輯測試群組,請在任一測試群組的名稱上按一下滑鼠右鍵,然後選取「設定測試群組...」。系統隨即會開啟設定模式,方便你顯示、隱藏或重新排列個別測試群組。按一下「完成設定測試群組」按鈕,即可儲存偏好設定。
設定測試群組後,您就能控管「效能」面板呈現工作流程的重要資訊。你可以使用這些設定隱藏不相關的處理程序中的活動,並以最簡便的方式移動軌跡,以便取得所需資料。
設定程序即將完成
這三項功能提供強大的全新人體工學控制選項,方便您自訂效能工作流程。只要運用這些功能並減少雜訊數量,您就能更加妥善找到所需資料,並取得資料解讀。
我們很期待您能告訴我們哪些部分成效良好,哪些方面有待改善。如有任何問題或一般意見回饋,請聯絡 @ChromeDevTools。如果功能異常,或您有新功能建議,請留言這項待解決的問題。
改善 Chrome 的效能工具只是起步,我們很高興在此分享其他一切資訊,讓效能面板更易於使用且功能更強大。我們會在 Chrome for Developers 網誌上發布下一批功能的新文章,直接在這裡發布。在此期間,請查看 Chrome 的新功能頁面,掌握開發人員工具和 Chrome 的所有新功能。