UI ツアー

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

ここでは、インスペクターの UI に存在する 3 つの最上位コンポーネントを扱います。

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

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

ページから要素を選択ボタン

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

これは Firefox 57 のインスペクターのボタンで、ウェブページの要素を選択するために使用します。

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

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

HTML ペイン

インスペクターは設定に応じて、 2 または 3 枚の部分に分かれています。インスペクターを 3 ペイン表示するかどうかを切り替えることができます。次の画像は 2 ペインレイアウトを表しています。

Firefox 57 の HTML ペインと CSS ペインです。

2 ペインモードでは、インスペクターには HTML ペインと、 6 つのツールが入る CSS ペインが入ります。

  • ルールビュー
  • レイアウトビュー
  • 計算済みビュー
  • 変更点ビュー
  • 互換性ビュー (Firefox Developer Edition 77 以降)
  • フォントビュー
  • アニメーションビュー

以下の画像は 3 ペインモード (Firefox 62 以降で利用可能) を表しており、 CSS ルールビューがインスペクター中央の独立したペインに入ります。以下の画像は 3 ペインモードを表しています。

ご覧の通り、 CSS ペインがインスペクターの中央に移動しました。 HTML ペインの構造について詳しくは、HTML の調査と編集 のガイドを参照してください。

ルールビュー

ルールビューには、選択された要素に適用されているすべてのルールの一覧を、最も詳細度が高いものから最も詳細度が低いものの順で表示します。上記を見てください。

インスペクターのルールビュー

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

レイアウトビュー

レイアウトビューには、そのページのボックスモデルが表示されます。ページにフレックスボックス表示モデルまたは CSS グリッドを使用している部分がある場合、このビューにはそのページで使用されているフレックスボックスまたはグリッドの設定が表示されます。

レイアウトビューについての詳細は、ボックスモデルの調査と編集を参照してください。なお、 Firefox 50 より前では、ボックスモデルビューは [レイアウトビュー] タブの中ではなく、独自のタブに表示されていました。

変更点ビュー

ルールビュー内で編集を行った場合、変更点ビューで行った変更を確認することができます。

変更点ビューのスクリーンショット

計算済みビュー

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

The Computed view within the Inspector.

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

互換性ビュー

Firefox Developer Edition バージョン 77 より、互換性ビューには選択した要素や現在のページ全体に適用されているプロパティについて、CSS の互換性に関する問題があればそれを表示します。プロパティに対応しているブラウザーにはアイコンが表示され、実験的または非推奨のプロパティには注意を表示します。

互換性ビューのスクリーンショット

  • プロパティの名前をクリックすると、 MDN Web Docs のそのプロパティのリファレンス記事が開きます。記事の「ブラウザーの互換性」の節には、そのプロパティのブラウザーの対応についての詳細が記載されています。
  • すべての要素セクションでは、プロパティを使用している要素の名前をクリックすると、その要素がインスペクターで選択されます。特定のプロパティが複数の要素に適用されている場合は、三角形をクリックすると、すべての出現箇所が表示されます。
  • 互換性ビューで確認するブラウザーのセットを設定するには、パネルの下部にある設定をクリックします。

互換性ビューの設定のスクリーンショット

関心のないブラウザーのチェックボックスを外してください。新しいバージョンのブラウザーがリリースされると、この一覧のバージョン番号が更新されます。

フォントビュー

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

Firefox 57 のすべてが新しいインスペクターパネル。

詳しくはフォントの編集を参照してください。

アニメーションビュー

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

Firefox 57 インスペクターのアニメーションペインです。

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