Pane’s Section

The pane’s section comprises various panes that provide CSS code and specific property information. You can have a three-pane inspector where you get the DOM section, the rules pane in the middle section, and the rest of the panes in the third right section. This three-pane inspector can be toggled using the button present in the top-left corner of the pane section.

• Rules Pane: The rules pane displays the various properties of the elements along with pseudo-elements and also CSS variables under the respective class names. You also get various options, which are:
  • Filter Styles: You can filter the class name, properties, and their values.
  • Toggle Pseudo-Classes: This option provides various checkboxes to toggle the pseudo-class of the selected element, such as hover, active, focus, etc.
  • Toggle Classes: Use this to add new classes to the styles and check or uncheck each of them individually accordingly.
  • Add new rule: Use this to add a new block of CSS code with a class name or element name with respect to the selected element.
  • Toggle light color scheme: If the web page has prefers-color-scheme in Media Query, you can set it to light by selecting this option.
  • Toggle dark color scheme: If the web page CSS code has prefers-color-scheme in Media Query, you can set it to dark by selecting this option.
  • Toggle print media simulation: If the web page CSS code has a print media query, then you can activate it by selecting this option.

• Layout Pane: You can view the layout information of the selected element. If it’s Flexbox, you can change the flexbox highlight color, and you also have a button to toggle the flexbox highlight. If it’s a grid, then you can change the grid highlight color, toggle line numbers, area names, and extend lines. You also get the box model with the values of the selected element, which you can modify by double-clicking on them.

• Computed Pane: List only the CSS properties of the selected elements. You can also filter the properties on the basis of property type and value. You can view all possible properties supported by the browser by checking the Browser Styles.

• Changes Pane: Displays all the changes made to the CSS using the Inspector panes. You also get the option to Copy All Changes to copy the changes to a clipboard, which you can use to modify the source code.

• Compatibility Pane: Provides the list of properties of selected elements and all possible issues from the whole web page with respect to various top browsers.

• Font Pane: You can change the size, line height, spacing, italics, and weight of the selected element. You can also see the list of all possible fonts on the web page.

• Animations Pane: This pane displays the animation in the selected element; if there is no animation, then it displays the pick an element button, which can be used to pick the element that has animation. The various options it provides are:
  • Rewind the animations. Click this button to reset the animation to its original start.
  • Resume or pause the animations according to your requirements.
  • Speed: You can slow down or speed up the animations by selecting the times using the drop-down list.

The Inspector in Firefox is used to inspect and modify the HTML and CSS code of the web page. The inspector provides the DOM section, where you can view the HTML and modify the DOM by editing or deleting the elements. The inspector also displays the CSS code of the selected elements in the Rules pane and also provides other panes such as layout, computed, changes, compatibility, fonts, and animations, which helps a lot of developers deal with various aspects of the CSS code.