Source code
Revision control
Copy as Markdown
Other Tools
# 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 <ui_tour/index>`.
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 <how_to/open_the_inspector/index>`
- {doc}`Examine and edit HTML <how_to/examine_and_edit_html/index>`
- {doc}`Examine and edit the box model <how_to/examine_and_edit_the_box_model/index>`
- {doc}`Inspect and select colors <how_to/inspect_and_select_colors/index>`
- {doc}`Reposition elements in the page <how_to/reposition_elements_in_the_page/index>`
- {doc}`Edit fonts <how_to/edit_fonts/index>`
- {doc}`Visualize transforms <how_to/visualize_transforms/index>`
- {doc}`Select an element <how_to/select_an_element/index>`
- {doc}`Examine and edit CSS <how_to/examine_and_edit_css/index>`
- {doc}`Examine event listeners <how_to/examine_event_listeners/index>`
- {doc}`Work with animations <how_to/work_with_animations/index>`
- {doc}`Edit CSS filters <how_to/edit_css_filters/index>`
- {doc}`Edit CSS shapes <how_to/edit_css_shapes/index>`
- {doc}`View background images <how_to/view_background_images/index>`
- {doc}`Use the Inspector from the Web Console <how_to/use_the_inspector_from_the_web_console/index>`
- {doc}`Examine CSS grid layouts <how_to/examine_grid_layouts/index>`
- {doc}`Examine CSS flexbox layouts <how_to/examine_flexbox_layouts/index>`
- {doc}`Use the Accessibility Inspector <../accessibility_inspector/index>`
## Reference
- {ref}`Keyboard shortcuts <keyboard-shortcuts-page-inspector>`
- {ref}`Settings <settings-inspector>`