パフォーマンス プロファイルに元の関数名を表示する

ビルド プロセスでコードをコンパイルして最小限にして 1 つのファイルに結合する場合、パフォーマンス プロファイルに表示される関数の名前を理解するのが難しい場合があります。 ソース マップは、コンパイルされた縮小されたコードを元のソース コード ファイルにマップします。 パフォーマンス ツールは、ソース マップを使用して、記録が行われた後に縮小された関数名を、元のコードで見つかった元の名前にマップできます。

DevTools がソース マップを使用する方法の詳細については、「 デバッグのために、処理されたコードを元のソース コードにマップする」を参照してください。

パフォーマンス ツールの炎のグラフに元の関数名を表示するには、[Unminify (Unminify)] ボタンを使用します。

DevTools では、ソース マッピングを使用して、クライアント側のコードを読み取りおよびデバッグ可能に保ちます。 パフォーマンス ツールで [ 未確定 ] ボタンをクリックすると、ソース マップを使用して、記録したパフォーマンス プロファイルの未確定バージョンを作成できます。

読みにくい関数名を持つパフォーマンス プロファイルの炎グラフの例:

いくつかの意味のある関数名が復元されたパフォーマンス プロファイルの炎グラフの例:

パフォーマンス ツールでパフォーマンス プロファイルを記録する場合、プロファイルの [メイン] セクションには、記録中に呼び出された JavaScript 関数の詳細な炎のグラフが表示されます。

理想的には、この炎のグラフ ビューでは、元のソース コードに表示されている意味のある関数名を表示する必要があります。 ただし、運用コードがコンパイル、縮小、バンドルされている場合、 パフォーマンス ツールは最初に、変換された 運用 コードから抽出された関数名を表示します。 これらの運用関数名はあいまいであり、元のソース コードの関数名に簡単にマップできない場合があります。

パフォーマンス プロファイルを縮小解除し、縮小された識別子に加えてより意味のある関数名が表示されるようにするには、次の手順に従います。

手順 1 - ソース マップを設定する

運用コードと並行してソース マップをホストします。 未確定の場合、 パフォーマンス ツールは、運用コードと共にソース マップを見つけることを想定しています。

詳細については、「 デバッグのために、処理されたコードを元のソース コードにマップする」を参照してください。

手順 2 - パフォーマンス プロファイルを記録する

1. パフォーマンス ツールで、[レコード] ボタンをクリックして、分析するページのパフォーマンス プロファイルを記録します。 詳細については、「 ランタイム のパフォーマンスを記録する」を参照してください。

   

   パフォーマンス プロファイルが パフォーマンス ツールに 記録されます。

2. パフォーマンス ツールで、メイン領域 (炎図) をクリックし、マウス ホイールを使用して拡大します。 左右にクリックしてドラッグします。 炎のグラフの関数名を確認します。

   パフォーマンス ツールの炎グラフには、XI、Gi、d、o、an、c、co、実稼働コードの a などの縮小された関数名が表示されます。

   

手順 3 - コードの縮小を解除する

1. [ 未確定 ] () ボタンをクリックします。

   

   DevTools では、ポップアップが簡単に表示されます。読み取り: 状態: 未確定ファイルの作成。 [ 名前を付けて保存] ダイアログが開きます。 既定のファイル名は、 のようなyymmddThhmmssProfile-20220307T164948-unminified.json日付と時刻で始まるパターンです。 既定のディレクトリは Downloads ディレクトリです。

2. ファイル名とディレクトリを選択し、[ 保存 ] ボタンをクリックします。

   パフォーマンス ツールは、記録されたパフォーマンス プロファイルの新しいバージョンを作成し、炎のグラフの一部の関数名をソース マップを使用して、より意味のある関数名に置き換えます。 ソース マップでは、 パフォーマンス ツールですべての 関数名をマップするために必要な情報が常に提供されるとは限らないため、縮小された運用名の一部が引き続き表示される場合があります。

手順 4 - 未確定プロファイルを読み込む

1. パフォーマンス ツールで、[プロファイルの読み込み] (パフォーマンス ) アイコン ボタンをクリックします。 または、 パフォーマンス ツールの空白領域を右クリックし、[ プロファイルの読み込み] を選択します。

   

2. [ 開く ] ダイアログで、ダウンロードした未確定のパフォーマンス プロファイル .json ファイルを選択します。 必要に応じて、詳細については、「パフォーマンス機能リファレンスで記録を読み込む」を参照し、以下に進みます。

   一部の関数名が未確定になりました。 パフォーマンス ツールの未確定の炎のグラフには、useObserver (d)、useQueuedForceUpdateBlock (o)、trackDerivedFunction (an)、initializeIconColorMap (c)、getExtraToolControls (co)、isToggleEnabled (a) など、ソース マップから取得されたわかりやすい名前でラベル付けされた関数が表示されるようになりました。

   

関連項目

• パフォーマンス ツールの概要 - DevTools でのランタイム パフォーマンスの分析の概要。
• パフォーマンス機能リファレンス - パフォーマンス ツールで提供される多くの機能のリファレンスです。