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

このページは、パフォーマンスの分析に関連する Chrome DevTools の機能を網羅したリファレンスです。

Chrome DevTools を使用してページのパフォーマンスを分析する方法についてのガイド付きチュートリアルについては、ランタイム パフォーマンスの分析を開始するをご覧ください。

パフォーマンスを記録

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

ランタイム パフォーマンスの記録

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

1. 分析するページに移動します。
2. DevTools の [Performance] タブをクリックします。

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

   

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

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

読み込みパフォーマンスを記録する

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

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

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

   

DevTools では、アクティビティの大半が発生した記録の部分が自動的にズームインされます。

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

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

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

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

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

ページの記録中に、[Collect garbage] mop をクリックしてガベージ コレクションを強制的に実行します。

録画設定を表示

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

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

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

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

次のスクリーンショットは、JavaScript サンプルの無効化と有効化の違いを示しています。サンプリングを無効にすると、JavaScript コールスタックがすべて省略されるため、記録の Main トラックは大幅に短くなります。

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

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

録画中にネットワークのスロットリングを行う

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

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

記録中に CPU をスロットルする

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

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

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

高度なペイント インストルメンテーションを有効にする

詳細なペイント インストルメンテーションを表示するには:

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

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

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

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

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

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

DevTools の [Performance] タブの横に、ハードウェア同時実行エミュレーションが有効になっていることを知らせる警告アイコン が表示されます。

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

記録を保存する

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

録音を読み込む

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

前の録音を消去

録音の作成後に [Clear recording] を押すと、[Performance] パネルからその録音がクリアされます。

演奏録音を分析する

ランタイム パフォーマンスを記録するか読み込みパフォーマンスを記録すると、[パフォーマンス] パネルには、実行したばかりのパフォーマンスを分析するための大量のデータが表示されます。

録画を操作する

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

録音の一部を選択する

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

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

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

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

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

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

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

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

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

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

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

メイン トラックまたはその近傍の長いフレームチャートをスクロールするには、長押しして、目的のものが表示されるまで任意の方向にドラッグします。

アクティビティを検索

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

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

この例では、下部の検索ボックスに正規表現が表示され、E で始まるアクティビティを探すことができます。

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

• [expand_less 前へ] ボタンまたは [expand_less 次へ] ボタンをクリックします。
• Shift+Enter キーを押して前の項目を選択するか、Enter キーを押して次を選択します。

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

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

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

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

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

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

トラックを移動、非表示にするには：

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

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

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

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

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

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

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

フレームチャートで関数とその子を非表示にする

メインスレッドのフレームチャートを整理するために、選択した関数またはその子を非表示にできます。

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

   • 関数を非表示（H）
   • 子を非表示（C）
   • 繰り返しの子を非表示（R）
   • 子をリセット（U）
   • トレースをリセット

   

   子が非表示になっている関数名の横に、arrow_drop_down プルダウン ボタンが表示されます。

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

   

3. 非表示の子またはフレームチャート全体を含む関数をリセットするには、関数を選択して U キーを押すか、任意の関数を右クリックして [Reset trace] を選択します。

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

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

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

フレームチャートを読む

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

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

[Performance] パネルでは、フレームチャートを分割して読みやすくするために、スクリプトにランダムな色が割り当てられます。上の例では、あるスクリプトからの関数呼び出しが明るい青色になっています。別のスクリプトからの通話は薄いピンク色で示されます。濃い黄色はスクリプト アクティビティ、紫色のイベントはレンダリング アクティビティを表しています。このような濃い黄色と紫色の事象は、すべての録画で一貫しています。

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

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

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

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

イベント イニシエータを追跡する

メイン トラックには、次のイニシエータと、そのイニシエータが引き起こしたイベントを結ぶ矢印が表示されます。

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

矢印を表示するには、フレームチャートでイニシエータまたはそれによって引き起こされたイベントを見つけて選択します。

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

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

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

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

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

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

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

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

ルート アクティビティ

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

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

メイン トラックのフレームチャートでは、ルート アクティビティはチャートの上部に表示されます。[Call Tree] タブと [Event Log] タブでは、ルート アクティビティは最上位の項目です。

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

[Call Tree] タブ

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

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

この例では、[アクティビティ] 列の最上位（Event、Paint、Composite Layers など）がルート アクティビティです。ネストはコールスタックを表します。この例では、Event が Function Call を発生させ、button.addEventListener を発生させ、b を発生させます（以下同様）。

[Self Time]（セルフ時間）は、そのアクティビティに直接費やした時間を表します。[Total Time] は、そのアクティビティまたはその子に費やされた時間を表します。

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

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

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

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

ボトムアップ タブ

[ボトムアップ] タブを使用して、集計時間の中で直接時間が最も長いアクティビティを確認します。

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

