發布日期：2024 年 11 月 13 日
假設您正在查看效能追蹤記錄，並想要醒目顯示特定區域，例如最長的工作或不必要的工作區塊。也許您想記下筆記，方便日後參考，或是與同事分享發現的結果。怎麼做才是最好的方法？
當然，您也可以將追蹤記錄列印出來，然後手動繪製並書寫筆記，或是使用第三方軟體在追蹤記錄的螢幕截圖上繪製筆記！(不過，這也是目前為止最好的方法)。
為了簡化開發人員工作流程，我們很高興推出這些選項的替代方案：您可以直接在「Performance」面板中新增註解至追蹤記錄！
您現在可以直接在追蹤記錄中加上註解、輕鬆瀏覽這些註解，甚至直接將註解儲存在追蹤記錄檔案中。這麼一來，您就能像傳送檔案一樣輕鬆地分享精選洞察資料，而且不需要使用外部工具或替代方法。註解不僅可協助您進行偵錯，還能讓您與同事快速達成共識，或讓他們更瞭解發生的情況，無須花費太多時間來回討論。
註解有三種類型：
註解時間範圍：標示時間軸中的任何時間範圍
註解項目：在時間軸上的任何項目中加入標籤
項目連結：使用箭頭連結任何兩個項目，以顯示兩者之間的關係
以下將說明各類型的註解，以及可能會用到的情況。
註解時間範圍
在 DevTools 中，常見的工作流程是記錄追蹤記錄，以便偵錯互動速度緩慢的問題。追蹤記錄檢視畫面乍看之下可能令人眼花撩亂，但當您深入瞭解特定事件處理常式和呼叫堆疊時，就會開始瞭解其中的含意。您可以透過建立註解，標示一段時間的一般用途，讓追蹤記錄檢視畫面更容易使用。舉例來說，為 UI 註解時間範圍可能會很有幫助，這樣 UI 就能在使用者互動後有意義地更新。
如何標記時間範圍：按住 Shift 鍵，從互動開始到 UI 更新的時間範圍拖曳。接著輸入標籤即可建立註解。如果所選範圍不正確，請取消選取範圍，然後再點選要輸入的範圍。或者，如要編輯註解的標籤，請按兩下該註解。目前你無法調整現有註解的時間範圍。如果時間範圍不正確，請刪除註解並建立新的註解。
有了這項註解，您就能更清楚地瞭解在使用者可見變更發生之前，必須執行的所有工作，進而有助於您針對特定工作進行偵錯。
已加註的項目
為了讓使用者更容易看見變更，您也可以使用輸入標籤為負責轉換的任務加上註解。
為項目建立標籤：按兩下所選項目並輸入標籤，或是按一下項目右鍵，然後從內容選單中選取「Label Entry」。如要編輯註解的標籤，請按兩下項目或標籤。或者，您也可以從內容選單中選取「標籤項目」選項。
有了這些輸入註解，您就能更輕鬆地找出對互動至關重要 (或不重要) 的工作，以及所需的時間。
項目連線
第三種標註追蹤記錄的方式，是繪製互動和負責轉換的長時間工作之間的連結。
如何建立項目之間的連結：請按兩下要連結至其他項目的項目，然後按一下該項目右側顯示的箭頭。接著，按一下要連結的項目。或者，在項目上按一下滑鼠右鍵，然後在項目內容選單中選取「連結項目」。
因此，即使互動本身已結束，您還是可以使用這類註解，更清楚顯示該互動與後續長時間工作 (最終會阻斷 UI) 的關聯。
刪除及隱藏註解
您可以透過側欄中的註解清單檢視畫面，快速刪除所有註解。將滑鼠游標懸停在註解上，就會顯示垃圾桶圖示 。點選這個圖示即可刪除註解。
如要刪除與特定事件相關聯的項目標籤和項目連結註解，請在事件上按一下滑鼠右鍵，然後選取「刪除註解」。如要刪除含有標籤的註解，您可以移除標籤並儲存註解。
如果您想隱藏註解而不刪除，以免干擾您探索追蹤記錄，只要勾選註解側欄底部的「隱藏註解」核取方塊即可。系統會儲存這項偏好設定。在啟用這項設定的情況下載入含註解的追蹤記錄時，系統會隱藏註解，直到您清除核取方塊為止。
儲存或載入附註追蹤記錄
太好了，您已新增所有註解，有助於您和其他人瞭解追蹤記錄。後續步驟
您不必像以前那樣，在註解前先擷取追蹤記錄畫面，再傳送給同事。只要儲存已註解的檔案，然後傳送給他們即可。就這樣，他們可以將檔案上傳至「Performance」面板，並查看您在追蹤記錄內容中所做的所有註解，甚至可以新增更多註解並傳回給您！
開發人員工具也會在追蹤檢視畫面中儲存其他類型的自訂設定。舉例來說，您可以透過放大並設定麵包屑，或隱藏不相關呼叫堆疊中的項目，來隔離感興趣的區域，而所有這些設定都會保留在追蹤記錄檔中，讓您更輕鬆地與他人共同進行效能偵錯作業。透過這些自訂選項，您可以吸引使用者注意最重要的資訊，同時提供整個互動追蹤記錄的背景資訊，這與螢幕截圖不同。
如要保留註解和其他自訂設定，請點選下載圖示 下方的「儲存追蹤記錄」選項。載入追蹤記錄時，系統會納入所有自訂項目。預設會儲存含註解的追蹤記錄，但如果您只想儲存原始追蹤記錄檔案，請選取「儲存不含註解的追蹤記錄」選項。
結論
這可能會讓您感到壓力，但請放心！如需建立註解的操作說明，請前往「成效」面板側欄的註解分頁。這個分頁會在沒有註解時提供操作說明，並在建立註解後顯示註解清單檢視畫面。
同樣地，「Performance」面板中的註解可讓開發人員在追蹤記錄中找出關鍵時刻，並加入個人化背景資訊和洞察資料。這麼做可簡化分析程序，讓您更輕鬆地分享成效最佳化資訊並與他人協作。歡迎試用「Performance」面板中的註解，並與我們分享您的想法。如有任何意見，歡迎在公開問題中提供意見。
告別外部工具，迎接更有效率的工作流程！