パフォーマンス機能のリファレンス

このページでは、パフォーマンスの分析に関連する Chrome DevTools の機能について、包括的なリファレンスを提供します。

Chrome DevTools を使用してページのパフォーマンスを分析する方法については、ランタイム パフォーマンスを分析するをご覧ください。

パフォーマンスを記録

ランタイムまたは読み込みのパフォーマンスを記録できます。

ランタイム パフォーマンスを記録する

ランタイム パフォーマンスを記録するのは、ページの読み込みではなく、実行中のパフォーマンスを分析する場合です。

1. 分析するページに移動します。
2. DevTools の [パフォーマンス] タブをクリックします。

3. [Record] をクリックします。

   

4. ページを操作する。DevTools では、操作の結果として発生したページ アクティビティがすべて記録されます。

5. もう一度 [録画] をクリックするか、[停止] をクリックして録画を停止します。

負荷のパフォーマンスを記録する

実行ではなく読み込み中のページのパフォーマンスを分析する場合は、読み込みパフォーマンスを記録します。

1. 分析するページに移動します。
2. DevTools の [パフォーマンス] パネルを開きます。

3. [プロファイリングを開始してページを再読み込み] をクリックします。DevTools はまず about:blank に移動して、残りのスクリーンショットとトレースをすべて消去します。その後、ページの再読み込み中に DevTools がパフォーマンス指標を記録し、読み込みが完了してから数秒後に記録を自動的に停止します。

   

アクティビティのほとんどが発生した部分が自動的に拡大されます。

この例では、ページの読み込み中のアクティビティが [パフォーマンス] パネルに表示されます。

録画中にスクリーンショットをキャプチャする

[スクリーンショット] チェックボックスをオンにすると、録画中にすべてのフレームのスクリーンショットをキャプチャできます。

スクリーンショットを操作する方法については、スクリーンショットを表示するをご覧ください。

記録中にガベージ コレクションを強制する

ページを録画しているときに、[ガベージ コレクション] mop をクリックして、ガベージ コレクションを強制します。

録画設定を表示

[Capture settings] をクリックすると、DevTools がパフォーマンス レコーディングをキャプチャする方法に関連するその他の設定が表示されます。

JavaScript のサンプルを無効にする

デフォルトでは、録画の [Main] トラックには、録画中に呼び出された JavaScript 関数の詳細なコールスタックが表示されます。これらのコールスタックを無効にするには:

1. [キャプチャ設定] メニューを開きます。録画設定を表示するをご覧ください。
2. [JavaScript サンプルを無効にする] チェックボックスをオンにします。
3. ページの録画を作成します。

次のスクリーンショットは、JavaScript サンプルを無効にした場合と有効にした場合の違いを示しています。サンプリングが無効になっている場合、録画のメイン トラックは JavaScript 呼び出しスタックがすべて省略されるため、大幅に短くなります。

この例は、JS サンプルが無効になっている録画を示しています。

次の例は、有効にした JS サンプルを使用した記録を示しています。

録画中にネットワークをスロットルする

録画中にネットワークをスロットリングするには:

1. [キャプチャ設定] メニューを開きます。録画設定を表示するをご覧ください。
2. [ネットワーク] を選択したスロットリング レベルに設定します。

録画中の CPU の制御

記録中に CPU をスロットリングするには:

1. [キャプチャ設定] メニューを開きます。録画設定を表示するをご覧ください。
2. [CPU] を選択したスロットリング レベルに設定します。

スロットリングは、パソコンの能力に比例したものになります。たとえば、2 倍の速度低下のオプションでは、CPU の動作が通常の 2 倍遅くなります。モバイル デバイスのアーキテクチャはデスクトップやノートパソコンと大きく異なるため、DevTools でモバイル デバイスの CPU を正確にシミュレートすることはできません。

CSS セレクタの統計データを有効にする

長時間実行される Recalculate Style イベント中に CSS ルールセレクタの統計情報を表示するには:

1. [キャプチャ設定] メニューを開きます。録画設定を表示するをご覧ください。
2. [CSS セレクタの統計データを有効にする] チェックボックスをオンにします。

詳しくは、スタイル イベントの再計算時に CSS セレクタのパフォーマンスを分析する方法をご覧ください。

高度な描画パフォーマンスの計測を有効にする

