バッジのリファレンス

Sofia Emelianova
Sofia Emelianova
GitHub

[要素] パネルのバッジに関する包括的なリファレンスを使用して、さまざまなオーバーレイを切り替え、DOM ツリーのナビゲーションを高速化します。

バッジの表示と非表示を切り替える

特定のバッジの表示と非表示を切り替えるには:

  1. DevTools を開きます。
  2. DOM ツリー内の要素を右クリックし、[バッジの設定] サブメニューで 1 つ以上のバッジをオンにします。

[バッジの設定] メニュー。

[要素] パネルには、DOM ツリー内の該当する要素の横に選択したバッジが表示されます。次のセクションでは、各バッジについて説明します。

View-source

view-source バッジは、HTML ページのルートにある <html> タグの横に表示されます。このバッジをクリックすると、[ソース] パネルにページのソースが表示されます。

「ソースを表示」バッジ。

このバッジは、Chrome のページ コンテキスト（右クリック）メニューの [ページのソースを表示] オプションの代替ワークフローを提供します。

  1. Chrome で、ページを右クリックして [検証] を選択します。
  2. [要素] パネルで、view-source バッジを <html> タグの横にあるクリックします。
  3. [ソース] パネルでページソースを調べます。

Grid

HTML 要素は、グリッド コンテナになります。これは、その display CSS プロパティが grid または inline-grid に設定されている場合です。このような要素の横には grid バッジが表示され、対応するオーバーレイを切り替えることができます。

次のプレビューでオーバーレイを切り替えます。

  1. プレビューで 要素を調べます。
  2. DOM ツリーで、 要素の横にある grid バッジをクリックして、オーバーレイを確認します。

グリッド オーバーレイ。

オーバーレイには、列、行、その番号、間隔が表示されます。

グリッド レイアウトをデバッグする方法については、CSS グリッドを検証するをご覧ください。

Subgrid

サブグリッドは、親グリッドと同じトラックを使用するネストされたグリッドです。要素は、grid-template-columns プロパティまたは grid-template-rows プロパティのいずれかまたは両方が subgrid に設定されている場合、サブグリッド コンテナになります。このような要素の横には subgrid バッジが表示され、対応するオーバーレイを切り替えることができます。

次のプレビューでオーバーレイを切り替えます。

  1. プレビューで 要素を調べます。
  2. DOM ツリーで、 要素の横にある subgrid バッジをクリックして、オーバーレイを確認します。

サブグリッド オーバーレイ。

オーバーレイには、サブグリッドの列、行、その番号、間隔が表示されます。

Flex

HTML 要素は、フレックス コンテナになります。これは、その display CSS プロパティが flex または inline-flex に設定されているためです。このような要素の横には flex バッジが表示され、対応するオーバーレイを切り替えることができます。

次のプレビューでオーバーレイを切り替えます。

  1. プレビューで 要素を調べます。
  2. DOM ツリーで、 要素の横にある flex バッジをクリックして、オーバーレイを確認します。

Flex オーバーレイ。

オーバーレイには、子要素の位置が表示されます。

フレックス レイアウトをデバッグする方法については、CSS フレックスボックスを検証してデバッグするをご覧ください。

DevTools は一部の広告フレームを検出してタグ付けできます。このようなフレームの横には ad バッジが表示されます。

次のプレビューで広告を見つけてください。

  1. プレビューで 要素を調べます。
  2. DOM ツリーで、横に ad バッジが付いている要素を見つけます。

広告のバッジ。

ad バッジはクリックできませんが、カーソルを合わせると、要素が広告として識別された理由に関するコンテキストを提供するツールチップが表示されます。例:

広告のバッジのツールチップ。

  • スクリプトの祖先: 要素の作成に関与したスクリプト。
  • フィルタリストのルール: 要素または読み込まれたリソースに一致したフィルタリスト（EasyListなど）の特定のルール。

[**レンダリング**] タブを使用して、広告フレームを赤でハイライト表示することもできます。

スクロール

HTML 要素は、スクロール コンテナになります。これは、overflow CSS プロパティが scroll に設定されている場合、またはオーバーフローを引き起こすのに十分なコンテンツがある場合に auto に設定されている場合です。このような要素の横には scroll バッジが表示されます。

DOM ツリーノードのスクロール バッジ。

Scroll-snap

スクロール コンテナには、スナップポイントを構成する CSS プロパティを設定できます。このような要素の横には scroll-snap バッジが表示され、対応するオーバーレイを切り替えることができます。

次のプレビューでオーバーレイを切り替えます。

  1. プレビューで 要素を調べます。
  2. DOM ツリーで、 要素の横にある scroll-snap バッジをクリックします。
  3. 要素を右にスクロールして、オーバーレイを確認します。

スクロール スナップ オーバーレイ。

オーバーレイには、要素の位置とスナップポイントが表示されます。

コンテナ

