在效能設定檔中顯示原始功能名稱

如果你的建置過程會編譯、縮小程式碼並合併成單一檔案，效能設定檔中顯示的函式名稱可能就很難理解。 原始碼映射會將你編譯、精簡的程式碼對應到原始原始碼檔案。 效能工具可以使用原始碼映射，將錄製完成後縮減的函式名稱映射回原始程式碼中的原始名稱。

想了解更多 DevTools 如何使用原始碼映射，請參閱「 將處理中的程式碼映射到你的原始原始碼，以便除錯」。

要在 效能 工具的火焰圖中看到原始函式名稱，請使用 「Unminify 」 () 按鈕。

DevTools 中使用原始碼映射，讓你的客戶端程式碼可讀且可除錯。 點擊效能工具中的 「Unminify 」按鈕，你可以利用來源地圖建立你錄製的效能檔案的未壓縮版本。

一個性能曲線火焰圖範例，功能名稱難以辨識：

一個效能曲線火焰圖範例，並恢復了一些更有意義的函式名稱：

在 效能 工具錄製效能剖面時，剖面的 主 區會顯示錄製期間被呼叫的 JavaScript 函式的詳細火焰圖表。

理想情況下，在這個火焰圖視圖中，你希望看到原始原始碼中顯示的有意義函式名稱。 然而，如果你的生產程式碼是編譯、壓縮或打包， 效能 工具會先顯示從轉換後的 生產 程式碼中擷取的函式名稱。 這些生產函式名稱可能很冷門，也不容易對應到原始原始碼中的函式名稱。

若要解除效能配置檔，以便在縮小識別碼外顯示更多有意義的函式名稱，請依照以下步驟操作。

步驟 1 - 設定來源地圖

將你的原始碼貼圖與生產程式碼並排架設。 在解壓縮時， Performance 工具預期會找到你的原始碼映射以及生產程式碼。

詳情請參閱「 將處理中的程式碼映射到原始原始碼，以便除錯」。

步驟 2 - 記錄績效檔案

1. 在 效能 工具中，點擊 「錄製」 按鈕，錄製你想分析頁面的績效檔案。 詳情請參閱效能功能參考中的「記錄執行時效能」。

   

   效能設定檔會被記錄在 效能 工具中。

2. 在 性能 工具中，點擊火焰圖表) (主區域，並用滑鼠滾輪放大。 點擊並左右拖曳。 看看火焰圖裡的功能名稱。

   效能工具中的火焰圖表顯示了縮小的函式名稱，例如 XI、GI、D、O、AN、C、CO 和 a，來自你的生產程式碼：

   

步驟 3 - 還壓縮程式碼

1. 點擊 「Unminify 」 ) 按鈕：

   

   在 DevTools 中，會短暫跳出一個視窗，內容為： 狀態：正在建立未完成檔案。 接著會跳出 另存新檔 對話框。 預設檔名是以日期和時間開頭的模式，例如 yymmddThhmmss。 Profile-20220307T164948-unminified.json 預設目錄是 Downloads 目錄。

2. 選擇一個檔案名稱和目錄，然後點擊 儲存 按鈕。

   效能工具會建立新版本的錄製效能剖面，並利用你的來源映射，將火焰圖表中部分函數名稱替換為更有意義的函數名稱。 部分縮小後的生產名稱仍可能出現，因為原始碼映射不一定能提供 效能工具所需的 資訊來映射所有函式名稱。

步驟 4 - 載入未壓縮的設定檔

1. 在 效能 工具中，點擊 載入設定檔 (效能工具) 圖示按鈕 。 或者，在 效能 工具中右鍵點擊一個空白區域，然後選擇 載入設定檔。

   

2. 在 開啟 對話框中，選擇你剛下載的未壓縮效能設定檔 .json 。 如有需要，詳情請參見「 載入錄音 」於 「Performance Features reference」，然後繼續下文。

   部分函式名稱現在已未壓縮。 Performance 工具中未壓縮的火焰圖表現在會顯示這些函式，並以更有意義的名稱標示，取自你的原始地圖，例如 useObserver (d) 、useQueuedForceUpdateBlock (o) 、trackDerivedFunction (an) 、initializeIconColorMap (c) 、getExtraToolControls (co) ，以及 isToggleEnabled (a) 。

   

另請參閱

• 分析執行時效能 (教學) - DevTools 中分析執行時效能的入門。
• 效能功能參考，- 提供效能工具中許多功能的參考資料。