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ルールペインの下にタブが表示されます。

Having the CSS Rules in their own pane is very useful because it allows you to not only inspect your HTML and edit the CSS applied to it, but also see the effect this has on CSS features such as computed styles and grids in real time. You just need to have the relevant tab open to see the effect.

簡単なウォークスルー

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

With the 3-pane mode enabled, you can observe live changes in CSS features as you edit the rules applied to the page. For example, you could edit a CSS Grid property and observe the change immediately in the Grid Inspector.

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

In earlier versions of Firefox (since Firefox 59/60), you can enable 3 pane mode in Release/Beta by going to about:config and flipping the following prefs to true:

devtools.inspector.split-rule-enabled — this switches 3-pane mode on and off.

devtools.inspector.split-sidebar-toggle — this adds the UI toggle button that lets you toggle it on and off.

In Firefox 61, these preferences got renamed to:

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

You need to flip these two to true in Release/Beta to test the feature in Firefox 61.

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

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

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