Page Inspector

Use the Page Inspector to examine and modify the HTML and CSS of a page.

You can examine pages loaded in the local copy of Firefox or in a remote target such as Firefox for Android. See remote debugging to learn how to connect the developer tools to a remote target.

User Interface Tour

To find your way around the Inspector, here’s a quick tour of the UI.

You can split the Rules view out into its own pane, separate from the other tabs on the CSS pane — this is called 3-pane mode.

How to

To find out what you can do with the Inspector, see the following how to guides:

• Open the Inspector

• Examine and edit HTML

• Examine and edit the box model

• Inspect and select colors

• Reposition elements in the page

• Edit fonts

• Visualize transforms

• Select an element

• Examine and edit CSS

• Examine event listeners

• Work with animations

• Edit CSS filters

• Edit CSS shapes

• View background images

• Use the Inspector from the Web Console

• Examine CSS grid layouts

• Examine CSS flexbox layouts

• Use the Accessibility Inspector

Reference

• Keyboard shortcuts

• Settings