Firefox's "Examine Item" developer tool lets you accurately find the HTML code for anything you see on your web page. The HTML code and the attached CSS stylesheet are fully editable once these tools are used. Test them out by making any changes you want, then refresh the page to get back to the original look of the web page.
Steps
Part 1 of 2: inspecting elements
Step 1. Update Firefox (optional)
You may not have access to all of the features mentioned here if you have an older version of Firefox. Checking which version of Firefox you have will automatically start downloading the latest update.
Firefox 9 and older do not have the Examine Item tool
Step 2. Right click on any element of a web page of your choice
You can right click on images, text, wallpapers or any other item. If you have a mouse that doesn't have two buttons, left click while holding Ctrl.
Step 3. From the drop-down menu, click Examine Item
A toolbar should appear at the bottom of your window. A panel will also appear below this toolbar, displaying the HTML code for the page.
Step 4. Identify the toolbars and panels
When you select Examine Item, several panels will open at the bottom of your window. Here is a detailed explanation of their names and uses.
- The top row is the "Toolbox" toolbar. You'll find several developer tools there, but we'll take a closer look at the Inspector tab on the left. Leave it selected (with a blue highlight) for the duration of this guide.
- Below this toolbar is a single row of HTML elements named "Breadcrumbs", which shows you the entire path corresponding to the selected element.
- The panel below this line shows the HTML tree, also called the "tag view", of the page. The HTML code for the item you selected is highlighted and centered in this panel.
- The panel on the right displays the CSS stylesheet corresponding to that page.
Step 5. Choose another item
Once the toolbar is open, it is easy to select another item. Here are three ways to do it.
- Hover over a line of HTML code to highlight the corresponding item (you will need Firefox 34+). Click on the HTML code to select this item.
- Click on the Select a page element function located on the far left of the toolbar: the icon is a cursor over a square. Move your cursor over the page to highlight items and then click to select an item.
Step 6. Browse the code
Click anywhere in the HTML panel. Use the left and right arrows on your keyboard to navigate through the code (this requires Firefox 39+). This will be useful for items that are too small to manually select.
- The HTML code in gray corresponds to the elements that are not displayed on the page. Among them are comments, some like tags and elements that have been hidden by the CSS display configuration.
- Select the arrow on the left of the paragraphs of lines of code to display or not their content. To display all lines of code, press Alt or option while clicking.
Step 7. Find an item
Find the search bar (magnifying glass icon) to the far right of the Breadcrumbs row. Click on it to make it larger, then enter the portion of HTML code you are looking for. As you type, a small window will appear containing a list of items that match your query. Select an element by clicking on it and see its code in the HTML panel.
Part 2 of 2: edit the HTML code
Step 1. Refresh the page when you want to start over
If web development tools are new to you, be aware that they don't allow you to make permanent changes. Your changes will only be visible on your screen and only until you close the page or refresh it. Do not hesitate to experiment even if you are not sure what is going to happen.
Step 2. Double click on the HTML code to edit the text
Double-click on a line of HTML code. Type the new text then press Enter to save your changes.
Step 3. Keep clicking on a feature for more options
Remember, the Breadcrumbs toolbar sits between the full HTML tree and the top toolbar. Hold down the click on one of the items in that row to open an extended menu. Here is a non-exhaustive guide to these options.
- "Edit as HTML" makes the tag and everything it contains in the HTML tree editable, rather than editing each line individually.
- "Copy inside HTML" copies all the content of the tag, while "Copy outside HTML" also copies the tag (like or).
- “Paste…” takes you to several options for where to paste, such as before the tag or after the first child tag.
- : hover,: active, and: focus change the appearance of the element when the user interacts with it. The exact effect is determined by the CSS stylesheet (editable in the right panel).
Step 4. Click and drag
To change the arrangement of code elements, keep clicking on the HTML code until a dotted line appears. Go up or down the tree and release the click when the dotted line is in the right place.
You will need Firefox 39 or later for this
Step 5. Close the developer toolbar
To close all those wacky windows, just hit the X in the far right corner of the toolbar, above the CSS panel.
Advice
- You can open the toolbar with these options located in the top menu.
-
Windows:
Firefox → Development → Development tools
-
Mac or Linux:
Tools → Development → Development tools
- Firefox 40 introduced the option to hide the CSS panel in order to have more space when you edit the HTML code. Look for the arrow icon to the far right of the Breadcrumbs row, to the right of the search bar. Select this icon to hide the CSS panel and click it again to expand it.
- The CSS panel is also editable, but that's beyond the scope of this guide. this article teaches you the basics of CSS.