HTML 要素は、コンテナになります。container-typeこのような要素の横には container バッジが表示され、対応するオーバーレイを切り替えることができます。

次のプレビューでオーバーレイを切り替えます。

  1. プレビューで 要素を調べます。
  2. DOM ツリーで、 要素の横にある container バッジをクリックします。
  3. 右下隅をドラッグして要素のサイズを変更し、レイアウトの変更とオーバーレイを確認します。

コンテナ オーバーレイ。

オーバーレイには、子要素の位置が表示されます。

コンテナクエリをデバッグする方法については、CSS コンテナクエリを検証してデバッグするをご覧ください。

スロット

<slot> HTML 要素は、独自のコンテンツで埋めることができるプレースホルダです。<template> 要素とともに、<slot> を使用して個別の DOM ツリーを作成し、それらをまとめて表示できます。スロット コンテンツ要素の横には slot バッジが表示され、対応するスロットへのリンクとして機能します。

次のプレビューで slot バッジを見つけてください。

  1. プレビューで 要素を調べます。
  2. DOM ツリーで、 要素の横にある slot バッジをクリックして、対応するスロットを見つけます。 スロットとリビール バッジ。
  3. reveal バッジをクリックして、スロットのコンテンツに戻ります。

上位レイヤ

このバッジは、上位レイヤのコンセプトを理解し、視覚化するのに役立ちます。上位レイヤは、z-index に関係なく、他のすべてのレイヤの上にコンテンツをレンダリングします。.showModal() メソッドを使用して <dialog> 要素 を開くと、ブラウザはそれを上位レイヤに配置します。

上位レイヤの要素を視覚化できるように、[要素] パネルでは、#top-layer コンテナが DOM ツリーに終了タグ </html> の後に追加されます。

上位レイヤの要素の横には top-layer (N) バッジが表示されます。ここで、N は要素のインデックス番号です。バッジは、#top-layer コンテナ内の対応する要素へのリンクです。

次のプレビューで top-layer (N) バッジを見つけてください。

  1. プレビューで [Open dialog] をクリックします。
  2. ダイアログを調べます。
  3. DOM ツリーで、top-layer (1) バッジを <dialog> 要素の横でクリックします。[要素] パネルで、終了タグ </html> の後の #top-layer コンテナ内の対応する要素に移動します。最上位レイヤのコンテナとバッジ。
  4. 要素またはその ::backdrop の横にある reveal バッジをクリックして、<dialog> 要素に戻ります。

メディア

media バッジはデフォルトでオフになっています。オンにすると、<audio> 要素と <video> 要素の横に表示されます。このバッジをクリックすると、[メディア] パネルが開き、メディアをデバッグできます。

バッジ設定でメディアバッジがオンになり、動画要素の横に表示されている。

詳細については、[メディア] パネルでメディア プレーヤーをデバッグするをご覧ください。

ポップオーバー

ポップオーバーは popover 属性を持つ要素で、ツールチップ、アラート、トーストなど、さまざまなインタラクティブ パターンに役立ちます。このような要素の横には popover バッジが表示されます。

このバッジは、横にある top-layer バッジを切り替えます。このバッジは、#top-layer コンテナ内の対応する要素にリンクしています。

次のプレビューで popover バッジを見つけてください。

  1. プレビューで [TOGGLE POPOVER] をクリックします。
  2. 表示されたポップオーバーを調べます。

  3. DOM ツリーで、popover バッジを <div popover> 要素の横でクリックします。[要素] パネルに top-layer バッジが表示されます。

    popover 属性を持つ要素の横にある popover バッジ。

  4. `上位レイヤ セクションの手順に沿って操作します。

詳細については、https://web.dev/learn/css/popover-and-dialog もご覧ください。

Starting-style

The@starting-style ルールは、ページにレンダリングされる前の要素の初期スタイルを定義します。これは、アニメーション化する要素に必要です。display: noneアニメーション化する状態が必要なためです。このような要素の横には starting-style バッジが表示されます。

このバッジは @starting-style ルールのスタイルを切り替えるため、アニメーションの動作を確認できます。

次のプレビューで starting-style バッジを見つけてください。

  1. プレビューで [OPEN POPOVER] をクリックします。
  2. 表示されたポップオーバーを調べます。

  3. DOM ツリーで、starting-style バッジを <div popover> 要素の横で切り替えます。

    @starting-style ルールが適用された要素の横にある starting-style バッジ。

  4. アニメーションの動作と、[要素] > [スタイル] タブで適用されているスタイルを確認します。

詳細については、ポップオーバーのアニメーションもご覧ください。

Custom-element

カスタム HTML 要素は、ハイフンで区切られたタグ名またはカスタマイズされた組み込み要素の is="..." 属性で識別され、DOM ツリーに custom-element バッジが表示されます。

バッジをクリックすると、[ソース] パネルの関連するコードに移動します。

DOM ツリー内のカスタム HTML 要素の横にあるカスタム要素バッジ。