UI ツアー

本記事は、インスペクタのユーザインターフェイスの主要部を紹介するクイックツアーです。

ここでは、インスペクタの UI に存在する 3 つのトップレベルコンポーネントを扱います:

• "ページから要素を選択します" ボタン
• HTML ペイン
• CSS ペイン

本ガイドは、あえて可能な限り簡潔にします。そしてインスペクタの使い方を詳しく説明する、さまざまなハウツーガイドへリンクします。

要素選択ボタン

インスペクタは、選択中の要素に関する詳細情報を提供します。要素選択ボタンは、調査する要素を選択する手段のひとつです:

このボタンは、実際はツールボックスのツールバーの一部ですので、インスペクタ以外のツールからでも即座にアクセスできます。

要素の選択方法については、要素を選択するのガイドをご覧ください。

HTML ペイン

インスペクタは 2 つのペインに分かれています。左半分は HTML ペインが占めています:

HTML ペインの構造について詳しくは、HTML の調査と編集のガイドをご覧ください。

CSS ペイン

インスペクタの右半分は、CSS ペインが占めています:

CSS ペインは 4 つのビューに分かれています:

• ルールビュー
• 計算済みビュー
• フォントビュー
• アニメーションビュー

ペインの上部にあるタブを使用して、別のビューに切り替えます。

ルールビュー

ルールビューでは選択した要素に適用しているすべてのルールを、具体性が高いものから低いものの順に並べています:

詳しくは CSS の調査と編集 をご覧ください。

計算済みビュー

計算済みビューでは選択した要素について、各 CSS 属性の計算済みの値と、要素のボックスモデルを編集可能な形で視覚化したものを表示します。

ボックスモデルビューについて詳しくは、ボックスモデルの調査と編集をご覧ください。Firefox 50 より前のバージョンでは、ボックスモデルビューを "計算済みビュー" タブの中ではなく、個別のタブで表示していました。

このビューに表示される CSS 宣言について詳しくは、計算済み CSS の調査をご覧ください。

フォントビュー

フォントビューでは、ページ内で使用しているすべてのフォントを、編集可能なサンプルを使用して表示します。

詳しくはフォントを確認するをご覧ください。

アニメーションビュー

アニメーションビューでは、選択した要素に適用されているアニメーションの詳細情報を表示します。また、アニメーションを一時停止する機能もあります:

詳しくはアニメーションを扱うをご覧ください。

CSS ペインを開く/隠す

Firefox 40 より、CSS ペインを表示および隠すことができるボタンがツールバーにあります: