より多くのデータを使用してパフォーマンス トレースを共有する

パフォーマンス ツールによって記録されたデータは、ディスク上のファイルにエクスポートできます。これには、注釈、リソース コンテンツ (HTML、CSS、JavaScript コンテンツ)、ソース マップを含めることもできます。 エクスポートされたファイルは トレースと呼ばれます。 エクスポートされたトレースは、DevTools でいつでもインポートできる .json ファイルです。

パフォーマンス ツールからトレースをエクスポートするときに、追加のデータを含めるかどうかを選択できます。

• 注釈。
• リソース コンテンツ (HTML、CSS、JavaScript コンテンツなど)。
• スクリプト ソース マップ。

トレース ファイルを圧縮するかどうかを制御することもできます。

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

パフォーマンス トレースのエクスポートは、これらのファイルを他のユーザーと共有する場合に役立ち、問題の調査に役立ちます。

トレースを保存して、注釈、リソース コンテンツ (スクリプトなど)、Web ページからのソース マップを含めることができます。 この追加情報により、インポートされたトレース ファイルの分析、トレースが記録された環境の再作成、および元のソース ファイルの提供が容易になります。

エクスポートされたトレース ファイルは、Chromium エンジンに基づく他のブラウザーと互換性があります。

注釈、リソース コンテンツ (スクリプトなど) またはソース マップを含むトレースが DevTools にインポートされると、新しい DevTools ウィンドウが表示されます。 この新しいウィンドウは、ブラウザーで実行されている Web ページに接続されておらず、代わりに、トレースが最初に記録された環境の一部を再作成します。 この DevTools インスタンスには、 パフォーマンス ツールと ソース ツールのみが含まれています。

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

Web ページの側面のパフォーマンスを記録し、パフォーマンス記録をエクスポートするには:

1. 新しいウィンドウまたはタブで[ To do]\(実行\) などの Web ページを開きます。

2. Web ページを右クリックし、[ 検査] を選択します。

   DevTools が開きます。

3. DevTools で、 パフォーマンス () ツールを開きます。

4. [ レコード ] () ボタンをクリックします。

5. Web ページを操作して、パフォーマンスを調査するシナリオを実行します。

   たとえば、デモ ページの [ タスクの追加 ] テキスト ボックスに「 task 1」と入力し、 Enter キーを押します。

6. [ 停止 ] () ボタンをクリックします。

   パフォーマンス プロファイルが表示されます。

7. [ トレースの保存 ] () ボタンをクリックします。

   [ パフォーマンス トレースの保存] ダイアログが開きます ( パフォーマンス ツール内):

   

8. トレース ファイルに含める情報を制御するには、チェック ボックスをオンまたはオフにします。

   • [ 注釈を含める ] チェック ボックス。 このチェック ボックスは、注釈がある場合にのみ表示されます。

   • [ リソース コンテンツを含める ] チェック ボックス。

   • [ スクリプト ソース マップを含める ] チェック ボックス。 (最初に [ リソース コンテンツを含める ] チェック ボックスをオンにする必要があります)。

   必要に応じて、[ gzip で圧縮 ] チェック ボックスをオフにします。

   これらのチェック ボックスの詳細を以下に示します。

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

   パフォーマンス ツールの小さなダイアログが閉じ、[名前を付けて保存] ダイアログが開きます。

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

    たとえば、Windows の /Downloads/ ディレクトリで、[ 新しいフォルダー ] ボタンをクリックし、 /traces/ ディレクトリを作成して、パフォーマンス トレース ファイルを保存します。

    

11. Trace-20251103T154500.jsonなど、ファイル名を受け入れるか変更します。

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

    C:\Users\localAccount\Downloads\traces\Trace-20251103T154500.jsonなど、パフォーマンス トレース ファイルが保存されます。

注釈を含める

パフォーマンス ツール内の [パフォーマンス トレースの保存] ダイアログの [注釈を含める] チェック ボックスは、パフォーマンス プロファイルに追加された注釈を含めるかどうかを制御します。

注釈は、トレースの特定のセクションに注意を引き、強調表示するのに役立ち、トレースを表示するときに詳細を理解しやすくなります。

関連項目:

• 記録に注釈を付け、パフォーマンス機能リファレンスで共有します。

リソース コンテンツを含める

パフォーマンス ツール内の [パフォーマンス トレースの保存] ダイアログで、[リソース コンテンツを含める] チェック ボックスをオンにすると、エクスポートされたトレース ファイル内の HTML ファイル、CSS ファイル、JavaScript スクリプトの内容が含まれます。 読み込まれたスクリプト (拡張子を除く) はすべてトレース ファイルに保存されます。

その後、トレース ファイルが DevTools にインポートされると、これらのリソースを ソース ツールで表示できます。 ソース ツールは、インポートされたトレースで見つかったソース コード参照を解決して、元のソース コードを表示します。

拡張機能スクリプト

一部のパフォーマンス分析情報では、分析のためにリソース コンテンツ (スクリプトなど) が必要です。 拡張スクリプトには機密情報が含まれている可能性があるため、このチェック ボックスがオンになっている場合でも、拡張スクリプトの内容はトレース ファイルに含まれません。

