[要素] パネルの概要

Dale St. Marthe

[要素] パネルを使用して、DOM 要素を調査、編集します。

概要

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

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

• スタイル:

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

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

• レイアウト: グリッド オーバーレイと flexbox オーバーレイを変更するオプションが含まれます。

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

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

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

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

[要素] パネルを開く

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

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

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