強化されたパフォーマンスとメモリ トレースを共有する

パフォーマンスツールとメモリ ツールは、Web ページに関するランタイム データを記録します。 記録されたデータを調べます。これにより、Web ページのメモリ使用量やランタイム パフォーマンスを向上させることができます。

さらに、記録されたデータをディスク上のファイルにエクスポートできます。 エクスポートされたファイルは トレースと呼ばれます。

パフォーマンスとメモリ トレースのエクスポートは、これらのファイルを他のユーザーと共有して問題の調査に役立つ場合に便利です。 エクスポートされたトレースは、.json.heapsnapshotDevTools でいつでもインポートできる、、.heapprofile、または .heaptimeline ファイルです。

既定では、トレースにはトレースされた Web ページからのランタイム データに関する最小限の情報が含まれていますが、トレースは、試験的な機能として 拡張トレースとしてエクスポートすることもできます。 拡張トレースは、 .devtools トレースされた Web ページからのより多くのランタイム データを含むファイルです。 トレースの強化により、トレースが記録された環境を再作成し、元のソース ファイルを提供することで、パフォーマンスとメモリの問題を簡単に解決できます。

拡張トレースを使用すると、インポートされたトレースにあるソース コード参照を 、ソース ツールの実際のランタイム コードに確実に解決できます。 また、トレースの記録時にソース マップが存在していた場合、または Azure Artifacts シンボル サーバーに格納されている場合は、元のソース コードへのコード参照を解決することもできます。

標準トレースと拡張トレースの違い

通常のトレース

通常のトレースには、Web ページに存在する情報の一部のみが含まれます。 元のコードの多くは失われ、Web ページの記録されたパフォーマンスまたはメモリ データのみがトレースに保持されます。 たとえば、別の DevTools セッション中または別のコンピューターで記録されたメモリ トレースをインポート .heapsnapshot する場合、 メモリ ツールのオブジェクトから Sources ツールのコンストラクターに移動する方法はありません。

同様に、 パフォーマンス ツールで、前に記録したパフォーマンス トレースをインポートする場合:

• パフォーマンス レポートからブラウザーで実行されていた JavaScript にマップできるようにするには、トレースが同じサイトと同じ構成に記録されている必要があります。
• 記録後にファイル名または関数名が変更された場合、マッピングはエラーが発生しやすくなります。

拡張トレース

拡張トレースでは、記録が行われた Web ページに関する詳細情報が保持されます。 たとえば、拡張トレースには実行コンテキストと解析されたスクリプトの一覧が含まれており、必要に応じて、コンソール メッセージ、スクリプト ソース、DOM ツリーのスナップショットを含めることができます。

拡張トレースが DevTools にインポートされると、新しい DevTools ウィンドウが表示されます。 この新しいウィンドウは、ブラウザーで実行されている Web ページに接続されておらず、代わりに、トレースが最初に記録された環境の一部を再作成します。

たとえば、DOM のスナップショットが拡張トレースに記録された場合、要素ツールはこのスナップショットを表示します。 コンソール メッセージが記録された場合、コンソール ツールはこれらのメッセージを出力 します 。 [ソース] ツールには、記録中に存在していたスクリプトが表示されます。

拡張トレースは Microsoft Edge でのみインポートできますが、通常のトレースは、Chromium エンジンに基づく他のブラウザーと互換性があります。

既定のトレースの種類を設定する

既定では、 パフォーマンス ツールと メモリ ツールはデータを通常のトレースとしてエクスポートしますが、既定のトレースの種類を に enhanced設定できます。

トレースの種類を変更するには:

1. Ctrl + Shift + I (Windows、Linux) または Command + Option + I (macOS) を押して DevTools を開きます。

2. DevTools の右上にある [ 設定 ] () をクリックします。 [設定] ページが選択された状態で、[設定] が開きます。

3. [基本設定] ページの [永続化] セクションで、[拡張パフォーマンスとメモリ トレースのエクスポート] チェック ボックスをオンにします。

   

4. 拡張トレースには、必要に応じてコンソール メッセージ、スクリプト ソース、DOM 要素を含めることもできます。 拡張トレースに含める内容を制御するには、次のチェック ボックスを使用します。

   • 拡張トレースにコンソール メッセージを含めます。
   • 拡張トレースにスクリプト ソースを含めます。
   • 拡張トレース (試験的) に DOM スナップショットを含めます。

   

パフォーマンス ツールからトレースをエクスポートする

