How to use the Examine Item option in Mozilla Firefox

How to use the Examine Item option in Mozilla Firefox
How to use the Examine Item option in Mozilla Firefox
Anonim

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

Use the Inspect Element in Mozilla Firefox Step 1

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

Use the Inspect Element in Mozilla Firefox Step 2

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.

Use the Inspect Element in Mozilla Firefox Step 3

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.

Use the Inspect Element in Mozilla Firefox Step 4

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.
Use the Inspect Element in Mozilla Firefox Step 5

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.
Use the Inspect Element in Mozilla Firefox Step 6

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.
Use the Inspect Element in Mozilla Firefox Step 7

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

Use the Inspect Element in Mozilla Firefox Step 8

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.

Use the Inspect Element in Mozilla Firefox Step 9

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.

Use the Inspect Element in Mozilla Firefox Step 10

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).
Use the Inspect Element in Mozilla Firefox Step 11

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

Use the Inspect Element in Mozilla Firefox Step 12

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.

Popular by topic