# 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 {doc}`about debugging <../about_colon_debugging/index>` 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 {doc}`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 {doc}`3-pane mode <3-pane_mode/index>`. ## How to To find out what you can do with the Inspector, see the following how to guides: - {doc}`Open the Inspector ` - {doc}`Examine and edit HTML ` - {doc}`Examine and edit the box model ` - {doc}`Inspect and select colors ` - {doc}`Reposition elements in the page ` - {doc}`Edit fonts ` - {doc}`Visualize transforms ` - {doc}`Select an element ` - {doc}`Examine and edit CSS ` - {doc}`Examine event listeners ` - {doc}`Work with animations ` - {doc}`Edit CSS filters ` - {doc}`Edit CSS shapes ` - {doc}`View background images ` - {doc}`Use the Inspector from the Web Console ` - {doc}`Examine CSS grid layouts ` - {doc}`Examine CSS flexbox layouts ` - {doc}`Use the Accessibility Inspector <../accessibility_inspector/index>` ## Reference - {ref}`Keyboard shortcuts ` - {ref}`Settings `