在效能配置檔中顯示原始函式名稱

如果您的建置程式會編譯並縮寫程式代碼，並將其合併成單一檔案，則效能配置檔中顯示的函式名稱可能難以理解。 來源對應會將已編譯的縮製程式代碼對應至原始原始原始程式碼檔案。 效能工具可以使用來源對應，在錄製之後將縮製化的函式名稱對應回原始程序代碼中找到的原始名稱。

若要深入瞭解 DevTools 如何使用來源對應，請參閱將 已處理的程式代碼對應至原始原始原始程式碼以進行偵錯。

若要在效 能工具的 圖表中查看原始函式名稱，請使用 [取消 通知 ] ([ ) 按鈕。

來源對應用於 DevTools，讓您的用戶端程式代碼保持可讀取和可偵錯。 按兩下 [效能] 工具中的 [ 取消通知 ] 按鈕，即可使用來源對應來建立您所記錄之效能配置檔的未定義版本。

效能配置檔繪製圖表的範例，其中包含難以讀取的函式名稱：

效能配置檔繪製圖表的範例，其中還原了一些更有意義的函式名稱：

在效 能工具中 錄製效能配置檔時，配置檔 的Main 區段會顯示錄製期間所呼叫 JavaScript 函式的詳細圖表。

在理想的情況下，在此圖表檢視中，您想要查看原始原始原始程式碼中顯示的有意義的函式名稱。 不過，如果您的生產程式代碼經過編譯、縮製或配套， 效 能工具一開始會顯示從轉換后的 生產 程式代碼擷取的函式名稱。 這些生產函式名稱可能會隱藏，而且可能不容易對應至原始原始原始程式碼中的函式名稱。

若要將效能配置檔解除管理，以便除了縮製標識碼之外，還會顯示一些更有意義的函式名稱，請遵循下列步驟。

步驟 1 - 設定來源對應

將您的來源對應與生產環境程式代碼並存裝載。 取消管理時， 效 能工具預期會尋找您的來源對應以及您的生產程序代碼。

如需詳細資訊，請 參閱將已處理的程式代碼對應至原始原始原始程式碼以進行偵錯。

步驟 2 - 記錄效能配置檔

1. 在 [ 效能 ] 工具中，按兩下 [ 記錄] 按鈕，以記錄您要分析之頁面的效能配置檔。 如需詳細資訊，請 參閱記錄運行時間效能。

   

   效能配置檔會記錄在效 能 工具中。

2. 在 [ 效能 ] 工具中，按兩下主要區域 (滑鼠圖表) ，然後使用滑鼠滾輪放大。 按兩下並拖曳向左和向右。 查看圖表中的函式名稱。

   效能工具中的圖表會顯示縮製函式名稱，例如 XI、Gi、d、o、an、c、co，以及來自生產環境程式代碼的 ：

   

步驟 3 - 取消管理程式碼

1. 按鍵 [ 取消管理 ] () 按鈕：

   

   在 DevTools 中，彈出視窗會短暫出現，如下所示： 狀態：建立未設定的檔案。 接著，[ 另存新檔 ] 對話框隨即開啟。 默認檔名是以日期和時間開頭的模式，例如 yymmddThhmmss： Profile-20220307T164948-unminified.json。 默認目錄是 Downloads 目錄。

2. 選取檔名和目錄，然後按下 [ 儲存] 按鈕。

   效 能 工具會建立新版本的記錄效能配置檔，並使用您的來源對應，將一些來自折射圖的函式名稱取代為更有意義的函式名稱。 部分縮製化的生產名稱可能仍會出現，因為來源對應不一定會提供效 能工具對 應所有函式名稱的必要資訊。

步驟 4 - 載入未完成的配置檔

1. 在效能工具中，按兩下 [效能工具]) 按鈕。 或者，以滑鼠右鍵按兩下效 能 工具的空白區域，然後選取 [ 載入設定檔]。

   

2. 在 [ 開啟 ] 對話框中，選取您剛才下載的未完成效能配置檔 .json 。 如需詳細資訊，請參閱在效能功能參考中載入錄製，然後繼續下方。

   某些函式名稱現在為非系統化。 [效能] 工具中未明示的十字形圖現在會顯示標示為從來源對應取得更有意義的名稱的函式， 例如 useObserver (d) 、useQueuedForceUpdateBlock (o) 、trackDerivedFunction () 、initializeIconColorMap (c) 、getExtraToolControls (co) 和 isToggleEnabled () 。

   

另請參閱

• 效能工具簡介 - 在 DevTools 中分析運行時間效能的簡介。
• 效能功能參考 - 效能工具中所提供許多功能的參考。