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> などレンダリングされない要素と同様に) 表示します。
::before と ::after
Firefox 35 より、::before および ::after を使用して追加した疑似要素を調査できます。
要素のポップアップコンテキストメニュー
ポップアップコンテキストメニューを使用して、特定のノードに対して共通的なタスクを実行できます。要素をコンテキストクリックすると、メニューを表示します。メニューには、以下の項目があります。リンクをクリックすると、コンテキストメニューリファレンス のコマンド説明を確認できます:
- HTML として編集
- 新しいノードを作成
- ノードを複製
- ノードを削除
- 属性
- :hover
- :active
- :focus
- コピー
- 貼り付け
- すべて展開
- 折りたたむ
- この要素の位置にスクロール
- ノードのスクリーンショットを撮影
- コンソールで使う
- DOM プロパティを表示
- リンクを新しいタブで開く *
- デバッガでファイルを開く *
- スタイルエディタでファイルを開く *
- リンクの URL をコピー *
* これらの項目は特定の状況に限り表示されます。例えば "スタイルエディタでファイルを開く" は、CSS ファイルへのリンクの上でコンテキストクリックしたときに表示されます。
コンテキストメニューリファレンス
注記: Firefox 49 よりコンテキストメニューは、よりコンパクトにするため大きく再編されました。メニューの構造が上で示したものと若干異なっていても、悩まないでください。それでも同じ項目を使用できます。
| HTML として編集 | 要素の HTML を編集する |
| (コピー) Inner HTML | 要素の innerHTML をコピーする |
| (コピー) Outer HTML |
要素の outerHTML をコピーする Ctrl + C (Mac では Cmd + C) を押下すると同じことができます。 |
| 一意なセレクタをコピー/CSS Selector | 要素を一意に選択する CSS セレクタをコピーする |
| 画像のデータ URI をコピー | 選択した要素が画像である場合に、画像を data:// URL としてコピーする |
| DOM プロパティを表示 | 常時表示コンソールを開いて、選択中の要素を調査するために "inspect($0)" コマンドを実行する |
| コンソールで使う |
Firefox 43 の新機能 temp0 という名前の変数 (temp0 がすでに使用中である場合は、temp1 などを使用) に代入して常時表示コンソールを開くことにより、コンソールのコマンドラインを使用してノードと対話できます。 |
| すべて展開 |
Firefox 44 の新機能 |
| 折りたたむ |
Firefox 44 の新機能 |
| (貼り付け) Inner HTML | クリップボード内のコンテンツを、ノードの innerHTML として貼り付ける |
| (貼り付け) Outer HTML | クリップボード内のコンテンツを、ノードの 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 を追加できます。要素のタグを変更する、既存の要素を変更する、新たな要素を追加するといったことが可能です。ボックスの外部をクリックすると、変更点をページに適用します。
コピーと貼り付け
ポップアップメニューを使用して、HTML ツリー内のノードのコピーや希望する場所へノードを貼り付けることができます。
ドラッグ・アンド・ドロップ
HTML ツリーでノードを移動することができます。要素をクリックアンドホールドして、ツリー内でドラッグしてください。マウスボタンを離すと、対応する場所に要素を挿入します:
Firefox 44 より、Esc キーを押下するとドラッグ・アンド・ドロップをキャンセルできます。
新しいノードを挿入する
Firefox 48 より、マークアップビューの上部に "+" 印のアイコンがあります:
このアイコンをクリックすると、現在選択している要素の最後の子要素として、空の <div> 要素をドキュメントに挿入します。そしてドキュメント内の他のノードと同様に、新しいノードの内容やスタイルを編集できます。
ポップアップメニューの "Create New Node" を使用して、同じ機能にアクセスできます。
最後に子要素を追加しても効果がないタイプの要素 (例えば <html> や <iframe> 要素など) を選択しているときは、このボタンが無効になりますので注意してください。ただし、<div> を挿入することが無効である場所 (<style> や <link> など) では有効になります。このような場合は、要素をテキストとして挿入します。