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