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 より前のバージョンでは、折りたたまれたノードに子が存在するかを判別できませんでした。現在は、ツリー内に存在する子孫をこのアイコンで示します:

::before と ::after

Firefox 35 より、::before および ::after を使用して追加した疑似要素を調査できます。

ホワイトスペースのみのテキストノード

Firefox 52 の新機能

ウェブ開発者は、1 行のテキストにすべてのコードを記述するわけではありません。マークアップが読みやすくなりますので、空白・改行・タブといったホワイトスペースを HTML 要素の間に置きます。

通常はこれらのホワイトスペースに効果がなく視覚的に出力されませんが、実際はブラウザーが HTML をパースするときに、ノード内に含まれていない要素のために無名のテキストノードを自動的に生成します。これは (あらゆるテキストの後にある) ホワイトスペースも含まれます。

これらの自動生成されたテキストノードはインラインレベルのノードであり、幅・高さともに 0 ではない領域をブラウザーが与えます。そして、マージンやパティングを設定していないにもかかわらず、要素の間に謎の隙間が現れるでしょう。

Firefox 52 より、インスペクターでホワイトスペースのノードを表示しますので、マークアップ内の隙間がどこから発生したかがわかります。ホワイトスペースのノードを丸印 () で表して、マウスポインターを載せると説明のツールチップを表示します:

https://mdn.github.io/devtools-examples/whitespace-only-demo/index.html のデモで、実際の動作をご覧ください。

要素のポップアップコンテキストメニュー

ポップアップコンテキストメニューを使用して、特定のノードに対して共通的なタスクを実行できます。要素をコンテキストクリックすると、メニューを表示します。メニューには、以下の項目があります。リンクをクリックすると、コンテキストメニューリファレンスのコマンド説明を確認できます:

HTML として編集
新しいノードを作成
ノードを複製
ノードを削除
属性
- 属性を追加
- 属性を編集
- 属性を削除
hover
active
focus
コピー
- innerHTML
- outerHTML
- CSS セレクター
- CSS パス
- 画像のデータ URI
- 属性
貼り付け
- innerHTML
- outerHTML
- 前
- 後
- 最初の子要素として
- 最後の子要素として
すべて展開
折りたたむ
この要素の位置にスクロール
ノードのスクリーンショットを撮影
コンソールで使う
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 の新機能ツリービューで、選択した要素および配下の要素をすべて展開します。これは、要素の隣にある展開用矢印を `Alt` キーを押下しながらクリックすることと同じです。
折りたたむ	Firefox 44 の新機能ツリービューで、選択した要素を折りたたみます。これは、展開されている要素の展開用矢印をクリックすることと同じです。
(貼り付け) innerHTML	クリップボード内のコンテンツを、ノードの innerHTML として貼り付ける
(貼り付け) outerHTML	クリップボード内のコンテンツを、ノードの outerHTML として貼り付ける
(貼り付け) 前	クリップボード内のコンテンツを、ノードの直前に貼り付ける
(貼り付け) 後	クリップボード内のコンテンツを、ノードの直後に貼り付ける
(貼り付け) 最初の子要素として	クリップボード内のコンテンツを、ノードの最初の子要素として貼り付ける
(貼り付け) 最後の子要素として	クリップボード内のコンテンツを、ノードの最後の子要素として貼り付ける
この要素の位置にスクロール	選択したノードを表示するように、ページをスクロールする 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 を編集するには、要素のポップアップメニューを開いて [HTML として編集] を選択します。HTML ペイン内にテキストボックスが現れます:

ここに任意の HTML を追加できます。要素のタグを変更する、既存の要素を変更する、新たな要素を追加するといったことが可能です。ボックスの外部をクリックすると、変更点をページに適用します。

Firefox 52 より、HTML を編集しているときのコンテキストメニューが、テキストの編集において一般的なものになりました:

コピーと貼り付け

ポップアップメニューを使用して、HTML ツリー内のノードのコピーや希望する場所へノードを貼り付けることができます。

ドラッグ・アンド・ドロップ

HTML ツリーでノードを移動することができます。要素をクリックアンドホールドして、ツリー内でドラッグしてください。マウスボタンを離すと、対応する場所に要素を挿入します:

Firefox 44 より、Esc キーを押下するとドラッグ・アンド・ドロップをキャンセルできます。

新しいノードを挿入する

Firefox 48 の新機能

Firefox 48 より、マークアップビューの上部に "+" 印のアイコンがあります:

このアイコンをクリックすると、現在選択している要素の最後の子要素として、空の <div> 要素をドキュメントに挿入します。そしてドキュメント内の他のノードと同様に、新しいノードの内容やスタイルを編集できます。

ポップアップメニューの [新しいノードを作成] を使用して、同じ機能にアクセスできます。

最後に子要素を追加しても効果がないタイプの要素 (例えば <html> や <iframe> 要素など) を選択しているときは、このボタンが無効になりますので注意してください。ただし、<div> を挿入することが無効である場所 (<style> や <link> など) では有効になります。このような場合は、要素をテキストとして挿入します。