{{ToolsSidebar}}
本記事は、インスペクターのユーザーインターフェイスの主要部を紹介するクイックツアーです。
ここでは、インスペクターの UI に存在する 3 つのトップレベルコンポーネントを扱います:
本ガイドは、あえて可能な限り簡潔にします。そしてインスペクターの使い方を詳しく説明する、さまざまなハウツーガイドへリンクします。
インスペクターは、選択中の要素に関する詳細情報を提供します。要素選択ボタンは、調査する要素を選択する手段のひとつです:
このボタンは、実際は ツールボックスのツールバー の一部ですので、インスペクター以外のツールからでも即座にアクセスできます。
要素の選択方法については、要素を選択する のガイドをご覧ください。
インスペクターは 2 つのペインに分かれています。左半分は HTML ペインが占めています:
HTML ペインの構造について詳しくは、HTML の調査と編集 のガイドをご覧ください。
インスペクターの右半分は、CSS ペインが占めています:
CSS ペインは 5 つのビューに分かれています:
ペインの上部にあるタブを使用して、別のビューに切り替えます。
メモ: Firefox 62 以降では、ルールビューを CSS ペインの他のタブとは別の独自のペインに分割することができます。これは3ペインモードと呼ばれます。
ルールビューでは選択した要素に適用しているすべてのルールを、具体性が高いものから低いものの順に並べています:
詳しくは CSS の調査と編集 をご覧ください。
計算済みビューでは選択した要素について、各 CSS 属性の計算済みの値と、要素のボックスモデルを編集可能な形で視覚化したものを表示します。
ボックスモデルビューについて詳しくは、ボックスモデルの調査と編集 をご覧ください。Firefox 50 より前のバージョンでは、ボックスモデルビューを [計算済みビュー] タブの中ではなく、個別のタブで表示していました。
このビューに表示される CSS 宣言について詳しくは、計算済み CSS の調査 をご覧ください。
フォントビューでは、ページ内で使用しているすべてのフォントを、編集可能なサンプルを使用して表示します。
詳しくは フォントを確認する をご覧ください。
アニメーションビューでは、選択した要素に適用されているアニメーションの詳細情報を表示します。また、アニメーションを一時停止する機能もあります:
詳しくは アニメーションを扱う をご覧ください。