[要素] パネルの概要

Dale St. Marthe

[要素] パネルでは、DOM 要素を確認、編集します。

概要

[Elements] パネルには、DOM の検査と操作を行うための堅牢なインターフェースが用意されています。HTML ドキュメントに似た DOM ツリーを使用して、特定の DOM ノードを選択し、他のツールで変更することができます。

[要素] パネルには、関連するツールを含む以下のタブもあります。

• スタイル:

  • すべてのスタイルシートで要素に適用されている CSS ルールを表示してデバッグします。
  • 無効な CSS、オーバーライドされた CSS、無効な CSS など、想定どおりに機能していない CSS を見つけます。
  • 宣言を追加し、クラスを適用し、Box モデルを操作して、要素を編集します。
  • コンテナの編集オプションにアクセスするには、DOM ツリーのバッジを使用します。

• 計算済み: Chrome でレンダリングされる際に、要素に適用された解決済みのプロパティをリストします。

• レイアウト: grid オーバーレイと flexbox オーバーレイを変更するためのオプションがあります。

• イベント リスナー: すべてのイベント リスナーとその属性を一覧表示します。イベント リスナーのソースを確認し、パッシブ リスナーまたはブロッキング リスナーをフィルタできます。

• DOM ブレークポイント: [要素] パネルから追加された DOM 変更ブレークポイントを一覧表示し、有効化、無効化、削除、表示を行えます。

• プロパティ: DOM ノードを選択して、オブジェクトの独自のプロパティと継承されたプロパティを調査し、並べ替えます。

• ユーザー補助: ARIA ラベルとそのプロパティを持つ要素が一覧表示されます。ユーザー補助ツリーを切り替えて検査できます（試験運用版）。

[要素] パネルを開く

デフォルトでは、DevTools を開くと [Elements] パネルが開きます。ページの任意の場所でノードを検証して、[要素] パネルを自動的に開くこともできます。

[要素] パネルを手動で開くには:

1. DevTools を開きます。
2. 次のコマンドを実行して、コマンド メニューを開きます。
   • macOS: Command+Shift+P
   • Windows、Linux、ChromeOS: Ctrl+Shift+P
3. 「Elements」と入力し、[要素を表示] を選択して Enter キーを押します。DevTools ウィンドウの下部にある [Drawer] に [Elements] パネルが表示されます。