2.1 DOM検査・編集

Inspect and Edit the DOM

ElementsパネルはWebページのDOM（Document Object Model）構造を視覚的に表示し、リアルタイムで編集できる。HTML要素の構造把握、属性の確認・変更、要素の追加・削除など、フロントエンド開発の基本となる機能を提供する。

Elementsパネルを開く

方法	説明
Ctrl+Shift+C	要素検査モードで直接開く
右クリック → 検証	クリックした要素を選択して開く
F12 → Elementsタブ	DevToolsを開いてElementsに切り替え

要素検査モード

ページ上の要素をクリックして、対応するDOMノードを選択するモード。

有効化方法

Ctrl+Shift+C
DevTools左上の矢印アイコン（Select element）をクリック

検査モードの機能

マウスカーソルを要素の上に置くと、以下の情報がオーバーレイ表示される：

要素のタグ名とクラス
サイズ（幅 × 高さ）
マージン、パディング、ボーダーの視覚化
フォントサイズと色
コントラスト比（テキスト要素の場合）

詳細ツールチップ Settings → Preferences → Elements → 「Show detailed inspect tooltip」を有効にすると、より詳細な情報が表示される。

DOMツリーの操作

要素の展開・折りたたみ

操作	方法
展開	▶をクリック、または→キー
折りたたみ	▼をクリック、または←キー
すべて展開	Alt+クリック、または右クリック→「Expand recursively」

要素間の移動

キー	動作
↑ / ↓	前/次の要素を選択
→	要素を展開（展開済みなら最初の子要素へ）
←	要素を折りたたむ（折りたたみ済みなら親要素へ）

要素の検索

Ctrl+FでDOMツリー内を検索。以下の形式で検索可能：

テキスト検索: header
CSSセレクタ: .container、#main、div.item
XPath: //div[@class='item']

HTMLの編集

テキストの編集

操作手順

編集したいテキストノードをダブルクリック
テキストを編集
Enterまたは外側をクリックで確定

属性の編集

操作手順

属性名または属性値をダブルクリック
値を編集
Tabで次の属性へ、Enterで確定

属性の追加

要素名の後ろをダブルクリックして新しい属性を入力。または右クリック → 「Add attribute」。

HTMLとして編集

操作手順

要素を右クリック → 「Edit as HTML」（またはF2）
HTMLを自由に編集
外側をクリックで確定、Escでキャンセル

編集の永続化 Elementsパネルでの編集はページのリロードで失われる。永続化したい場合はWorkspacesまたはLocal Overridesを使用する。ただし、DOM変更はWorkspacesでは保存されないため、HTMLファイルを直接Sourcesパネルで編集する必要がある。

要素の追加・削除・移動

要素の削除

Deleteキー
右クリック → 「Delete element」

要素の非表示

Hキーで要素の表示/非表示を切り替え（visibility: hiddenを適用）。削除せずに一時的に非表示にしたい場合に便利。

要素の移動

要素をドラッグ&ドロップでDOM内の別の位置に移動できる。

要素の複製

右クリック → 「Duplicate element」で要素をコピー。

要素の追加

「Edit as HTML」で任意のHTML要素を追加可能。または既存要素をコピー&ペースト。

コピー操作

右クリック → 「Copy」から様々な形式でコピーできる。

オプション	説明
Copy outerHTML	要素とその内容をHTMLとしてコピー
Copy selector	要素を一意に特定するCSSセレクタ
Copy JS path	要素を取得するJavaScriptコード
Copy XPath	要素のXPathを取得
Copy full XPath	ルートからの完全なXPath
Copy styles	適用されているスタイルをコピー
Cut element	要素を切り取り
Paste element	切り取った要素を貼り付け

JS pathの活用 「Copy JS path」で取得したコードは、Consoleで直接使用できる。例: document.querySelector("#container > div:nth-child(2)")

要素へのスクロール

長いページで要素の位置を確認したい場合：

右クリック → 「Scroll into view」で要素が画面に表示される位置までスクロール

DOMブレークポイント

DOM要素の変更を検出してJavaScriptの実行を停止する機能。

設定方法

操作手順

要素を右クリック
「Break on」から条件を選択

ブレークポイントの種類

種類	トリガー条件
Subtree modifications	子要素が追加、削除、または移動された時
Attribute modifications	要素の属性が変更された時
Node removal	要素が削除された時

活用例 「なぜか要素が消える」「クラスが勝手に変わる」といった問題のデバッグに有効。DOMブレークポイントを設定すると、変更を行うJavaScriptコードの位置で停止する。

状態の強制

:hover、:active、:focus などの疑似クラス状態を強制的に適用できる。

設定方法

操作手順

要素を右クリック
「Force state」から適用したい状態を選択

または、Stylesペインの「:hov」ボタンから設定可能。

状態	説明
:active	クリック中の状態
:hover	マウスホバー状態
:focus	フォーカス状態
:focus-within	子要素にフォーカスがある状態
:focus-visible	キーボードフォーカス状態
:visited	訪問済みリンク状態
:target	URLフラグメントのターゲット状態

アクセシビリティ情報

選択した要素のアクセシビリティ情報を確認できる。

Accessibility ペイン

Elementsパネル右側の「Accessibility」タブで以下を確認：

アクセシビリティツリーでの役割（Role）
ARIAプロパティ
Computed properties（計算済みプロパティ）

フルアクセシビリティツリー

Elementsパネル上部の「アクセシビリティツリーを表示」をクリックすると、DOMツリーの代わりにアクセシビリティツリーが表示される。スクリーンリーダーがページをどう認識するかを確認できる。

参考文献
[1] Get started with viewing and changing the DOM - Chrome DevTools. developer.chrome.com
[2] Pause code with DOM breakpoints - Chrome DevTools. developer.chrome.com