ペイント計測の詳細を表示するには:

1. [キャプチャ設定] メニューを開きます。録画設定を表示するをご覧ください。
2. [Enable advanced paint instrumentation] チェックボックスをオンにします。

ペイント情報を操作する方法については、レイヤを表示するとペイント プロファイラを表示するをご覧ください。

ハードウェアの並行処理をエミュレートする

さまざまなプロセッサコア数でアプリケーションのパフォーマンスをテストするには、navigator.hardwareConcurrency プロパティでレポートされる値を構成します。一部のアプリケーションでは、このプロパティを使用して、アプリケーションの並列処理の度合いを制御します（Emscripten pthread プールのサイズを制御する場合など）。

ハードウェアの同時実行をエミュレートするには:

1. [キャプチャ設定] メニューを開きます。録画設定を表示するをご覧ください。
2. [ハードウェアの同時実行] をオンにして、入力ボックスにコア数を設定します。

DevTools では、ハードウェア同時実行エミュレーションが有効であることを示すために、[パフォーマンス] タブの横に警告アイコン が表示されます。

デフォルト値の 10 に戻すには、[元に戻す] ボタンをクリックします。

記録を保存する

記録を保存するには、右クリックして [Save Profile] を選択します。

録音を読み込む

録音を読み込むには、右クリックして [Load Profile] を選択します。

前の録音を消去

録音を行った後、[録音を消去] を押して、[パフォーマンス] パネルからその録音を消去します。

パフォーマンスの録画を分析する

ランタイム パフォーマンスを記録または負荷パフォーマンスを記録すると、[パフォーマンス] パネルに、直近のパフォーマンスを分析するための大量のデータが表示されます。

録画を操作する

録画のパフォーマンスを詳しく調べるには、録画の一部を選択したり、長いフレームチャートをスクロールしたり、ズームイン / ズームアウトしたり、パンくずリストを使用してズームレベル間を移動したりできます。

録音の一部を選択する

[パフォーマンス] パネルのアクションバーの下、記録の上部には、[タイムラインの概要] セクションがあり、CPU グラフと NET グラフが表示されます。

記録の一部を選択するには、[タイムラインの概要] を長押しして左右にドラッグします。

キーボードを使用して一部を選択するには:

1. メイン トラックまたはその近傍のトラックをフォーカスします。
2. W、A、S、D キーを使用して、それぞれ拡大、左移動、縮小、右移動できます。

トラックパッドを使用して一部を選択するには:

1. [タイムラインの概要] セクションまたはいずれかのトラック（メインとその隣接するトラック）にカーソルを合わせます。
2. 2 本の指で上にスワイプすると縮小、左にスワイプすると左に、下にスワイプすると拡大、右にスワイプすると右にスワイプします。

パンくずリストを作成し、ズームレベル間を移動します

タイムラインの概要では、複数のネストされたパンくずリストを連続して作成し、ズームレベルを上げて、ズームレベル間を自由に移動できます。

パンくずリストを作成して使用するには:

1. [タイムラインの概要] で、記録の一部を選択します。
2. 選択範囲にカーソルを合わせ、[N ms] zoom_in ボタンをクリックします。選択した内容が拡大され、[タイムラインの概要] に表示されます。タイムラインの概要の上部に、パンくずリストのチェーンが作成されます。
3. 前の 2 つのステップを繰り返して、別のネストされたパンくずリストを作成します。選択範囲が 5 ミリ秒以上であれば、引き続きパンくずリストをネストできます。
4. 選択したズームレベルに移動するには、[タイムラインの概要] の上部にあるチェーン内の対応するパンくずリストをクリックします。

パンくずリストの子を削除するには、親パンくずリストを右クリックして [子パンくずリストを削除] を選択します。

長いフレームチャートをスクロールする

Main トラックまたはその隣接トラック内の長い炎グラフをスクロールするには、クリックしたまま、目的の部分が表示されるまで任意の方向にドラッグします。

アクティビティを検索

[Main] トラックのアクティビティと [Network] トラックのリクエストを検索できます。

[パフォーマンス] パネルの下部にある検索ボックスを開くには、次のキーを押します。

• macOS: Command+F
• Windows、Linux: Ctrl+F

この例では、下部にある検索ボックスに、E で始まるアクティビティを検索する正規表現を入力しています。

