要素パネルのバジックの包括的なリファレンスを使用して、さまざまなオーバーレイを切り替え、DOM ツリーのナビゲーションを高速化しましょう。
バッジを表示または非表示にする
特定のバッジを表示または非表示にするには:
- DevTools を開きます。
- DOM ツリー内の要素を右クリックし、[バッジ設定] サブメニューで 1 つ以上のバッジをオンにします。
[要素] パネルには、選択したバッジが DOM ツリー内の適切な要素の横に表示されます。以降のセクションでは、各バッジについて説明します。
グリッド
HTML 要素の display
CSS プロパティが grid
または inline-grid
に設定されている場合、その要素はグリッド コンテナです。このような要素の横には、対応するオーバーレイを切り替える grid
バッジがあります。
次のプレビューでオーバーレイを切り替えます。
- プレビューで要素を検証します。
- DOM ツリーで、要素の横にある
grid
バッジをクリックして、オーバーレイを確認します。
オーバーレイには、列、行、その数、ギャップが表示されます。
グリッド レイアウトをデバッグする方法については、CSS グリッドを検査するをご覧ください。
サブグリッド
サブグリッドは、親グリッドと同じトラックを使用するネストされたグリッドです。要素がサブグリッド コンテナである場合、grid-template-columns
プロパティと grid-template-rows
プロパティの 1 つまたは両方が subgrid
に設定されています。このような要素の横には、対応するオーバーレイを切り替える subgrid
バッジがあります。
次のプレビューでオーバーレイを切り替えます。
- プレビューで要素を検証します。
- DOM ツリーで、要素の横にある
subgrid
バッジをクリックして、オーバーレイを確認します。
オーバーレイには、サブグリッドの列、行、数、ギャップが表示されます。
Flex
HTML 要素の display
CSS プロパティが flex
または inline-flex
に設定されている場合、その要素は Flex コンテナです。このような要素の横には、対応するオーバーレイを切り替える flex
バッジがあります。
次のプレビューでオーバーレイを切り替えます。
- プレビューで要素を検証します。
- DOM ツリーで、要素の横にある
flex
バッジをクリックして、オーバーレイを確認します。
オーバーレイには、子要素の位置が表示されます。
フレックス レイアウトをデバッグする方法については、CSS フレックスボックスを検査してデバッグするをご覧ください。
広告
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>
要素の横に表示されます。このバッジをクリックすると、[メディア] パネルが開き、メディアのデバッグを行うことができます。
詳細については、メディアパネルを使用してメディア プレーヤーをデバッグするをご覧ください。