HTML の調査と編集
HTML ペイン で、ページの HTML の調査や編集を行えます。
HTML のナビゲーション
HTML パンくずリスト
HTML ペインの下部に、パンくずリストのツールバーがあります。これは選択した要素を含む枝の、ドキュメント内での階層構造を表します:
パンくずリストにマウスポインターを載せると、その要素をページ上でハイライト表示します。
パンくずリストの キーボードショートカット があります。
Firefox 48 より前のバージョンでは、パンくずリストのツールバーがマークアップペインの上にありました。
検索
Firefox 45 より、インスペクターの検索ボックスは、カレントドキュメントおよびすべてのフレーム内のマークアップから検索します。
検索ボックスをクリックして広げるか、Ctrl + F または Mac で Cmd + F を押下して、マークアップの検索を始めます。
検索ボックスに入力すると、検索文字列にマッチする class 属性や id 属性を表示するオートコンプリートをポップアップします:
↑ および ↓ キーを押下すると候補を行き来でき、Tab で選択中の候補を選択、さらに Enter でその属性を持つ最初のノードを選択します。
オートコンプリートを選択せずにセレクターなしの検索文字列を入力すると、すべての属性名および属性値、ノードのテキストコンテンツを含むドキュメントの全文から検索します。
マッチした箇所を巡回するには、Enter を押下します。Firefox 48 より、Shift + Enter を使用して、マッチした箇所を逆方向に巡回できます。
HTML ツリー
ペインの残りの部分に、ページの HTML をツリー形式で表示します (この UI はマークアップビューとも呼ばれます)。各ノードの左側に三角印があります。この印をクリックすると、ノードを展開します。Alt キーを押しながら三角印をクリックすると、配下のノードをすべて展開します。
ツリー内のノードにマウスポインターを載せると、その要素をページ上でハイライト表示します。
display: none を使用して非表示にしているノードは、淡色で (例えば <head> などレンダリングされない要素と同様に) 表示します。
Firefox 53 より、内容物が大きなノードが折りたたまれているとき、開始タグと終了タグの間に省略記号を表示します。Firefox 53 より前のバージョンでは、折りたたまれたノードに子が存在するかを判別できませんでした。現在は、ツリー内に存在する子孫をこのアイコンで示します: 
メモ: HTML ツリーで使用できる便利なキーボードショートカットがいくつかあります - HTML ペインのキーボードショートカットリストをご覧ください。
::before と ::after
カスタム要素定義
カスタム要素を含むページでインスペクタを開くと、デバッガでカスタム要素のクラス定義を表示できます。
- 要素を検査します
customという単語をクリックします。
要素のクラスのソースがデバッガに表示されます。
ホワイトスペースのみのテキストノード
ウェブ開発者は、1 行のテキストにすべてのコードを記述するわけではありません。マークアップが読みやすくなりますので、空白・改行・タブといったホワイトスペースを HTML 要素の間に置きます。
通常はこれらのホワイトスペースに効果がなく視覚的に出力されませんが、実際はブラウザーが HTML をパースするときに、ノード内に含まれていない要素のために無名のテキストノードを自動的に生成します。これは (あらゆるテキストの後にある) ホワイトスペースも含まれます。
これらの自動生成されたテキストノードは インラインレベル (en-US) のノードであり、幅・高さともに 0 ではない領域をブラウザーが与えます。そして、マージンやパティングを設定していないにもかかわらず、要素の間に謎の隙間が現れるでしょう。
Firefox 52 より、インスペクターでホワイトスペースのノードを表示しますので、マークアップ内の隙間がどこから発生したかがわかります。ホワイトスペースのノードを丸印 (
) で表して、マウスポインターを載せると説明のツールチップを表示します:
https://mdn.github.io/devtools-examples/whitespace-only-demo/index.html のデモで、実際の動作をご覧ください。
仮想ルート
DOM に存在する仮想ルートは、通常の DOM と同じ方法で HTML ページに公開されます。仮想ルートは #shadow-root というノードによって表されます。拡張矢印をクリックすると、仮想 DOM の完全な内容が表示され、ページの DOM の他の部分と同様の方法で含まれるノードを操作できます 限られたフィーチャセット - 仮想 DOM ノードのドラッグアンドドロップや削除はできません。
仮想 DOM に "slotted" 要素が含まれている場合(<slot> 要素の内部に挿入された後の slot 属性を持つ要素 - これらの使用方法の説明については、slot に柔軟性を追加するを参照してください)、"slotted" 要素は対応する <slot> 要素の内部に表示され、その横に "公開" リンクが表示されます。「公開」リンクをクリックすると、仮想 DOM の外に存在する slot 属性を持つ要素が強調表示されます。
これは <slot> 要素があり、そのコンテンツのソースを見つけることができない場合に非常に便利です。
メモ: 仮想 DOM 検査は Firefox 61 で実装されましたが、現在は dom.webcomponents.shadowdom.enabled プレフィックスの後ろに隠れています。現在、Firefox 63 のようになっているプラットフォームで Web コンポーネント/仮想 DOM が利用可能になると、この機能が有効になります。
要素のポップアップコンテキストメニュー
ポップアップコンテキストメニューを使用して、特定のノードに対して共通的なタスクを実行できます。要素をコンテキストクリックすると、メニューを表示します。メニューには、以下の項目があります。リンクをクリックすると、コンテキストメニューリファレンス のコマンド説明を確認できます:
- HTML として編集
- 新しいノードを作成
- ノードを複製
- ノードを削除
- 属性
- hover
- active
- focus
- コピー
- 貼り付け
- すべて展開
- 折りたたむ
- この要素の位置にスクロール
- ノードのスクリーンショットを撮影
- コンソールで使う
- DOM プロパティを表示
- リンクを新しいタブで開く *
- デバッガーでファイルを開く *
- スタイルエディターでファイルを開く *
- リンクの URL をコピー *
* これらの項目は特定の状況に限り表示されます。例えば [スタイルエディターでファイルを開く] は、CSS ファイルへのリンクの上でコンテキストクリックしたときに表示されます。
コンテキストメニューリファレンス
注記: Firefox 49 よりコンテキストメニューは、よりコンパクトにするため大きく再編されました。メニューの構造が上で示したものと若干異なっていても、悩まないでください。それでも同じ項目を使用できます。
| HTML として編集 | 要素の HTML を編集する |
| (コピー) innerHTML | 要素の innerHTML をコピーする |
| (コピー) outerHTML |
要素の outerHTML をコピーする Ctrl + C (Mac では Cmd + C) を押下すると同じことができます。 |
| (コピー) 一意なセレクタ/CSS セレクター | 要素を一意に選択する CSS セレクターをコピーする |
| (コピー) CSS パス | 要素へのフルパスを表す CSS セレクターをコピーする |
| (コピー) 画像のデータ URI | 選択した要素が画像である場合に、画像を data:// URL としてコピーする |
| (Copy) 属性 | 要素の属性をコピーする |
| DOM プロパティを表示 | 常時表示コンソール を開いて、選択中の要素を 調査 するために "inspect($0)" コマンドを実行する |
| コンソールで使う |
Firefox 43 の新機能 temp0 という名前の変数 (temp0 がすでに使用中である場合は、temp1 などを使用) に代入して 常時表示コンソール を開くことにより、コンソールのコマンドラインを使用してノードと対話できます。 |
| すべて展開 |
Firefox 44 の新機能 |
| 折りたたむ |
Firefox 44 の新機能 |
| (貼り付け) innerHTML | クリップボード内のコンテンツを、ノードの innerHTML として貼り付ける |
| (貼り付け) outerHTML | クリップボード内のコンテンツを、ノードの outerHTML (en-US) として貼り付ける |
| (貼り付け) 前 | クリップボード内のコンテンツを、ノードの直前に貼り付ける |
| (貼り付け) 後 | クリップボード内のコンテンツを、ノードの直後に貼り付ける |
| (貼り付け) 最初の子要素として | クリップボード内のコンテンツを、ノードの最初の子要素として貼り付ける |
| (貼り付け) 最後の子要素として | クリップボード内のコンテンツを、ノードの最後の子要素として貼り付ける |
| この要素の位置にスクロール |
選択したノードを表示するように、ページをスクロールする Firefox 44 よりキーボードショートカット S でも、選択した要素の位置にスクロールします。 |
| ノードのスクリーンショットを撮影 | 選択したノードのスクリーンショットを撮影して、ダウンロードディレクトリーに保存します。スクリーンショットを撮影する をご覧ください。 |
| 新しいノードを作成 | 選択中の要素の最後の子要素として、空の <div> 要素を作成します。新しいノードを挿入する をご覧ください。 |
| ノードを複製 |
Firefox 44 の新機能 |
| ノードを削除 | 要素を DOM から削除する |
| 属性/属性を追加 |
Firefox 44 の新機能 |
| 属性/属性を編集 |
Firefox 44 の新機能 |
| 属性/属性を削除 |
Firefox 44 の新機能 |
| リンクを新しいタブで開く | (href 属性など、リンク上でメニューを開いた場合のみ) リンク先のアイテムを新しいタブで開く |
| デバッガーでファイルを開く | (JS ソースへのリンク上でメニューを開いた場合のみ) リンク先のソースをデバッガーで開く |
| スタイルエディターでファイルを開く | (CSS ソースへのリンク上でメニューを開いた場合のみ) リンク先のソースをスタイルエディターで開く |
| リンクの URL をコピー | (URL 上でメニューを開いた場合のみ) URL をコピーする |
| :hover | :hover CSS 疑似クラスを設定する |
| :active | :active CSS 疑似クラスを設定する |
| :focus | :focus CSS 疑似クラスを設定する |
HTML として編集
HTML ペインで、HTML (タグ、属性、内容物) を直接編集できます。編集したい要素をダブルクリックして、編集してください。Enter キーを押下すると、変更点が直ちに反映されます。
要素の outerHTML (en-US) を編集するには、要素のポップアップメニューを開いて [HTML として編集] を選択します。HTML ペイン内にテキストボックスが現れます:
ここに任意の HTML を追加できます。要素のタグを変更する、既存の要素を変更する、新たな要素を追加するといったことが可能です。ボックスの外部をクリックすると、変更点をページに適用します。
Firefox 52 より、HTML を編集しているときのコンテキストメニューが、テキストの編集において一般的なものになりました:
コピーと貼り付け
ポップアップメニュー を使用して、HTML ツリー内のノードのコピーや希望する場所へノードを貼り付けることができます。
ドラッグ・アンド・ドロップ
HTML ツリーでノードを移動することができます。要素をクリックアンドホールドして、ツリー内でドラッグしてください。マウスボタンを離すと、対応する場所に要素を挿入します:
Firefox 44 より、Esc キーを押下するとドラッグ・アンド・ドロップをキャンセルできます。
新しいノードを挿入する
Firefox 48 より、マークアップビューの上部に "+" 印のアイコンがあります:
このアイコンをクリックすると、現在選択している要素の最後の子要素として、空の <div> 要素をドキュメントに挿入します。そしてドキュメント内の他のノードと同様に、新しいノードの内容やスタイルを編集できます。
ポップアップメニューの [新しいノードを作成] を使用して、同じ機能にアクセスできます。
最後に子要素を追加しても効果がないタイプの要素 (例えば <html> や <iframe> 要素など) を選択しているときは、このボタンが無効になりますので注意してください。ただし、<div> を挿入することが無効である場所 (<style> や <link> など) では有効になります。このような場合は、要素をテキストとして挿入します。