クエリに一致するアクティビティを切り替えるには:

• [expand_less 前へ] ボタンまたは [expand_more 次へ] ボタンをクリックします。
• 前を選択するには Shift+Enter キーを押します。次を選択するには Enter キーを押します。

[パフォーマンス] パネルには、検索ボックスで選択したアクティビティの上にツールチップが表示されます。

クエリ設定を変更するには:

• [match_case] [Match case] をクリックして、クエリで大文字と小文字を区別します。
• クエリで正規表現を使用するには、[regular_expression] [正規表現] をクリックします。

検索ボックスを非表示にするには、[キャンセル] をクリックします。

トラックの順序を変更する、非表示にする

パフォーマンス トレースを整理するには、トラックの順序を変更し、トラック構成モードで関連性のないトラックを非表示にします。

トラックを移動、非表示にする手順は次のとおりです。

1. 構成モードに入るには、トラック名を右クリックして [トラックを構成] を選択します。
2. トラックを上下に移動するには、arrow_upward 上または arrow_downward をクリックします。[visibility_off] をクリックして非表示にします。
3. 設定が完了したら、下部にある [トラックの設定を終了] をクリックして、設定モードを終了します。

このワークフローの実際の動作を確認するには、動画をご覧ください。

[パフォーマンス] パネルには、新しいトレースのトラック構成が保存されますが、次の DevTools セッションには保存されません。

メインスレッドのアクティビティを表示する

ページのメインスレッドで発生したアクティビティを表示するには、メイン トラックを使用します。

イベントをクリックすると、[概要] タブにイベントの詳細が表示されます。[パフォーマンス] パネルに、選択したイベントの概要が青色で表示されます。

この例では、[概要] タブに get 関数呼び出しイベントの詳細が表示されています。

フレームグラフを読む

[Performance] パネルは、フレームチャートでメインスレッドのアクティビティを表します。X 軸は時間の経過に伴う記録数を表します。y 軸はコールスタックを表します。上のイベントにより、以下のイベントが発生します。

次の例は、メイントラックのフレームチャートを示しています。click イベントによって匿名関数呼び出しが発生しました。次に、この関数は onEndpointClick_ と呼ばれ、handleClick_ というように呼び出されます。

[パフォーマンス] パネルでは、スクリプトにランダムな色が割り当てられ、炎グラフが分割されて読みやすくなります。上の例では、あるスクリプトからの関数呼び出しが明るい青色になっています。別のスクリプトからの呼び出しは薄いピンク色で表示されます。濃い黄色はスクリプト アクティビティを表し、紫色のイベントはレンダリング アクティビティを表します。黄色と紫の濃いイベントは、すべての録画で同じです。

時間のかかるタスクも赤色の三角形でハイライト表示され、50 ミリ秒を超える部分は赤色で示されます。

この例では、タスクに 400 ミリ秒以上かかったため、最後の 350 ミリ秒を表す部分が赤色で塗りつぶされていますが、最初の 50 ミリ秒は塗りつぶされていません。

また、メイン トラックには、profile() および profileEnd() コンソール関数で開始および停止した CPU プロファイルに関する情報が表示されます。

JavaScript 呼び出しの詳細な炎グラフを非表示にするには、JavaScript のサンプルを無効にするをご覧ください。JS サンプルが無効になっている場合、Event (click) や Function Call などの上位レベルのイベントのみが表示されます。

イベントの開始元をトラッキングする

[Main] トラックには、次の開始条件と、それによって発生したイベントを結ぶ矢印を表示できます。

• スタイルまたはレイアウトの無効化 -> [スタイルを再計算] または [レイアウト]
• [リクエスト アニメーション フレーム] -> [アニメーション フレームの呼び出し]
• [Request Idle Callback]（アイドル状態のコールバックをリクエスト）-> [Fire Idle Callback（アイドル状態のコールバックをリクエスト）]
• [タイマーをインストール] -> [タイマーの呼び出し]
• WebSocket の作成 -> [送信...]、[WebSocket handshake の受信]、または [WebSocket の破棄]

矢印を表示するには、炎グラフで開始元またはそれが引き起こしたイベントを見つけて選択します。

選択した場合、[概要] タブに、イニシエータの [イニシエータ] リンクと、そのイニシエータの [開始者] リンクが表示されます。クリックすると、対応するイベント間を移動できます。

