[要素] パネルの概要

Dale St. Marthe

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

概要

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

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

• スタイル:

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

• 計算済み: Chrome によってレンダリングされるときに要素に適用される解決済みプロパティのリスト。

• レイアウト: グリッドとフレックスボックスのオーバーレイを変更するオプションが含まれています。

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

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

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

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

要素パネルを開く

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

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

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