バッジのリファレンス

Sofia Emelianova
Sofia Emelianova

[Elements] パネルには、さまざまなオーバーレイを切り替えたり、DOM ツリー ナビゲーションを高速化したりできます。バッジを包括的に参照できます。

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

バッジを表示または非表示にするには:

  1. DevTools を開きます
  2. DOM ツリーの要素を右クリックし、[Badge settings...] を選択します。バッジの設定。
  3. 選択したバッジの横にあるチェックボックスをオンまたはオフにします。

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

グリッド

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

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

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

グリッド オーバーレイ。

オーバーレイには、列、行、それらの数値、ギャップが表示されます。

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

サブグリッド

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

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

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

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

オーバーレイには、列、行、それらの数、サブグリッドのギャップが表示されます。

Flex

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

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

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

Flex オーバーレイ。

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

Flex レイアウトをデバッグする方法については、CSS Flexbox の検査とデバッグをご覧ください。

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

次のプレビューで広告を検出:

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

広告バッジ。

ad バッジはクリックできませんが、[レンダリング] タブを使用すると、広告フレームを赤でハイライト表示できます。

スクロール スナップ

HTML 要素は、overflow CSS プロパティが scroll に設定されている場合はスクロール コンテナとなり、オーバーフローを発生させるのに十分なコンテンツがある場合は auto になります。スクロール コンテナには、スナップ ポイントを構成する CSS プロパティを含めることができます。このような要素の横には、対応するオーバーレイを切り替える scroll-snap バッジが表示されます。

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

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

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

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

コンテナ

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

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

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

コンテナ オーバーレイ。

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

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

スロット

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

次のプレビューで スロット。slot バッジをご確認ください。

  1. プレビューで要素を検証します。
  2. DOM ツリーで、要素の横にある スロット。slot バッジをクリックして、対応するスロットを見つけます。 スロットバッジと表示バッジ。
  3. 時間枠のコンテンツに戻るには、あらためてreveal バッジをクリックします。

最上層

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

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

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

次のプレビューで (リンク)top-layer (N) バッジをご確認ください。

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

メディア

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

メディアバッジはバッジ設定で有効になり、動画要素の横に表示されます。

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