フレームグラフで関数とその子を非表示にする

[Main] スレッドのフレームグラフを整理するには、選択した関数またはその子を非表示にします。

1. メイン トラックで関数を右クリックし、次のいずれかのオプションを選択するか、対応するショートカットを押します。

   • 関数を非表示にする（H）
   • 子を非表示（C）
   • 繰り返しの子を非表示（R）
   • 子をリセット（U）
   • トレースをリセット（T）
   • 無視リストにスクリプトを追加（I）

   

   非表示の子を持つ関数名の横に、arrow_drop_down プルダウン ボタンが表示されます。

2. 非表示の子の数を確認するには、arrow_drop_down プルダウン ボタンにカーソルを合わせます。

   

3. 非表示の子を持つ関数またはフレームグラフ全体をリセットするには、関数を選択して U キーを押すか、任意の関数を右クリックして [トレースのリセット] を選択します。

フレームチャート内のスクリプトを無視する

無視リストにスクリプトを追加するには、グラフ内のスクリプトを右クリックし、[無視リストにスクリプトを追加] を選択します。

無視したスクリプトがグラフで折りたたまれ、[無視リスト上] としてマークされ、設定の [設定] > [無視リスト] の [カスタム除外] ルールに追加されます。無視されたスクリプトは、トレースまたはカスタム除外ルールから削除されるまで保存されます。

テーブルのアクティビティを表示する

ページを記録した後、アクティビティを分析するためにメイン トラックにのみ依存する必要はありません。DevTools には、アクティビティを分析するための 3 つの表形式のビューも用意されています。各ビューでは、アクティビティに関する異なる視点が提供されます。

• 最も多くの処理を発生させるルート アクティビティを表示するには、[呼び出しツリー] タブを使用します。
• 最も多くの時間が直接費やされたアクティビティを表示するには、[ボトムアップ] タブを使用します。
• 記録中に発生した順番にアクティビティを表示するには、[イベントログ] タブを使用します。

3 つのタブの [フィルタ] バーの横には、目的のフィルタをすばやく見つけることができます。

• match_case: 大文字と小文字の区別。
• regular_expression 正規表現。
• match_word 完全に一致する単語を照合します。

[パフォーマンス] パネルの各表形式ビューには、関数呼び出しなどのアクティビティのリンクが表示されます。デバッグに役立つように、DevTools はソースファイル内の対応する関数宣言を見つけます。また、適切なソースマップが存在し、有効になっている場合、DevTools は元のファイルを自動的に検出します。

リンクをクリックして、[ソース] パネルでソースファイルを開きます。

ルート アクティビティ

ここでは、[Call Tree] タブ、[Bottom-Up] タブ、[イベントログ] セクションで説明されているルート アクティビティのコンセプトについて説明します。

ルート アクティビティは、ブラウザになんらかの処理を実行させるアクティビティです。たとえば、ページをクリックすると、ブラウザは Event アクティビティをルート アクティビティとして起動します。その Event により、ハンドラが実行される可能性があります。

メイン トラックのフレームチャートでは、ルート アクティビティはチャートの上部に表示されます。[呼び出しツリー] タブと [イベントログ] タブでは、ルート アクティビティが最上位の項目です。

ルート アクティビティの例については、[Call Tree] タブをご覧ください。

[Call Tree] タブ

[Call Tree] タブを使用して、最も多くの処理を発生させているルート アクティビティを確認します。

[Call Tree] タブには、録音で選択した部分のアクティビティのみが表示されます。部分の選択方法については、録音の一部を選択するをご覧ください。

この例では、[アクティビティ] 列の最上位（Event、Paint、Composite Layers など）がルート アクティビティです。ネストはコールスタックを表します。この例では、Event が Function Call を引き起こし、Function Call が button.addEventListener を引き起こし、button.addEventListener が b を引き起こしました。

[Self Time]（セルフ時間）は、そのアクティビティに直接費やした時間を表します。[合計時間] には、そのアクティビティまたはその子のいずれかで費やされた時間が示されます。

[Self Time]、[Total Time]、[Activity] のいずれかをクリックすると、その列で表を並べ替えることができます。

[フィルタ] ボックスを使用して、アクティビティ名でイベントをフィルタします。

