"Inspect Element" is a developer tool in the Firefox browser that you can use to track HTML code on any web page. The HTML and CSS stylesheets of a web page can be edited with "Inspect Element". You can try to edit a page however you like and get it back to the way it was by simply reloading the edited webpage.
Step
Part 1 of 2: Checking Elements
Step 1. Update Firefox (optional)
It's possible that you won't be able to access the features discussed in this article if you're using an older version of Firefox. The update will be installed automatically when you check which version of Firefox you are using.
Firefox 9 and earlier versions don't have the "Inspect Element" tool at all
Step 2. Right-click any webpage element
You can right-click any image, text, background, or element. If your mouse has only one button, a combination of left-click and the Control key will result in a right-click.
Step 3. Click "Inspect Element" from the drop-down menu
A toolbar will appear at the bottom of the window. A panel below the toolbar will also appear and display the HTML code on the active page.
Step 4. Get to know the existing toolbars and panels
When you use "Inspect Element", several panels will open below the browser window. The following describes the names and functions of the toolbars and panels in "Inspect Element":
- On the top row is the Toolbox Toolbar. There are several tools to be found here, but we'll focus on the Inspector button on the left. Make sure this button is active (indicated by the color of the button that turns blue when active) throughout this guide.
- Below that, there are a line of HTML elements' breadcrumbs that indicate the location of the currently selected element.
- The pane under the navigation prompts shows the HTML tree or "Markup View" of the web page. The HTML of the selected element will be marked and centered in this pane.
- The pane on the right displays the current web page's CSS stylesheet.
Step 5. Select another element
When the toolbar is open, you can easily select other elements. There are three ways to do this:
- Hover over a line of HTML to mark the selected element (this feature requires Firefox 34+). Click the HTML to select that element.
- Click the "Select Element" tool in the left corner of the toolbar: it has a cursor-shaped icon above a box. Move the cursor on the web page to mark an element and click to select it.
Step 6. Trace the HTML code
Click anywhere in the HTML pane. Use the left and right directional keys on the keyboard to move from code to code (this feature requires Firefox 39+). This method is useful for selecting elements that are too small to be selected with the cursor.
- Grayed out HTML indicates elements that are not displayed on the page. The elements included in this are comments, like nodes, and other elements hidden by the CSS display property.
- Click the arrow to the left of the box to show or hide the content. To display the entire content, hold down alt=""Image" or option while clicking the arrow.</li" />
Step 7. Locate the element
Look for the search field (loop-shaped icon) in the far right corner of the breadcrumbs row. Click to expand the search field and type the HTML code you want to search for. As you type, a pop-up will be displayed showing matching search results. Click an element from the search results and scroll the HTML pane to the code you're looking for.
Part 2 of 2: Editing HTML
Step 1. Reload the page to start over
If you're new to website development tools, be aware that you don't make permanent changes to the pages you edit. Your edits only appear on your screen until you reload or close the page. Feel free to experiment even if you don't know what will happen.
Step 2. Double click the HTML to edit
Double click inline HTML. Type the new text and hit enter to save the changes.
Step 3. Click and hold the tool in the breadcrumb to bring up more options
Note that the breadcrumb toolbar sits between the HTML tree and the toolbar above it. Click and hold a tool in this row to open more menus. Below is a hint of the available options (not exhaustive):
- "Edit as HTML" allows you to edit all HTML content from the HTML tree directly instead of editing each line.
- "Copy Inner HTML" copies the entire content inside the node, while "Copy Outer HTML" copies the contents and nodes (such as or
- "Paste →" brings up several options where to paste the copy, such as before the node or after the node's first child.
- :hover,:active, and:focus change the appearance of the element when the user interacts. Changed effects are defined from the CSS stylesheet (Editable from the panel on the right).
Step 4. Drag and drop
To rearrange elements in the code, click and hold the HTML until a dotted line appears. Move the line up and down the tree and release the mouse button when the line is where you want it.
This feature requires Firefox 39 and later
Step 5. Close the developer toolbar
To close the entire Inspect Element window, click the X button in the upper right corner of the toolbar located above the CSS panel.
Tips
- You can also open the toolbar from the menu options at the top of the window:
- Windows: Firefox → Web Developer → Toggle Tools
- Mac or Linux: Tools → Web Developer → Toggle Tools
- Firefox 40 has the option to hide the CSS panel so you have more room to edit HTML. Look for the arrow icon in the far right corner of the breadcrumbs row and to the right of the search field. Click this icon to hide the CSS panel and click it again to reveal it.
- You can also edit CSS panels, but they are not listed in this article. You can find instructions for editing CSS code on the internet.
