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

このページは、パフォーマンスの分析に関連する 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: ガベージ コレクションを強制的に実行します。

録画設定を表示

[キャプチャ設定] をクリックします。 ～ DevTools でパフォーマンスの記録をキャプチャする方法に関連するより多くの設定を公開します。

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

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

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

次のスクリーンショットは、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 の [Performance] タブの横に、ハードウェア同時実行エミュレーションが有効になっていることを知らせる警告アイコン が表示されます。

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

記録を保存する

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

録音を読み込む

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

前の録音を消去

録音の作成後に、[Clear recording] を押します。 [Performance] パネルからその録音を消去します。

演奏録音を分析する

ランタイム パフォーマンスを記録するか読み込みパフォーマンスを記録した後、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 関数呼び出しイベントの詳細が表示されています。

フレームチャートを読む

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   

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

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

   

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

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

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

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

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

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

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

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

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

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

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

ルート アクティビティ

ここでは、[呼び出しツリー] タブで説明されているルート アクティビティのコンセプトについて説明します。 [ボトムアップ] タブと [イベントログ] セクションがあります。

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

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

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

[Call Tree] タブ

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

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

この例では、[Activity] 列の最上位（Event、Paint、および Composite Layers はルート アクティビティです。ネストはコールスタックを表します。イン この例では、Event が Function Call の原因となり、button.addEventListener と b が発生しました。 といった具合です

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

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

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

デフォルトでは、[Grouping] メニューは [No Grouping] に設定されています。[Grouping] メニューを使用して、 基づいて、アクティビティ テーブルを作成します。

[Show Heaviest Stack] をクリックします。 [Activity] テーブルの右側に、別のテーブルを表示します。アクティビティをクリックして [Heaviest Stack] テーブル。[最も多いスタック] テーブルには、選択したインスタンスの 実行するのに最も時間がかかったアクティビティです。

ボトムアップ タブ

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

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

この例のメイン トラックのフレームチャートでは、ほぼすべての wait() への 3 つの呼び出しの実行に費やされた時間。したがって、上位のアクティビティは [ボトムアップ] タブは wait です。フレームチャートでは、 wait の呼び出しは、実際には数千の Minor GC 呼び出しです。ですから、 [ボトムアップ] タブで、次に費用の高いアクティビティは Minor GC です。

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

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

[イベントログ] タブ

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

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

[Start Time] 列は、開始を基準にして、そのアクティビティが開始した時点を表します。 クリックします。この例で選択されているアイテムの 1573.0 ms の開始時間 は、記録開始から 1573 ミリ秒後にアクティビティが開始したことを意味します。

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

[合計時間] 列は、対象のアクティビティまたはそのアクティビティに直接費やされた時間を表します。 子

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

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

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

すべてのフィルタを除外するには、[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] という黄色のスパンが表示されます。

マーカーを選択すると、[Summary] タブに、タイムスタンプ、合計時間、セルフ時間、detail オブジェクトなどの詳細が表示されます。

インタラクションを表示

[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 の推定値を確認できます。1 秒あたりのフレーム数を表示する リアルタイムで確認できます

Frames セクション

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

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

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

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

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

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

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

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

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

[ネットワーク] トラック名の横に、リクエストの種類が色分けされた凡例が表示されます。

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

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

• リクエストの URL と実行にかかった合計時間。
• 優先度または優先度の変更（例: Medium -> High）。
• リクエストが Render blocking かどうか。
• リクエスト時間の内訳については後述します。

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

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

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

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

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

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

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

メモリ指標を表示する

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

[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 軸に沿って移動します
• [回転モード] をクリックします。 して回転 作成できます
• [変換をリセット] をクリックします。 図を元の位置にリセットします

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

Paint Profiler を表示

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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