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 a Firefox OS device or Firefox for Android. See remote debugging to learn how to connect the developer tools to a remote target.
To find your way around the Inspector, here's a quick tour of the UI.
To find out what you can do with the Inspector, see the following how to guides:
<p>Use the Page Inspector to examine and modify the HTML and CSS of a page.</p> <p>You can examine pages loaded in the local copy of Firefox or in a remote target such as a Firefox OS device or Firefox for Android. See <a href="/en-US/docs/Tools/Remote_Debugging">remote debugging </a>to learn how to connect the developer tools to a remote target.</p> <hr /> <h2 id="User_Interface_Tour">User Interface Tour</h2> <p>To find your way around the Inspector, here's a <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour">quick tour of the UI</a>.</p> <hr /> <h2 id="How_to">How to</h2> <p>To find out what you can do with the Inspector, see the following how to guides:</p> <div class="column-container"> <div class="column-half"> <dl> <dt><a href="/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector">Open the Inspector</a></dt> <dd> </dd> <dt><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">Examine and edit HTML</a></dt> <dd> </dd> <dt><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examine and edit the box model</a></dt> <dd> </dd> <dt><a href="/en-US/docs/Tools/Page_Inspector/How_to/Inspect_and_select_colors">Inspect and select colors</a></dt> <dd> </dd> <dt><a href="/en-US/docs/Tools/Page_Inspector/How_to/View_fonts">View fonts</a></dt> <dd> </dd> <dt><a href="/en-US/docs/Tools/Page_Inspector/How_to/Visualize_transforms">Visualize transforms</a></dt> <dd> </dd> <dt><a href="/en-US/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_API">Use the Inspector API</a></dt> <dd> </dd> </dl> </div> <div class="column-half"> <dl> <dt><a href="/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element">Select an element</a></dt> <dd> </dd> <dt><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examine and edit CSS</a></dt> <dd> </dd> <dt><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners">Examine event listeners</a></dt> <dd> </dd> <dt><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations">Work with animations</a></dt> <dd> </dd> <dt><a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters">Edit CSS filters</a></dt> <dd> </dd> <dt><a href="/en-US/docs/Tools/Page_Inspector/How_to/View_background_images">View background images</a></dt> <dd> </dd> <dt><a href="/en-US/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_from_the_Web_Console">Use the Inspector from the Web Console</a></dt> <dd> </dd> <dd> </dd> </dl> </div> </div> <hr /> <h2 id="Reference">Reference</h2> <div class="column-container"> <div class="column-half"> <dl> <dt><a href="/en-US/docs/Tools/Page_Inspector/Keyboard_shortcuts">Keyboard shortcuts</a></dt> <dd> </dd> </dl> </div> <div class="column-half"> <dl> <dt><a href="/en-US/docs/Tools/Tools_Toolbox#Inspector">Settings</a></dt> <dd> </dd> </dl> </div> </div>