[レイヤ] パネル: ウェブサイトのレイヤを探索する

Dale St. Marthe
Dale St. Marthe
LinkedIn

[レイヤ] パネルでは、ウェブサイトの構成とブラウザがコンテンツをレンダリングする方法を確認できます。ウェブサイトの 3D 図を分析して、レンダリングの問題を特定し、スクロール バグを修正し、アニメーションを最適化します。

概要

[レイヤ] パネルを使用して、次の操作を行います。

  • ドキュメントのレイヤを表示します。
  • ドキュメントレイヤを検査する。
  • DOM 変更ブレークポイントを設定する。
  • ペイント プロファイラ情報を表示する。
  • スクロールが遅い要素を特定します。

[レイヤ] パネルを開く

[レイヤ] パネルを開く手順は次のとおりです。

  1. DevTools を開きます。
  2. 次のキーを押してコマンド メニューを開きます。
    • macOS: Command+Shift+P
    • Windows、Linux、ChromeOS: Ctrl+Shift+P コマンド メニュー（
  3. 「Layers」と入力し、[レイヤパネルを表示] を選択して Enter キーを押します。

または、右上のmore_vert [その他のオプション] > [その他のツール] > [レイヤパネル] を選択します。

また、[パフォーマンス] パネルの [レイヤ] タブでは、録画の各フレームのレイヤを確認できます。詳細については、レイヤ情報を表示するをご覧ください。

ドキュメントのレイヤを表示する

[レイヤ] パネルの左端のセクションには、ドキュメントのレンダリング済みレイヤがすべて、展開可能なツリーに表示されます。このツリーは、ページを移動するたびに更新されます。レイヤは、CSS セレクタまたは数値（その後にレイヤのサイズがピクセル単位で続く）で識別されます。

レイヤツリー。

レイヤにカーソルを合わせると、ウェブページと図でハイライト表示されます。ページに、次の情報が表示されたツールチップが表示されます。

  • レイヤのセレクタ。
  • レイヤのサイズ（ピクセル単位）。
  • 必要に応じて、CSS グリッドまたはフレックスを表すアイコン。

web.dev バナーのツールチップ。

ドキュメントのレイヤを検査する

レイヤをクリックすると、[詳細] ペインに詳細が表示されます。

[詳細] タブ。

レイヤに応じて、次の情報が表示されます。

  • サイズ
  • 合成理由
  • メモリ推定値
  • ペイント数
  • 低速スクロール領域
  • 固定位置制約

この図は、ビューポートの外側に配置されている要素を含め、このページの各レイヤがどのように重ねられ、配置されているかを示しています。

レイヤパネルの図。

図を移動するには:

  • WASD キーを使用して図を移動します。W キーを押すと上方向にパンし、A キーを押すと左方向にパンし、S キーを押すと下方向にパンし、D キーを押すと右方向にパンします。
  • パンモード drag_pan をクリックするか、X キーを押してドラッグし、X 軸と Y 軸に沿って移動します。
  • 回転モード 360 をクリックするか、V キーを押してドラッグし、Z 軸に沿って回転します。
  • 変換をリセット zoom_in_map をクリックするか、0 キーを押して、図を元の位置に戻します。
  • Shift++ キーを押すか、マウスホイールを上方向に回してズームインします。
  • Shift+- キーを押すか、マウスホイールを下にスクロールしてズームアウトします。

レイヤに対応する DOM 要素を [要素] パネルに表示するには、図またはレイヤツリーでレイヤを右クリックし、[要素パネルに表示] をクリックします。

また、[レイヤ] パネルでは、コンテンツをホストまたは描画しない特定のレイヤが非表示になります。これらのレイヤを表示するには、レイヤツリーを右クリックして [内部レイヤを表示] を選択します。

DOM 変更ブレークポイントを設定する

[レイヤ] パネルでは、DOM 変更ブレークポイントを設定できます。

DOM 変更ブレークポイントを設定する手順は次のとおりです。

  1. レイヤツリーでレイヤを右クリックします。
  2. [Break on] にカーソルを合わせ、[Subtree modifications]、[Attribute modifications]、または [Node removal] を選択します。

DOM 変更ブレークポイントのリストは、以下で確認できます。

  • [要素] > [DOM ブレークポイント] タブ。
  • [ソース] > [DOM ブレークポイント] の折りたたみセクション。

[ソース] パネルと [要素] パネルに表示されるブレークポイント。

ブレークポイントの種類の詳細については、DOM 変更ブレークポイントの種類をご覧ください。

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

[レイヤ] パネルでは、レイヤに関する詳細なペイント情報を表示したり、ウェブページのコンテンツを 3D 図にレンダリングしたりできます。

Paint Profiler を有効にする手順は次のとおりです。

  1. アクションバーの [check_box Paints] チェックボックスをオンにします。
  2. レイヤツリーからレイヤを選択します。
  3. [詳細] ペインの下部にある [ペイント プロファイラ] をクリックします。すべてのレイヤでこのオプションが使用できるわけではありません。

[プロファイラ] タブが開き、ペイント レコードと、ペイント費用の分布を示すヒストグラムが表示されます。

[Profiler] タブ。

[ペイント] を有効にすると、ウェブページのコンテンツのほとんどが図にレンダリングされます。

スクロールが遅い要素を特定する

一部のウェブサイトでは、JavaScript を使用して要素のスクロール イベントやタップ イベントを検出していますが、その方法がスクロール速度に悪影響を及ぼす可能性があります。スクロールに関連するイベント リスナーが含まれていて、パフォーマンスの低下を引き起こしている可能性のあるレイヤを特定するには、[check_box Slow scroll rects] チェックボックスをオンにします。

図内のスクロール速度が遅いレイヤ。

スクロールが遅くなる原因となる可能性があるレイヤはピンクでハイライト表示されます。