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

このページは、パフォーマンスの分析に関連する Chrome DevTools の総合的な機能のリファレンスです。

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

パフォーマンスを記録

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

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

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

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

3. 録音アイコン をクリックします。

   

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

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

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

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

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

3. [Start profiling and load page] をクリックします。DevTools はまず about:blank に移動し、残っているスクリーンショットとトレースをすべてクリアします。その後、ページの再読み込み中に DevTools がパフォーマンス指標を記録し、読み込みが完了してから数秒後に記録を自動的に停止します。

   

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

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

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

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

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

録画中にガベージ コレクションを強制的に実行する

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

録画設定を表示

キャプチャ設定アイコン をクリックすると、DevTools がパフォーマンスの記録をキャプチャする方法に関連するその他の設定が表示されます。

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

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

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

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

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

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

録画中にネットワークを調整する

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

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

録画中に CPU のスロットリングを行う

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

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

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

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

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

1. [Capture settings] メニューを開きます。録画の設定を表示するをご覧ください。
2. [高度なペイント インストルメンテーションを有効にする] チェックボックスをオンにします。

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

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

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

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

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

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

デフォルト値の 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. 選択したズームレベルにジャンプするには、[Timeline Overview] の上部にあるチェーン内で対応するパンくずをクリックします。

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

[Main] トラックまたはその隣接するトラックの長いフレームチャートをスクロールするには、探しているものが表示されるまで、長押ししてから、任意の方向にドラッグします。

アクティビティを検索

[掲載結果] パネルの下部にある検索ボックスを開くには、次のキーを押します。

• macOS: command+F
• Windows、Linux の場合: Ctrl+F

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

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

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

[Performance] パネルには、検索ボックスで選択したアクティビティに関するツールチップが表示されます。

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

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

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

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

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

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

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

フレームチャートを読む

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

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

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

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

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

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

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

イベント開始元を追跡する

[メイン] トラックには、以下の開始元と発生元をつなぐ矢印が表示されます。

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

矢印を確認するには、フレームチャートでイニシエータを見つけてクリックします。

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

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

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

必要な情報をすばやく見つけられるよう、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 などが発生しています。

セルフ時間は、そのアクティビティに直接費やされた時間を表します。合計時間は、そのアクティビティまたはその子で費やされた時間を表します。

[セルフ時間]、[合計時間]、または [アクティビティ] をクリックして、その列で表を並べ替える。

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

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

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

[ボトムアップ] タブ

[Bottom-Up] タブを使用すると、直接最も時間がかかったアクティビティ全体の集計を確認できます。

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

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

[Self Time] 列は、すべてのオカレンスにおいて、そのアクティビティに直接費やされた時間の合計を表します。

合計時間列は、そのアクティビティまたはその子で費やされた合計時間を表します。

[Event Log] タブ

[イベントログ] タブには、記録中に発生した順にアクティビティが表示されます。

[Event Log] タブには、記録の選択部分におけるアクティビティのみが表示されます。部分を選択する方法については、録画の一部を選択するをご覧ください。

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

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

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

[開始時間]、[セルフ時間]、または [合計時間] をクリックして、その列で表を並べ替えます。

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

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

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

タイミングを表示

[速度] トラックには、次のような重要なマーカーが表示されます。

• First Paint（FP）
• First Contentful Paint（FCP）
• Largest Contentful Paint（LCP）
• DOMContentLoaded イベント（DCL）
• オンロード イベント（L）
• カスタムの performance.mark() 呼び出し。以下では、813.44 ミリ秒の時点に Starting to run JavaScript というツールチップを含む個別のマークが表示されています。
• カスタムの performance.measure() 呼び出し。その下に「Slow Interaction」という黄色のスパンが表示されます。

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

インタラクションを表示

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

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

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

この例では、[Interactions] トラックにポインタのインタラクションが表示されます。インタラクションには、処理時間境界における入力と表示の遅延を示すウィスカーがあります。インタラクションにカーソルを合わせると、入力遅延、処理時間、表示遅延のツールチップが表示されます。

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

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

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

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

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

[ラスター] セクションにラスター アクティビティが表示されます。

フレーム/秒（FPS）を分析する

DevTools には、1 秒あたりのフレームを分析するさまざまな方法が用意されています。

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

フレーム セクション

[Frames] セクションでは、特定のフレームにかかった正確な時間を確認できます。

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

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

[フレーム] セクションには、次の 4 種類のフレームが表示されます。

1. アイドル状態のフレーム（白）。変更なし。
2. フレーム（緑）:想定どおりに、時間内にレンダリングされている。
3. 一部表示されたフレーム（黄色のまばらな破線パターン）:Chrome では、少なくともいくつかのビジュアル アップデートを時間内にレンダリングするために最善を尽くしました。たとえば、レンダラ プロセスのメインスレッド（キャンバス アニメーション）の処理は遅延しているものの、コンポジタ スレッド（スクロール）は時間内に処理している場合などです。
4. ドロップしたフレーム（濃い実線パターンと赤色）:Chrome で相応の時間内にフレームをレンダリングできません。

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

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

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

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

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

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

リクエストをクリックすると、その詳細が [概要] タブに表示されます。前述の例では、[Summary] タブに、選択した緑色のリクエストに関する情報が表示されています。

リクエストの左上に表示されている濃い青色の四角は、優先度が高いリクエストであることを意味します。薄い青色の四角は優先度が低いことを意味します。前述の例では、選択されたリクエストの優先度が高く、上の青のリクエストの優先度が最も高いものです。

[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 リクエストの [Timing] タブの表現を示しています。

メモリ指標を表示する

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

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

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

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

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

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

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

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

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

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

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

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

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

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

この例では、[概要] タブでサムネイルをクリックすると拡大されたスクリーンショットが表示されます。

レイヤ情報を表示する

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

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

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

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

図を移動するには:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

レイヤ境界線を使ってレイヤのオーバーレイを表示する

[レイヤの枠線] を使用すると、レイヤの境界線とタイルをページの上に重ねて表示できます。

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

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

[スクロールのパフォーマンスに関する問題] を使用して、ページのパフォーマンスを低下させる可能性のあるスクロールに関連するイベント リスナーがあるページの要素を特定します。DevTools では、問題となる可能性のある要素が青緑色で概説されます。

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