Page Inspector - Firefox Developer Tools 编辑

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
• 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
• Use the Accessibility Inspector

Reference

• Keyboard shortcuts
• Settings