mozilla

UI Tour

This article is a quick tour of the main sections of the Page Inspector's user interface.

It covers the three top-level components of the Inspector's UI:

  • the "Select element" button
  • the HTML pane
  • the CSS pane

This guide is intentionally kept as short as possible. It links to various how to guides for the details of how to work with the Inspector.

Select element button

The Inspector gives you detailed information about the currently selected element. The Select element button is one way you can select an element for inspection:

Note that it's actually part of the main toolbox toolbar, so it's immediately accessible from any tool, not just the Inspector.

To learn how to select an element, see the guide to selecting an element.

HTML pane

The Inspector is split into two halves. The left-hand half is occupied by the HTML pane:

To learn more about the structure of the HTML pane, see the guide to examining and editing HTML.

CSS pane

The right-hand side of the Inspector is occupied by the CSS pane:

The CSS pane is divided into 5 views:

  • Rules view
  • Computed view
  • Fonts view
  • Box Model view
  • Animations view

Use the tabs along the top to switch between the different views.

Rules view

The Rules view lists all the rules that apply to the selected element, ordered from most-specific to least-specific:

See Examine and edit CSS for more details.

Computed view

The Computed view shows you the complete computed CSS for the selected element.

See Examine and edit CSS for more details.

Fonts view

The Fonts view shows all the fonts in the page along with editable samples.

See View fonts for more details.

Box Model view

The Box Model view provides an editable view of the selected element's box model.

See Examine and edit the box model for more details.

Animations view

The Animations view gives you details of any animations applied to the selected element, and a controller to pause them:

 

See Work with animations for more details.

Show/hide CSS pane

From Firefox 40 onwards, there's a button in the toolbar that you can use to show or hide the CSS pane:

Document Tags and Contributors

Contributors to this page: wbamberg, jsx, kscarfone
Last updated by: jsx,