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.
From Firefox 62 onwards, 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.
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
- Use the Inspector API
- 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