デフォルトでは、[Grouping] メニューは [No Grouping] に設定されています。[グループ化] メニューを使用して、さまざまな条件に基づいてアクティビティ テーブルを並べ替えることができます。

[最も負荷の高いスタックを表示] をクリックすると、[アクティビティ] テーブルの右側に別のテーブルが表示されます。アクティビティをクリックして、[Heaviest Stack] テーブルにデータを入力します。[Heaviest Stack] テーブルには、選択したアクティビティの子のうち、実行に最も時間がかかったものが表示されます。

ボトムアップ タブ

[Bottom-Up] タブを使用すると、直接時間のかかるアクティビティを合計で確認できます。

[ボトムアップ] タブには、録画で選択した部分のアクティビティのみが表示されます。部分を選択する方法については、録画の一部を選択するをご覧ください。

この例の [Main] トラックの炎グラフでは、ほとんどの時間が wait() への 3 回の呼び出しの実行に費やされていることがわかります。したがって、[ボトムアップ] タブの上位アクティビティは wait です。フレームグラフでは、wait の呼び出しの下の黄色は、実際には数千の Minor GC 呼び出しです。したがって、[ボトムアップ] タブでは、次に費用の高いアクティビティは Minor GC であることがわかります。

[自己時間] 列には、そのアクティビティで直接費やされた時間の合計（すべての発生回数にわたる合計）が表示されます。

[合計時間] 列には、そのアクティビティまたはその子のいずれかで費やされた合計時間が示されます。

[イベントログ] タブ

[イベントログ] タブを使用すると、録画中に発生したアクティビティを発生順に表示できます。

[イベントログ] タブには、選択した録音部分のアクティビティのみが表示されます。部分の選択方法については、録音の一部を選択するをご覧ください。

[開始時間] 列は、そのアクティビティが開始された時点を、録画の開始時点を基準に示します。この例で選択した項目の開始時間 1573.0 ms は、録画開始から 1,573 ms 後にアクティビティが開始されたことを意味します。

[自己時間] 列には、そのアクティビティに直接費やされた時間が示されます。

[Total Time] 列は、そのアクティビティまたはそのいずれかの子で直接費やした時間を表します。

[開始時間]、[自己時間]、[合計時間] をクリックして、その列でテーブルを並べ替えます。

[フィルタ] ボックスを使用して、アクティビティを名前でフィルタします。

[Duration] メニューを使用して、1 ms 未満または 15 ms 未満のアクティビティを除外します。デフォルトでは、[Duration] メニューは [All] に設定されています。つまり、すべてのアクティビティが表示されます。

[Loading]、[Scripting]、[Rendering]、[Painting] のチェックボックスをオフにして、これらのカテゴリのすべてのアクティビティを除外します。

タイミングを表示する

タイミング トラックには、次のような重要なマーカーが表示されます。

• First Paint（FP）
• First Contentful Paint（FCP）
• Largest Contentful Paint（LCP）
• DOMContentLoaded イベント（DCL）
• Onload イベント（L）
• performance.mark() のカスタム呼び出し。813.44 ms の個々のマークにツールチップが表示されています。このマークには「JavaScript の実行開始」というラベルが付いています。
• performance.measure() のカスタム呼び出し。下に黄色のスパンが表示され、[操作が遅い] というラベルが付いています。

マーカーを選択すると、[Summary] タブに、タイムスタンプ、合計時間、セルフ時間、detail オブジェクトなどの詳細が表示されます。performance.mark() 呼び出しと performance.measure() 呼び出しの場合、タブにはスタック トレースも表示されます。

インタラクションを表示

[Interactions] トラックでユーザーの操作を確認して、応答性に関する潜在的な問題を追跡します。

インタラクションを表示するには:

1. DevTools を開きます。たとえば、このデモページで開きます。
2. [パフォーマンス] パネルを開き、録画を開始します。
3. 要素（コーヒー）をクリックして録画を停止します。
4. タイムラインで [Interactions] トラックを見つけます。

この例では、[インタラクション] トラックに [ポインタ] インタラクションが表示されています。インタラクションには、処理時間の境界での入力とプレゼンテーションの遅延を示すひげが表示されます。インタラクションにカーソルを合わせると、入力遅延、処理時間、表示遅延を示すツールチップが表示されます。

