============== 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 `