より多くのデータを使用してメモリ トレースを共有する

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

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

メモリ トレースのエクスポートは、これらのファイルを他のユーザーと共有して問題の調査に役立つ場合に便利です。

ファイル形式

トレース ファイルはいつでも DevTools にインポートできます。 既定では、これらのトレースには、トレースされた Web ページからのランタイム データに関する最小限の情報が含まれています。

エクスポートされたトレースには、基本的な .heapsnapshot、 .heapprofile、または .heaptimeline ファイルを指定できます。

メモリ トレースは、トレースされた Web ページからのより多くのランタイム データを含む、 .devtools ファイルとして保存することもできます。 .devtoolsファイル形式の利点:

• これにより、トレースが記録された環境を再作成し、元のソース ファイルを提供することで、メモリの問題を簡単に解決できます。

• これにより、インポートされたトレースにあるソース コード参照を、 ソース ツールの実際のランタイム コードに確実に解決できます。

• トレースが記録されたときにソース マップが存在していた場合、または Azure Artifacts シンボル サーバーに格納されている場合は、元のソース コードへのコード参照を解決することもできます。

ブラウザーの互換性

• .heapsnapshot、.heapprofile、および.heaptimelineトレース ファイルは、Chromium エンジンに基づく Microsoft Edge やその他のブラウザーと互換性があります。

• .devtools トレースは Microsoft Edge でのみインポートできます。

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

既定では、 メモリ ツールはデータを .heapsnapshot、 .heapprofile、または .heaptimeline トレース ファイルとしてエクスポートします。

既定のトレースの種類を .devtoolsに変更するには:

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

2. DevTools の右上にある [カスタマイズ] を選択 し、DevTools>Settings () を制御します。 [設定] ページが選択された状態で、[設定] が開きます。

3. [基本設定] ページの [永続化] セクションで、[.devtools メモリ トレースのエクスポート] チェック ボックスを使用して、既定の種類を制御します。

   

メモリ トレースのエクスポート オプションを設定する

ファイル .devtools メモリ トレースには、使用可能な場合は常にソース マップが含まれます。必要に応じて、コンソール メッセージ、スクリプト ソース、DOM 要素を含めることができます。

コンソール メッセージ、スクリプト ソース、または DOM 要素をメモリ トレースに含めるかどうかを制御するには、

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

2. DevTools の右上にある [カスタマイズ] を選択 し、DevTools>Settings () を制御します。 [設定] ページが選択された状態で、[設定] が開きます。

3. [ 永続化] セクションまで下にスクロールします。

   

4. 次のチェック ボックスを使用して、含める内容を制御します。

   • .devtools メモリ トレースにコンソール メッセージを含める

   • .devtools メモリ トレースにスクリプト ソースを含める

   • .devtools メモリ トレースに DOM スナップショットを含める (試験的)

5. DevTools の右上にある [ 閉じる ] () ボタンをクリックします。

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

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

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

2. [ヒープ スナップショット] オプション ボタンなど、目的のメモリ記録の種類のオプション ボタンを選択します。

   次の手順は、メモリの 問題を修正するに従って、別のメモリ記録の種類を選択した場合に似ています。

   ヒープの場合は、次のスナップショット。

3. 上部にある [ヒープスナップショットの取得 ] () ボタン、または下部にある [スナップショットの取得] ボタンをクリックします。

   スナップショットが記録され、表示されます。

4. ツール バーで、[プロファイルの保存] ( [プロファイル の) ボタンを選択します。

   

   または、メモリ ツールのサイドバーで、新しいスナップショットのエントリにカーソルを合わせて、[プロファイルの保存] を選択します。

   [ 名前を付けて保存] ダイアログが開きます。

   

5. トレース ファイルをディスクに保存するフォルダーに移動します。

6. [ ファイル名 ] テキスト ボックスで、必要に応じてファイル名を調整します。

7. [ ファイル名 ] テキスト ボックスで、ファイル名の後に指定されている拡張子を保持または変更します。

   • .devtools には、コンソール メッセージ、スクリプト ソース、DOM 要素が含まれます。

   • .heapsnapshot、 .heapprofile、または .heaptimeline では、コンソール メッセージ、スクリプト ソース、および DOM 要素が省略されます。

   最初に表示される拡張機能は、DevTools 設定によって制御されます。上記 の「既定のメモリ トレースの種類を設定する」を参照してください。

8. [ 保存 ] ボタンをクリックします。

   [ 名前を付けて保存] ダイアログが閉じ、ファイルがディスクに保存されます。

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

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

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

   

2. 上部にある [ プロファイルの読み込み ] () ボタンをクリックします。 または、下部にある [ プロファイルの読み込み ] ボタンをクリックします。

   [ 開く ] ダイアログが表示されます。

3. 左下のドロップダウン リスト (フィルター) で、表示するファイルの種類を選択します。

   • **パフォーマンス トレース (.devtools;.json) - パフォーマンス ツールで使用されます。
   • **ヒープ スナップショット (.devtools; .heapsnapshot)
   • **ヒープ タイムライン (.devtools; .heaptimeline)
   • **サンプリングされたヒープ プロファイル (.devtools; .heapprofile)

4. ディスク上のトレース ファイルを見つけて選択します。

   トレース ファイルは、 .devtools ファイル、または .heapsnapshot、 .heaptimeline、または .heapprofile ファイルのいずれかです。

   

5. [ 開く ] ボタンをクリックします。

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

   それ以外の場合、メモリ情報は メモリ ツールに表示され、DevTools タブの残りの部分には現在の Web ページに関連する情報が引き続き表示されます。

関連項目

• パフォーマンス トレースをより多くのデータと共有する
• メモリの問題を修正する
• Azure成果物シンボル サーバー