MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

UI ツアー

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

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

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

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

要素選択ボタン

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

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

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

HTML ペイン

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

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

CSS ペイン

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

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

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

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

ルールビュー

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

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

計算済みビュー

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

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

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

フォントビュー

Firefox 47 に限り、フォントビューはデフォルトで無効にしています。Firefox 47 でフォントビューを使用したい場合は about:config を開いて、設定項目 devtools.fontinspector.enabled を探して true に変更してください。

Firefox 46 以前および 48 以降では、フォントビューがデフォルトで有効です。

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

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

アニメーションビュー

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

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

CSS ペインを開く/隠す

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

ドキュメントのタグと貢献者

タグ: 
 このページの貢献者: yyss
 最終更新者: yyss,