パフォーマンス ツールからパフォーマンス記録をエクスポートするには:

1. パフォーマンス ツールを開きます。

2. [ 記録 ] をクリックし、Web ページと対話してのパフォーマンスを調査するシナリオを実行し、[ 停止] をクリックします。

3. パフォーマンス プロファイルが表示されたら、[ プロファイルの保存 ] ([) をクリックします。

   

4. トレース ファイルをディスクに保存する場所を選択します。

   

   トレースは、既定の .json トレースの種類を標準に設定した場合はファイルであり、既定のトレースの種類を .devtools enhanced に設定した場合はファイルです。

メモリ ツールからトレースをエクスポートする

メモリ ツールからメモリ情報をエクスポートするには:

1. メモリ ツールを開きます。

2. ヒープ スナップショットなど、目的のメモリ記録の種類を選択します。 別のメモリ記録の種類を選択した場合、次の手順は似ています。 さまざまなメモリ記録の種類の詳細については、「メモリの 問題を解決する」を参照してください。

3. [ スナップショットの作成] をクリックします。

4. スナップショットが記録されたら、メモリ ツールサイドバーの [保存] ボタンをクリックします。

   

5. トレース ファイルをディスクに保存する場所を選択します。

   

   トレースは、既定のトレースの種類を .heapsnapshot標準に設定した場合は 、 .heapprofile、または .heaptimeline ファイルで、既定のトレースの種類を .devtools enhanced に設定した場合はファイルです。

エクスポート時にトレースの種類を選択する

トレースは、[拡張 パフォーマンスとメモリ トレースのエクスポート] オプションに応じて、通常のトレースまたは拡張トレースとしてエクスポートされます。 既定のトレースの種類を変更するには、「 既定のトレースの種類を設定する」を参照してください。 エクスポートするときに必要なトレースの種類を選択することもできます。

エクスポート時に別のトレースの種類を選択するには:

1. パフォーマンス ツールの [プロファイルの保存] ([プロファイルの) または [メモリ] ツールの [保存] ボタンを右クリック (または Ctrl キーを押しながらクリック) します。

2. 拡張トレースをエクスポートする場合は 、.devtools (Microsoft Edge の拡張形式) をクリックするか、通常のトレースが必要な場合は [.json]\(Microsoft Edge および Chromium ブラウザーで動作する\) をクリックします。

   

パフォーマンス ツールでトレースをインポートする

パフォーマンス ツールでトレースをインポートするには:

1. パフォーマンス ツールを開きます。

2. [ プロファイルの読み込み ] (。

   

3. ディスク上のトレース ファイルを見つけます。 これは、 .devtools ファイル (拡張トレース用) またはファイル (通常の .json トレースの場合) のいずれかです。

   

4. ファイルを開きます。

   ファイルが拡張トレースの場合は、新しい DevTools ウィンドウが表示され、パフォーマンス プロファイルと記録された追加のランタイム情報が [ソース]、[ コンソール]、および [要素 ]ツールに表示されます。

   ファイルが通常のトレースである場合、パフォーマンス プロファイルは パフォーマンス ツールに表示され、残りの DevTools タブには現在の Web ページに関連する情報が引き続き表示されます。

メモリ ツールでトレースをインポートする

メモリ ツールでトレースをインポートするには:

1. メモリ ツールを開きます。

2. [ 読み込み] をクリックします。

   

3. ディスク上のトレース ファイルを見つけます。 これは、 .devtools ファイル (拡張トレースの場合) または .heapsnapshot、 .heaptimeline、または .heapprofile ファイル (通常のトレースの場合) のいずれかです。

   

4. ファイルを開きます。

   ファイルが拡張トレースの場合は、新しい DevTools ウィンドウが表示され、メモリ情報と記録された追加のランタイム情報が [ソース]、[ コンソール]、および [要素 ]ツールに表示されます。

   ファイルが通常のトレースである場合、メモリ情報は メモリ ツールに表示され、残りの DevTools タブには現在の Web ページに関連する情報が引き続き表示されます。

拡張トレースに関するフィードバックを共有する

拡張トレースは実験的な機能であり、未確定のコードを見ることで、パフォーマンスとメモリの問題の解決に関する共同作業を容易にすることを願います。

Microsoft Edge DevTools チームは、拡張トレースに関するフィードバックを歓迎します。 この新機能を試した場合は、 GitHub リポジトリで問題やアイデアを自由に報告してください。