Page inspector 3-pane mode

This article explains how to use the Page Inspector's 3-pane mode.

Feature summary

From Firefox 62 onwards, the Page Inspector has a new mode available — 3-Pane mode. When activated, this allows you to see the following simultaneously:

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: At narrower browser window widths, the tabs appear below the CSS Rules pane.

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.

A brief walkthrough

The 3-pane inspector is disabled by default. It is enabled via a toggle control found in the tabs pane on the left hand side.

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

Press the toggle control to toggle between the 2- and 3-pane views.

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.

Enabling the 3-pane inspector pre-Firefox 62

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: The 3-pane inspector is already enabled in Nightly/Developer edition before Firefox 62.