[Elements] パネルには、さまざまなオーバーレイを切り替えたり、DOM ツリー ナビゲーションを高速化したりできます。バッジを包括的に参照できます。
バッジを表示または非表示にする
バッジを表示または非表示にするには：
- DevTools を開きます。
- DOM ツリー内の要素を右クリックし、[バッジ設定...] を選択します。
- 選択したバッジの横にあるチェックボックスをオンまたはオフにします。
[Elements] パネルには、選択したバッジが DOM ツリー内の適切な要素の横に表示されます。以降のセクションでは、各バッジについて説明します。
グリッド
HTML 要素の display CSS プロパティが grid または inline-grid に設定されている場合、その要素はグリッド コンテナです。このような要素の横には、対応するオーバーレイを切り替える grid バッジが表示されます。
次のプレビューでオーバーレイを切り替えます。
- プレビューで要素を検証します。
- DOM ツリーで、要素の横にある
gridバッジをクリックして、オーバーレイを確認します。
オーバーレイには、列、行、それらの数値、ギャップが表示されます。
Grid レイアウトをデバッグする方法については、CSS グリッドを検証するをご覧ください。
サブグリッド
サブグリッドは、親グリッドと同じトラックを使用するネストされたグリッドです。grid-template-columns プロパティと grid-template-rows プロパティのいずれかまたは両方が subgrid に設定されている場合、要素はサブグリッド コンテナです。このような要素の横には、対応するオーバーレイを切り替える subgrid バッジがあります。
次のプレビューでオーバーレイを切り替えます。
- プレビューで要素を検証します。
- DOM ツリーで、要素の横にある
subgridバッジをクリックして、オーバーレイを確認します。
オーバーレイには、列、行、それらの数、サブグリッドのギャップが表示されます。
Flex
HTML 要素の display CSS プロパティが flex または inline-flex に設定されている場合、その HTML 要素は Flex コンテナです。このような要素の横には、対応するオーバーレイを切り替える flex バッジがあります。
次のプレビューでオーバーレイを切り替えます。
- プレビューで要素を検証します。
- DOM ツリーで、要素の横にある
flexバッジをクリックして、オーバーレイを確認します。
オーバーレイには、子要素の位置が表示されます。
Flex レイアウトをデバッグする方法については、CSS Flexbox の検査とデバッグをご覧ください。
広告
DevTools では、一部の広告フレームを検出してタグ付けできます。このようなフレームには、ad バッジが付いています。
次のプレビューで広告を見つけます。
- プレビューで要素を検証します。
- DOM ツリーで、横に
adバッジが付いている要素を見つけます。
ad バッジはクリックできませんが、[レンダリング] タブを使用すると、広告フレームを赤色でハイライト表示できます。
スクロール
HTML 要素がスクロール コンテナであるかどうかは、overflow CSS プロパティが scroll に設定されているかどうかで判断できます。オーバーフローを発生させるのに十分なコンテンツがある場合は、auto に設定されます。このような要素には、横に scroll バッジが表示されます。
スクロール スナップ
スクロール コンテナには、スナップポイントを構成する CSS プロパティを設定できます。このような要素の横には、対応するオーバーレイを切り替える scroll-snap バッジがあります。
次のプレビューでオーバーレイを切り替えます。
- プレビューで要素を検証します。
- DOM ツリーで、要素の横にある
scroll-snapバッジをクリックします。 - 要素を右にスクロールして、オーバーレイを確認します。
オーバーレイには、要素の位置とスナップ ポイントが表示されます。
コンテナ
HTML 要素に container-type CSS プロパティが含まれている場合、その要素はコンテナです。このような要素の横には、対応するオーバーレイを切り替える container バッジがあります。
次のプレビューでオーバーレイを切り替えます。
- プレビューで要素を検証します。
- DOM ツリーで、要素の横にある
containerバッジをクリックします。 - 要素の右下隅をドラッグしてサイズを変更し、レイアウトの変更とオーバーレイを確認します。
オーバーレイには子要素の位置が表示されます。
コンテナクエリのデバッグ方法については、CSS コンテナクエリの検査とデバッグをご覧ください。
スロット
<slot> HTML 要素は、独自のコンテンツを入力できるプレースホルダです。<slot> と <template> 要素を併用すると、別々の DOM ツリーを作成してまとめて表示できます。スロットのコンテンツ要素の横には、対応するスロットへのリンクとして機能する slot バッジが付いています。
次のプレビューで、slot バッジを確認できます。
- プレビューで要素を検証します。
- DOM ツリーで、要素の横にある
slotバッジをクリックして、対応するスロットを見つけます。
revealバッジをクリックして、スロットのコンテンツに戻ります。
最上層
このバッジは、最上位レイヤのコンセプトを理解して可視化するのに役立ちます。最上位レイヤは、z-index に関係なく、他のすべてのレイヤの上にコンテンツをレンダリングします。.showModal() メソッドを使用して <dialog> 要素を開くと、ブラウザはそれを最上位レイヤに配置します。
最上位レイヤの要素を視覚化できるように、[要素] パネルでは、終了タグ </html> の後に DOM ツリーに #top-layer コンテナが追加されます。
上位レイヤ要素の横には top-layer (N) バッジが付いています。ここで、N は要素のインデックス番号です。バッジは、#top-layer コンテナ内の対応する要素へのリンクです。
次のプレビューで、top-layer (N) バッジを確認できます。
- プレビューで [ダイアログを開く] をクリックします。
- ダイアログを調べる。
- DOM ツリーで、
<dialog>要素の横にあるtop-layer (1)バッジをクリックします。[要素] パネルでは、閉じ</html>タグの後の#top-layerコンテナ内の対応する要素に移動します。
- 要素またはその
::backdropの横にあるrevealバッジをクリックして、<dialog>要素に戻ります。
メディア
media バッジはデフォルトでオフになっています。オンにすると、<audio> 要素と <video> 要素の横に表示されます。このバッジをクリックすると、[メディア] パネルが開き、メディアのデバッグを行うことができます。
詳細については、メディアパネルでメディア プレーヤーをデバッグするをご覧ください。