ただし、拡張スクリプトのプロファイル データはトレース ファイルに保存されたままです。これは、拡張機能スクリプトがパフォーマンスに影響を与える可能性があるためです。

関連項目:

• JavaScript デバッグ機能
• 任意の Web ページで JavaScript のスニペットを実行する
• [スニペット] タブを使用して、ソース ツールの概要の任意の Web ページで JavaScript コード スニペットを実行します。
• [ソース] ツールの [概要] で Microsoft Edge 拡張機能の [コンテンツ スクリプト] タブを使用する。

スクリプト ソース マップを含める

パフォーマンス ツール内の [パフォーマンス トレースの保存] ダイアログで、[スクリプト ソース マップを含める] チェック ボックスをオンにすると、縮小された運用コンテンツ ファイルと元のソース コード ファイルへのマッピングが含まれます。 ソース マップは、DevTools によって元のファイルを読み込み、縮小されたコードを元のコードに置き換えるために使用されます。

結果のトレース ファイルが後で開かれると、 パフォーマンス ツールに元の関数名が表示され、 ソース ツールに元のファイル名が表示されます。 注意: これにより、ソース コードがトレース ファイルの受信者に公開される可能性があります。

一部のパフォーマンス分析情報では、分析のためにソース マップが必要です。 パフォーマンス機能リファレンスの「 実用的な分析情報を取得する 」 を参照してください。

このチェック ボックスを淡色表示ではなく使用できるようにするには、[ リソース コンテンツを含める ] チェック ボックスをオンにする必要があります。これには、トレース ファイルにスクリプト コンテンツが含まれます。

関連項目:

• デバッグのために、処理されたコードを元のソース コードにマップする

gzip で圧縮する

パフォーマンス ツール内の [パフォーマンス トレースの保存] ダイアログで、既定で [gzip で圧縮] チェック ボックスがオンになっています。 このオプションは、大規模なパフォーマンス トレースを圧縮してディスク領域を節約するのに役立ち、DevTools でトレース ファイルのインポートと処理を高速化します。

• このチェック ボックスをオンにすると、既定のファイル名拡張子が .gzされます。
• このチェック ボックスをオフにすると、既定のファイル名拡張子が .jsonされます。

DevTools でパフォーマンス トレース ファイルを開く

DevTools でトレース ファイルを開く (インポート) すると、ブラウザーに新しい特殊な DevTools タブが開き、 パフォーマンス ツールと ソース ツールのみが含まれます。 トレースには、注釈、リソース コンテンツ (スクリプトなど)、ソース マップを含めることができます。 この新しいタブは、ブラウザーで実行されている Web ページに接続されておらず、代わりに、トレースが最初に記録された環境の一部を再作成します。

DevTools で保存されたトレース ファイルを開くには:

1. Microsoft Edge または別のChromium ベースのブラウザーを開きます。

2. Web ページまたは空のタブを右クリックし、[ 検査] を選択します。

   DevTools が開きます。

3. DevTools で、 パフォーマンス () ツールを選択します。

4. [ トレースの読み込み ] () ボタンをクリックします。

   [ 開く ] ダイアログが開きます。

5. C:\Users\localAccount\Downloads\traces\Trace-20251103T154500.json.gzなどの共有トレース ファイルに移動します。

6. zip 形式のファイル Trace-20251103T154500.json.gzなど、ファイルを選択します。

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

   ブラウザーで特別な [DevTools] タブが開き、完全に DevTools が表示され、[ ソース と パフォーマンス ] ツールが開きます。

   

   アドレス バーには、次のような特別な URL が表示されます。

   • devtools://devtools/bundled/trace_app.html
   • devtools://devtools/bundled/rehydrated_devtools_app.html

   これは、ドッキングされていない DevTools ウィンドウではなく、ブラウザーの特別な DevTools 専用タブです。 トレースの分析に役立つその他の関連ツールには、次のような [ その他のツール ] ボタンをクリックするとアクセスできます。

   • 開発者向けリソース
   • クイック ソース
   • レンダリング
   • 検索
   • センサー

関連項目:

• パフォーマンス ツール: Web サイトのパフォーマンスを分析する
• ソース ツールの概要

関連項目

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

ソース ツール:

• ソース ツールの概要
  • [ソース] ツールの [概要] で Microsoft Edge 拡張機能の [コンテンツ スクリプト] タブを使用する。
  • [スニペット] タブを使用して、ソース ツールの概要の任意の Web ページで JavaScript コード スニペットを実行します。
• JavaScript デバッグ機能
• 任意の Web ページで JavaScript のスニペットを実行する
• デバッグのために、処理されたコードを元のソース コードにマップする

パフォーマンス ツール:

• パフォーマンス ツール: Web サイトのパフォーマンスを分析する
• パフォーマンス機能リファレンス
  • 記録に注釈を付け、パフォーマンス機能リファレンスで共有します。
  • パフォーマンス機能リファレンスで実用的な分析情報を取得します。

GitHub:

• デモを実行するには。

Chrome ドキュメント:

• パフォーマンス トレースを保存して共有する