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

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

このページは、パフォーマンスの分析に関連する 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 でパフォーマンスの記録をキャプチャする方法に関連するより多くの設定を公開します。

[Capture Settings] セクション。

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

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

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

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

JS サンプルが無効になっている場合の記録の例。

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

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 の破棄]

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

リクエストからアイドル状態のコールバックの呼び出しへの矢印。

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

「Initiator for」[概要]タブにリンクがあります

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

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

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

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

    選択した関数またはその子を非表示にするオプションを含むコンテキスト メニュー。

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

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

    非表示の子の数を示すプルダウン ボタンのツールチップ。

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

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

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

[スクリプトを無視] オプションがフォーカスされたコンテキスト メニュー。

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

[設定] の [スクリプトの無視リスト] タブ。

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

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

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

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

高度なフィルタ用の 3 つのボタン。

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

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

[イベントログ] タブでソースファイルにリンクします。

ルート アクティビティ

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

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

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

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

[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] の各チェックボックスを無効にします。 これらのカテゴリのアクティビティを 検出できます

タイミングを表示

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

速度トラックのマーカー。

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

インタラクションを表示

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

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

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

インタラクション トラック。

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

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

INP 警告。

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

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

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

GPU セクション。

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

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

「スレッドプール」内のラスター アクティビティ。

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

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

Frames セクション

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

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

フレームにカーソルを合わせます。

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

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

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

部分的に表示されたフレームにカーソルを合わせます。

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

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

[Summary] タブでのフレームの表示。

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

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

[ネットワーク] トラックで選択されたリクエスト（[概要] タブが開いている）。

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

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

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

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

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

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

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

[概要] タブのリクエスト時間の内訳。

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

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

[Network] パネルのリクエストの [Timing] タブ。

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

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

Paint Profiler を表示

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

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

[Paint Profiler] タブ。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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