バッジのリファレンス

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

グリッド

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

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

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

グリッド オーバーレイ。

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

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

サブグリッド

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

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

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

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

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

Flex

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

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

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

Flex オーバーレイ。

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

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

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

次のプレビューで広告を見つけます。

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

広告のバッジ。

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

スクロール

HTML 要素がスクロール コンテナとなるのは、その overflow CSS プロパティが scroll に設定されている場合、またはオーバーフローを起こすだけのコンテンツがある場合に auto に設定されている場合です。このような要素には、scroll バッジが付いています。

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

スクロール スナップ

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

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

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

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

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

コンテナ

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

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

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

コンテナ オーバーレイ。

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

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

スロット

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

次のプレビューで、slot バッジを確認できます。

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

最上位レイヤ

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

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

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

次のプレビューで、top-layer (N) バッジを確認できます。

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

メディア

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

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

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