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

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 グリッドまたは Flex を表すアイコン（該当する場合）。

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

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

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

[詳細] タブ。

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

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

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

[レイヤ] パネルの図。

図を移動するには:

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

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

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

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

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

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

  1. レイヤツリーでレイヤを右クリックします。
  2. [Break on] の上にマウスポインターを移動し、[Subtree modifications]、[Attribute modifications]、または [Node removal] を選択します。

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

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

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

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

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

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

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

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

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

[Profiler] タブ。

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

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

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

低速スクロール レイヤ（図）。

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