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