運用開發人員工具自訂效能工作流程的 3 項新功能

聽起來是否有印象?您在 Chrome 開發人員工具中偵錯效能問題,但「Performance」面板中資訊量龐大,很難只專注於最相關且可採取行動的部分。時間軸的長度、火焰圖的深度,以及多種不同資料軌跡的廣度,都可能會造成瀏覽上的困難。雖然「效能」面板功能強大,但實用性不應因此受到影響!

為了改善 Chrome 的效能工具,我們最近推出了三項新功能,旨在減少資訊密度,並協助開發人員自訂工作流程:

  1. 隱藏時間軸中不相關的部分
  2. 隱藏火焰圖中不相關的部分
  3. 隱藏不相關的曲目

在本篇文章中,我們將深入探討這些功能,並說明如何使用這些功能,只專注於最關鍵的資訊。

隱藏時間軸中不相關的部分

網路效能以毫秒為單位,因此即使錄製的效能記錄只有幾秒鐘,也可能會遺漏許多資訊。

在 Chrome 第 122 版中,我們新增了建立導覽標記的功能。這項功能可讓您固定時間軸的邊界,這樣您只能在所設定的區域內縮放或平移。舉例來說,如果您嘗試偵錯回應問題,以這種方式限制時間軸就特別實用,因為您可以將注意力集中在單一互動或有問題的長時間工作上。

時間軸導覽標記 UI 的視覺化呈現
時間軸導覽標記 UI 的螢幕截圖

上述螢幕截圖是時間軸總覽的特寫,能以視覺化方式呈現主要執行緒活動,例如指令碼執行和顯示作業。當您將游標懸停在該按鈕上時,畫面上會顯示新的按鈕,可將時間軸的邊界設為目前的視窗。這個按鈕會依時間範圍寬度 (以毫秒為單位) 和 圖示來標示。麵包屑會顯示在時間軸概覽上方,每個麵包屑都會標示時間視窗的大小。

這項功能的使用需求如下:

  1. 縮放及平移時間軸,將其移至所需區域。
  2. 按一下時間軸總覽中的放大鏡圖示 ,即可限制時間軸並設定導覽標記。
  3. 視需要重複執行這個步驟,即可放大感興趣的巢狀區域。
  4. 按一下導覽標記,即可返回上一個或完整的時間軸範圍。
時間軸導覽標記 UI 的螢幕錄影

剪輯時間軸有助於確保您不會意外從邊界滑出至時間軸不相關的部分。如有需要,您可以按一下導航標記來縮小畫面。另一個好處是,時間軸總覽會與後續的曲目保持一致。這樣一來,您就能更輕鬆地找出強制重新流動等效能機會,並在火焰圖中找出其根本原因。

隱藏火焰圖的不相關部分

分析主執行緒活動並非易事。效能面板的這個部分稱為「火焰圖」,因為呼叫堆疊可能會變得又長又細。在某些極端情況下,這些堆疊可能會非常難以管理,導致您難以瞭解整個堆疊,也無法專注於要最佳化的項目。

從 Chrome 124 版開始,您可以自訂火焰圖中要隱藏的項目,這樣就能專心處理最可行的資訊。

火焰圖內容選單 UI 的視覺化
火焰圖內容選單 UI 的螢幕截圖

在火焰圖中按一下滑鼠右鍵,系統就會顯示內容選單,其中提供幾個隱藏項目的選項:

  • 隱藏函式:從火焰圖中移除所選函式。子項會向上移動,並立即顯示在父項函式後方。
  • 隱藏子項:在所選函式中修剪火焰圖,隱藏所有子項。
  • 隱藏重複子項:從火焰圖的其餘部分中移除所選函式的所有例項。
在火焰圖中隱藏項目的螢幕錄影

選取函式時,您也可以使用以下幾個實用的鍵盤快速鍵:

  • H:隱藏所選函式
  • C:隱藏所選函式的子項
  • R:稍後在堆疊中隱藏所選函式的例項
  • 「U」U:顯示所選函式的隱藏子項

永久隱藏不相關的指令碼

「Add Script to ignore list」選項會在火焰圖和同一個指令碼檔案中定義的「所有其他函式」中,隱藏所選函式。指令碼也會加入忽略清單,DevTools 偵錯工具會使用這份清單來逐步略過函式,並忽略來自指令碼的例外狀況。

系統會保留加入忽略清單的指令碼,因此在新的追蹤記錄中,這些指令碼仍會持續隱藏在火焰圖中。您無法控制的指令碼,就是忽略清單的理想候選項目。另一方面,隱藏個別函式只是目前的追蹤記錄中暫時的,並且取決於情況的其他情況。例如,您可以隱藏繁雜的遞迴函式呼叫堆疊,讓追蹤記錄更容易使用。

如要在火焰圖中還原忽略清單或任何其他隱藏函式,您可以使用內容選單重設所選函式的子項,或重設整個追蹤記錄中所有隱藏函式。含有隱藏子項的函式會加註 ▼ 圖示,該圖示會在點擊時重設子項。

將指令碼新增至忽略清單的螢幕錄影

如為非必要的深度與複雜性,如果能從火焰圖中消除,將使此圖表更容易使用。在必要時,您可以自訂要顯示的項目,這項人體工學改善功能可讓您將注意力集中在手邊工作最重要的資訊上。

隱藏不相關的曲目

主要執行緒活動只會在「效能」面板中顯示一個追蹤記錄。「效能」面板中的軌跡會以視覺化方式呈現程序的活動,且所有軌跡都會對齊至共同的時間軸,方便您進行偵錯。除了「主要」軌跡外,該頁面使用的其他子頁框、執行緒和工作站也會有個別軌跡,以及「網路」、「影格」、「動畫」和「互動」追蹤。還有更多軌跡標示了較低層級 Chrome 處理程序的活動,例如 IO、GPU 和合成器。這有大量資訊!不過,在大多數成效工作流程中,您只會一次處理幾個追蹤記錄的資訊。

在 Chrome 125 版中,我們將推出新的設定模式,讓您隱藏不需要的音軌,或是按照喜好重新排列。舉例來說,如果您要改善互動速度緩慢的問題,可以選擇隱藏所有軌跡,只保留「互動」、「主」和「GPU」軌跡。

階段設定 UI 的視覺化呈現
設定測試群組的內容選單螢幕截圖

如要編輯曲目,請在任一測試群組的名稱上按一下滑鼠右鍵,然後選取「設定測試群組...」。系統隨即會開啟設定模式,方便您顯示、隱藏或重新排列個別測試群組。按一下「完成設定曲目」按鈕,儲存偏好設定。

追蹤設定 UI 的螢幕錄影

設定軌跡後,您就能控制「Performance」面板在工作流程中顯示重要資訊的方式。您可以運用這些設定,從不相關的程序中隱藏活動,並以方便您存取所需資料的方式移動足跡。

設定程序即將完成

這三項功能提供強大的全新人體工學控制選項,讓您自訂成效工作流程。善用這些功能並減少雜訊量,可以更清楚地找到所需資訊並解讀數據。

歡迎您提供意見,讓我們瞭解哪些功能運作良好,或有待改善之處。如有任何問題或一般意見回饋,請聯絡 @ChromeDevTools。如果發現問題或有新功能建議,請在這個開放性問題中留言。

這只是我們改善 Chrome 效能工具的第一步,很高興在此分享現有的所有烹飪知識,使效能面板更加容易使用,並且更加強大。我們會在下一篇文章中展示下一批功能,並在 Chrome 開發人員版網誌上發布。同時,請參閱「Chrome 新功能」頁面,掌握 DevTools 和 Chrome 的最新動態。