この例のメイン トラックのフレームチャートでは、wait() の 3 回の呼び出しにほぼすべての時間が費やされていることがわかります。したがって、[Bottom-Up] タブの一番上のアクティビティは wait です。フレームチャートでは、wait の呼び出しの下にある黄色の部分は、実際には数千の Minor GC 呼び出しです。したがって、[ボトムアップ] タブでは、次に費用の高いアクティビティは Minor GC であることがわかります。

[Self Time] 列は、そのアクティビティ全体にわたって、そのアクティビティで直接費やされた時間の合計を表します。

[Total Time] 列は、そのアクティビティまたはその子アクティビティに費やした時間の合計を表します。

[イベントログ] タブ

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

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

[Start Time] 列は、記録の開始を基準として、アクティビティが開始した時点を表します。この例の選択したアイテムの開始時間が 1573.0 ms の場合、記録の開始から 1,573 ミリ秒後にアクティビティが開始したことを意味します。

[Self Time] 列は、そのアクティビティに直接費やした時間を表します。

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

[Start Time]、[Self Time]、または [Total Time] をクリックして、その列で表を並べ替えます。

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

所要時間が 1 ミリ秒または 15 ミリ秒未満のアクティビティを除外するには、[期間] メニューを使用します。デフォルトでは、[期間] メニューは [すべて] に設定されています。つまり、すべてのアクティビティが表示されます。

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

タイミングを表示

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

• First Paint（FP）
• First Contentful Paint（FCP）
• Largest Contentful Paint（LCP）
• DOMContentLoaded イベント（DCL）
• Onload イベント（L）
• performance.mark() のカスタム呼び出し。下図の「Starting to run JavaScript」というラベルの付いた個々のマークとツールチップ（813.44 ミリ秒）が示されています。
• performance.measure() のカスタム呼び出し。その下に [Slow Interaction] という黄色のスパンが表示されます。

[概要] タブで詳細を確認するには、マーカーを選択します。マーカーのタイムスタンプを確認するには、[タイミング] トラックにカーソルを合わせます。

インタラクションを表示

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

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

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

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

また、[Interactions] トラックでは、[Summary] タブとカーソルを合わせると、ツールチップに 200 ミリ秒を超えるインタラクションに対する [Interaction to Next Paint (INP)] 警告が表示されます。

[Interactions] トラックは、200 ミリ秒以上のインタラクションを、右上に赤い三角形で示します。

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

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

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

[スレッドプール] でラスター アクティビティを確認します。

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

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

• 特定のフレームにかかった時間を確認するには、[フレーム] セクションを使用します。
• FPS メーターを使用すると、ページの実行中にリアルタイムで推定される FPS を確認できます。FPS メーターで 1 秒あたりのフレーム数をリアルタイムで表示するをご覧ください。

Frames セクション

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

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

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

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

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

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

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

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

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

リクエストは次のように色分けされます。

• HTML: 青
• CSS: 紫
• JS: 黄
• 画像: 緑

リクエストをクリックすると、[概要] タブで詳細を確認できます。上の例では、[概要] タブに、選択した Green リクエストに関する情報が表示されています。

リクエストの左上に濃い青色の正方形が表示されている場合、そのリクエストが優先度の高いリクエストであることを示します。薄い青色の正方形は、優先度が低いことを示します。上記の例では、選択されたリクエストの優先度が高く、その上の青いリクエストの優先度が最も高くなります。

[Summary] セクションには、[Initial Priority] と [Final] の [Priority] というフィールドがあります。値が異なる場合、リクエストのフェッチ優先度は記録中に変更されています。詳細については、Fetch Priority API によるリソース読み込みの最適化をご覧ください。

上記の例では、www.google.com のリクエストは、左側の線、中央のバー（暗い部分と明るい部分）、右側の線で表されます。次のスクリーンショットは、[Network] パネルの [Timing] タブに表示された同じリクエストを表しています。これら 2 つの表現の相互対応関係は次のとおりです。

• 左側の行は、イベントの Connection Start グループまでのすべての行です。つまり、Request Sent より前の部分すべてに対して排他的です。
• バーの明るい部分は Request Sent と Waiting (TTFB) です。
• バーの暗い部分は Content Download です。
• 正しい行は、基本的にメインスレッドの待機に費やした時間です。これは [タイミング] タブには表示されません。

次の例は、www.google.com リクエストの線バー表現を示しています。

この例は、www.google.com リクエストの [タイミング] タブを示しています。

メモリ指標を表示する

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

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

この例では、[概要] タブの上にメモリ指標を表示しています。

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

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

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

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

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

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

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

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

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

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

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

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

レイヤ情報を表示

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

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

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

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

図を移動するには:

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

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

Paint Profiler を表示

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

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

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

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

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

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

[Frame render stats] は、ビューポートの右上に表示されるオーバーレイです。ページの実行中に推定される FPS がリアルタイムで提供されます。

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

ペイント フラッシュでペイント イベントをリアルタイムで確認できます

[Paint Flashing] を使用して、ページ上のすべてのペイント イベントをリアルタイムで表示します。

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

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

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

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

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

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

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