[インタラクション] トラックには、200 ミリ秒を超えるインタラクションの [Interaction to Next Paint（INP）] 警告も、[概要] タブとホバー時のツールチップに表示されます。

[インタラクション] トラックでは、200 ミリ秒を超えるインタラクションが右上に赤い三角形でマークされます。

GPU アクティビティを表示する

[GPU] セクションで GPU アクティビティを表示します。

ラスター アクティビティを表示する

[Thread Pool] セクションでラスター アクティビティを確認します。

フレーム/秒（FPS）の分析

DevTools では、さまざまな方法で 1 秒あたりのフレームを分析することができます。

• [フレーム] セクションを使用して、特定のフレームの所要時間を表示します。
• FPS メーターを使用すると、ページの実行中の FPS をリアルタイムで推定できます。FPS メーターを使用してフレーム/秒をリアルタイムで表示するをご覧ください。

[Frames] セクション

[Frames] セクションでは、特定のフレームにかかった正確な時間が表示されます。

フレームにカーソルを合わせると、そのフレームに関する詳細情報を含むツールチップが表示されます。

この例では、フレームにカーソルを合わせると、ツールチップが表示されます。

[Frames] セクションには、次の 4 種類のフレームを表示できます。

1. アイドル状態のフレーム（白）:変更なし
2. フレーム（緑）:想定どおりに、時間内にレンダリングされる。
3. 部分的に表示されたフレーム（黄色、まばらに広い破線の模様）。Chrome は、少なくとも一部の視覚的な更新を時間内にレンダリングするために最善を尽くしました。たとえば、レンダラ プロセスのメインスレッドの処理（キャンバス アニメーション）が遅れているが、コンポジタ スレッド（スクロール）は間に合っている場合などです。
4. フレーム落ち（赤色の太い実線パターン）。Chrome がフレームを妥当な時間内にレンダリングできない。

この例では、部分的に表示されたフレームにカーソルを合わせるとツールチップが表示されます。

フレームをクリックすると、[概要] タブにフレームの詳細が表示されます。DevTools では、選択したフレームの輪郭が青色で示されます。

ネットワーク リクエストを表示する

[ネットワーク] セクションを開くと、パフォーマンスの記録中に発生したネットワーク リクエストのウォーターフォールが表示されます。

[ネットワーク] トラック名の横には、リクエスト タイプが色分けされた凡例があります。

レンダリングをブロックするリクエストには、右上に赤い三角形が表示されます。

リクエストにカーソルを合わせると、次の情報が表示されるツールチップが表示されます。

• リクエストの URL と実行にかかった合計時間。
• 優先度または優先度の変更（Medium -> High など）。
• リクエストが Render blocking かどうか。
• リクエストのタイミングの内訳（後述）。

リクエストをクリックすると、ネットワーク トラックにより、そのイニシエータからリクエストに向けて矢印が描画されます。

また、[パフォーマンス] パネルの [概要] タブには、リクエストに関する詳細情報が表示されます。表示される情報には、初期優先度や（最終的な）優先度のフィールドなどがありますが、これらに限定されません。値が異なる場合、リクエストのフェッチ優先度は記録中に変更されています。詳細については、Fetch Priority API によるリソース読み込みの最適化をご覧ください。

[概要] タブには、リクエストのタイミングの内訳も表示されます。

www.google.com のリクエストは、左側の線（|–）、中央の暗い部分と明るい部分のあるバー、右側の線（–|）で表されます。

タイミングの詳細は [ネットワーク] タブで確認できます。[ネットワーク] トラック内のリクエストまたは [概要] タブ内のその URL を右クリックし、[ネットワーク パネルに表示] をクリックします。DevTools の [ネットワーク] パネルに移動し、対応するリクエストを選択します。[タイミング] タブを開きます。

これらの 2 つの内訳は次のように対応しています。

• 左側の行（|–）は、イベントの Connection start グループまでのすべての行です。つまり、Request Sent より前の部分です。
• バーの明るい部分は Request sent と Waiting for server response です。
• バーの暗い部分は Content download です。
• 右の行（–|）は、メインスレッドの待機時間です。[Network] > [Timing] タブには表示されません。

メモリ指標を表示する

[メモリ] チェックボックスをオンにすると、前回の記録のメモリ指標が表示されます。

