[要素] パネルの概要

Dale St. Marthe

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

概要

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

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

• スタイル:

  • すべてのスタイルシートから要素に適用された CSS ルールを表示してデバッグします。
  • 意図したとおりに動作しない無効な CSS、オーバーライドされた CSS、無効な CSS、その他の CSS を見つけます。
  • 宣言を追加する、クラスを適用する、ボックスモデルを操作することで、要素を編集します。
  • 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 ウィンドウの下部にある [ドロワー] に [要素] パネルが表示されます。