バッジのリファレンス

Sofia Emelianova
Sofia Emelianova
GitHub

[要素] パネルのバッジに関する包括的なリファレンスを使用して、さまざまなオーバーレイを切り替えたり、DOM ツリーのナビゲーションを高速化したりできます。

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

特定のバッジの表示と非表示を切り替えるには:

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

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

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

ソースを表示

view-source バッジは、HTML ページのルートにある <html> タグの横にあります。このボタンをクリックすると、[ソース] パネルにページのソースが表示されます。

「ソースを表示」バッジ。

このバッジは、Chrome のページ コンテキスト（右クリック）メニューの [ページのソースを表示] オプションの代替ワークフローを提供します。

  1. Chrome でページを右クリック > [検証] を選択します。
  2. [要素] パネルで、<html> タグの横にある view-source バッジをクリックします。
  3. [ソース] パネルでページのソースを検証します。

グリッド

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

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

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

グリッド オーバーレイ。

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

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

サブグリッド

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

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

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

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

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

Flex

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

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

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

Flex オーバーレイ。

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

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

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

次のプレビューで広告を確認します。

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

広告のバッジ。

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

スクロール

HTML 要素は、overflow CSS プロパティが scroll に設定されている場合、またはオーバーフローを引き起こすのに十分なコンテンツがある場合に auto に設定されている場合、スクロール コンテナになります。このような要素には、横に scroll バッジが表示されます。

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

Scroll-snap

スクロール コンテナには、スナップ ポイントを構成する 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> タグの後に #top-layer コンテナが DOM ツリーに追加されます。

最上位レイヤの要素には、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> 要素の横に表示されます。このバッジをクリックすると、[メディア] パネルが開き、メディアをデバッグできます。

バッジ設定でメディア バッジがオンになっており、動画要素の横に表示されている。

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

ポップオーバー

ポップオーバーは popover 属性を持つ要素で、ツールチップ、アラート、トーストなど、さまざまなインタラクティブ パターンに役立ちます。このような要素には、横に popover バッジが表示されます。

このバッジを切り替えると、その横に top-layer バッジが表示され、#top-layer コンテナ内の対応する要素にリンクされます。

次のプレビューで popover バッジを確認してください。

  1. プレビューで [TOGGLE POPOVER] をクリックします。
  2. 表示されたポップオーバーを調べます。

  3. DOM ツリーで、<div popover> 要素の横にある popover バッジをクリックします。[要素] パネルに top-layer バッジが表示されます。

    ポップオーバー属性を持つ要素の横にあるポップオーバー バッジ。

  4. 最上位レイヤ セクションの手順に沿って操作します。

詳しくは、https://web.dev/learn/css/popover-and-dialog もご覧ください。

Starting-style

@starting-style ルールは、要素がページにレンダリングされる前の初期スタイルを定義します。これは、display: none からアニメーションで表示される要素に必要です。アニメーションで表示される状態が必要になるためです。このような要素には、横に starting-style バッジが表示されます。

このバッジは @starting-style ルールのスタイルを切り替えるため、アニメーションの動作を確認できます。

次のプレビューで starting-style バッジを確認してください。

  1. プレビューで [ポップオーバーを開く] をクリックします。
  2. 表示されたポップオーバーを調べます。

  3. DOM ツリーで、<div popover> 要素の横にある starting-style バッジを切り替えます。

    @starting-style ルールを持つ要素の横にある開始スタイル バッジ。

  4. [要素] > [スタイル] タブで、アニメーションの動作と適用されているスタイルを確認します。

詳しくは、ポップオーバーのアニメーションもご覧ください。