3ペインモードのページインスペクタ

この記事では、ページインスペクタの3ペインモードを使用する方法について説明します。

機能の概要

Firefox 62以降では、ページインスペクター に新しいモード (3ペインモード) が用意されています。これを有効にすると、同時に以下を見ることができます:

The firefox page inspector in 3 pane mode, with HTML pane on left, CSS rules pane in center, and CSS tool tabs on right

Note: 幅の狭いブラウザウィンドウの幅では、CSSルールペインの下にタブが表示されます。

独自のペインに CSS ルールを設定すると、HTML を検査して CSS を編集するだけでなく、計算されたスタイルやグリッドなどの CSS 機能にリアルタイムで反映させることができます。効果を見るには、該当するタブを開いておく必要があります。

簡単なウォークスルー

3ペインのインスペクタはデフォルトで無効になっています。 これは、左側のタブペインにあるトグルコントロールで有効になります。

a view of the tabs panel, showing the 2 to 3 pane toggle icon

トグルコントロールを押して、2ペインと3ペインの表示を切り替えます。

The firefox page inspector in 2 pane mode, with HTML pane on left and CSS tool tabs on right

The firefox page inspector in 3 pane mode, with HTML pane on left, CSS rules pane in center, and CSS tool tabs on right

3ペインモードを有効にすると、ページに適用されたルールを編集するときに CSS 機能の実際の変更を確認できます。 たとえば、CSS グリッドプロパティを編集し、グリッドインスペクタですぐに変更を観察できます。

Firefox 62 以前で3ペインのインスペクタを有効にする

以前のバージョンの Firefox (Firefox 59/60 以降) では、about:config に移動して次の prefs を true に切り替えることで、Release/Beta で3ペインモードを有効にすることができます:

devtools.inspector.split-rule-enabled — 3ペインモードのオンとオフを切り替えます。

devtools.inspector.split-sidebar-toggle — これにより UI トグルボタンが追加され、オン/オフを切り替えることができます。

Firefox 61 では、これらの設定が次のように変更されました。

  • devtools.inspector.three-pane-enabled
  • devtools.inspector.three-pane-toggle

Firefox 61の機能をテストするには、リリース/ベータ版でこれらの2つを true に切り替える必要があります。

Note: 3ペインのインスペクタは、Firefox 62 より前のNightly/Developer 版ですでに有効になっています。

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

このページの貢献者: silverskyvicto, akiyoshi-qui
最終更新者: silverskyvicto,