[Summary] タブの上に、新しい [Memory] グラフが表示されます。[NET] グラフの下に、[HEAP] という新しいグラフもあります。[HEAP] グラフには、[メモリ] グラフの [JS ヒープ] 線と同じ情報が表示されます。

この例では、[Summary] タブの上にメモリ指標が表示されています。

グラフ上の色付きの線は、グラフの上部にある色付きのチェックボックスに対応しています。チェックボックスをオフにすると、そのカテゴリがグラフから非表示になります。

グラフには、選択した録音の領域のみが表示されます。前述の例の [メモリ] グラフには、記録開始のメモリ使用量（1,000 ミリ秒前後まで）のみが表示されます。

録音の一部の長さを表示する

[ネットワーク] や [メイン] などのセクションを分析するときに、特定のイベントに要した時間をより正確に推定しなければならない場合があります。Shift キーを押しながら、左または右にドラッグして、録画の一部を選択します。選択内容の下部に、その分の所要時間が表示されます。

この例では、選択した部分の下部にある 488.53ms タイムスタンプが、その部分に要した時間を示しています。

スクリーンショットを表示する

スクリーンショットを有効にする方法については、録画中にスクリーンショットをキャプチャするをご覧ください。

[タイムラインの概要] にカーソルを合わせると、その時点でのページのスクリーンショットが表示されます。[タイムラインの概要] セクションには、[CPU]、[FPS]、[NET] のグラフが表示されます。

[フレーム] でフレームをクリックしてスクリーンショットを表示することもできます。DevTools の [概要] タブに、スクリーンショットの小さいバージョンが表示されます。

この例は、[フレーム] セクションで 195.5ms フレームをクリックしたとき、[概要] タブに表示される 195.5ms フレームのスクリーンショットです。

[概要] タブのサムネイルをクリックして、スクリーンショットを拡大します。

この例では、[概要] タブでサムネイルをクリックしたときのスクリーンショットをズームインしています。

レイヤ情報を表示する

フレームに関する高度なレイヤ情報を表示するには:

1. 高度なペイント インストルメンテーションを有効にする。
2. [フレーム] セクションでフレームを選択します。DevTools では、レイヤに関する情報が新しい [レイヤ] タブ（[イベントログ] タブの横）に表示されます。

レイヤにカーソルを合わせると、図でハイライト表示されます。

この例では、レイヤ #39 にカーソルを合わせると、そのレイヤがハイライト表示されています。

図を移動するには:

• [パンモード] をクリックして、X 軸と Y 軸に沿って移動します。
• 回転モード をクリックして、Z 軸に沿って回転します。
• [Reset Transform] をクリックして、図を元の位置にリセットします。

レイヤ分析の実例をご覧ください。

ペイント プロファイラを表示する

ペイント イベントの詳細情報を表示するには:

1. 高度なペイント インストルメンテーションを有効にする。
2. [Main] トラックで [Paint] イベントを選択します。

[レンダリング] タブでレンダリングのパフォーマンスを分析する

[レンダリング] タブの機能を使用して、ページのレンダリング パフォーマンスを可視化します。

[レンダリング] タブを開きます。

FPS メーターで 1 秒あたりのフレーム数をリアルタイムで確認

フレーム レンダリングの統計情報は、ビューポートの右上に表示されるオーバーレイです。ページの実行中に FPS のリアルタイム推定値を提供します。

フレーム レンダリングの統計情報をご覧ください。

ペイント フラッシュでペイント イベントをリアルタイムで表示する

ペイント フラッシュを使用すると、ページ上のすべてのペイント イベントをリアルタイムで確認できます。

ペイントのフラッシュをご覧ください。

レイヤの枠線でレイヤのオーバーレイを表示する

[Layer Borders] を使用して、レイヤの枠線とタイルのオーバーレイをページ上に表示します。

レイヤの枠線をご覧ください。

スクロールのパフォーマンスの問題をリアルタイムで検出する

[スクロールのパフォーマンスの問題] を使用して、スクロールに関連するイベント リスナーがあり、ページのパフォーマンスに悪影響を与える可能性があるページの要素を特定します。DevTools では、問題の可能性がある要素が青緑色で囲まれます。

スクロールのパフォーマンスに関する問題をご覧ください。