Use the Inspect Element in Mozilla Firefox

Revision as of 08:48, 31 March 2017 by Kipkis (Kipkis | contribs) (importing article from wikihow)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

The Inspect Element developer tool in Firefox allows you pinpoint the HTML code for anything you see on your web page. The HTML and accompanying CSS stylesheet are fully editable once these tools are open. Experiment with any changes you like, then refresh the page to return to the intended appearance of the web page.

Steps

Inspecting Elements

  1. Update Firefox (optional). You may not have access to all the features described here if you have an old version of Firefox. Find-Which-Version-of-Firefox-You-Are-Using will automatically download the latest update.
    • Firefox 9 and earlier does not have the Inspect Element tool at all.
  2. Right-click any webpage element. You can right-click on images, text, backgrounds, or any other element. If you don't have a two-button mouse, left-click while holding Control.
  3. Click Inspect Element from the drop-down menu. A toolbar should appear at the bottom of your window. A pane will also appear below the toolbar, displaying the page's HTML code.
  4. Identify the toolbars and panes. When you click Inspect Element, several panes will open at the bottom of your window. Here's a breakdown of their uses and names:[1]
    • The top row is the Toolbox Toolbar. This has several developer tools, but we're interested in Inspector on the left. Keep this selected (highlighted in blue) for this entire guide.
    • Below the toolbar, there's a single Breadcrumbs row of HTML elements, showing the full path relating to the selected element.
    • The pane below this row shows the HTML tree or "Markup View" of the page. The HTML for the element you selected is highlighted and centered in this pane.
    • The pane to the right displays the CSS stylesheet for this page.
  5. Select another element. Once the toolbar is open, selecting another element is easy. Here are three ways to do it:
    • Hover over a line of HTML to highlight the corresponding element (requires Firefox 34+).[2] Click the HTML to select that element.
    • Click the Select Element tool on the far left of the toolbar: the icon is a cursor over a square. Move your cursor over the page to highlight elements, then click to select an element.
  6. Navigate through the code. Click anywhere in the HTML pane. Use the left and right arrows on your keyboard to move through the code (requires Firefox 39+).[3] This is useful for elements too small to select by hand.
    • Grey HTML relates to elements not displayed on the page. This includes comments, certain nodes such as <head>, and elements that have been hidden with the CSS display property.[4]
    • Click the arrow to the left of containers to expand or hide its contents. To expand all contents, hold Alt or option while clicking.[5]
  7. Search for an element. Look for the search bar (magnifying glass icon) on the far right of the Breadcrumbs row. Click this to expand it, then type in the HTML code you're looking for. As you type, a popup will appear listing matching elements. Click on one to select that element and scroll the HTML pane to its code.

Editing the HTML

  1. Refresh the page to start over at any time. If you're new to web developer tools, understand that they do not make any permanent changes. Your edits will only be visible on your screen, and only until your close the page or refresh it. Don't hesitate to experiment even if you're not sure what will happen.
  2. Double click the HTML to edit text. Double click a line of HTML. Type in the new text and press enter to save your changes.
  3. Click and hold a breadcrumb for more options. Remember, the Breadcrumb toolbar is sandwiched between the full HTML tree and the upper toolbar. Click and hold on any of the elements in this row to open an extensive menu. Here's an incomplete guide to these options:[6]
    • "Edit as HTML" makes the node and all its contents editable in the HTML tree, instead of having to edit each line individually.
    • "Copy Inner HTML" copies all the contents of the node, while "Copy Outer HTML" copies the node as well (such as <div> or <body>
    • "Paste →" leads to several options for where to paste, such as before this node or after the first child of the node.
    •  :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 from the right hand pane).
  4. Drag and drop. To rearrange elements in the code, click and hold the HTML until a dashed line appears. Move it up or down the tree and let go when the dashed line is in the desired place.
    • This requires Firefox 39 or later.[7]
  5. Close the developer toolbar. To close all of these fancy windows, just press the X in the far right corner of the toolbar, above the CSS pane.

Video

Tips

  • You can also open the toolbar with these top menu options:[8]

    • Windows: Firefox → Web Developer → Toggle Tools
    • Mac or Linux: Tools → Web Developer → Toggle Tools
  • Firefox 40 introduced the option to hide the CSS pane to give you more space while editing HTML.[9] Look for the arrow icon on the far right of the Breadcrumbs row, to the right of the search bar. Click this icon to hide the CSS pane, and click it again to expand it again.
  • The CSS pane is also editable, but that is beyond the scope of this guide. Learn-CSS-Code teaches CSS basics.

Related Articles

Sources and Citations

  1. ↑ https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/UI_Tour
  2. ↑ https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML
  3. ↑ https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element
  4. ↑ https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML
  5. ↑ https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML
  6. ↑ https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML
  7. ↑ https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML
  8. ↑ https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox
  9. ↑ https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/UI_Tour
Es:usar la herramienta Inspeccionar Elemento en Mozilla Firefox

It:Usare lo Strumento Ispeziona Elemento in Mozilla Firefox

Retrieved from "https://kipkis.com/index.php?title=Use_the_Inspect_Element_in_Mozilla_Firefox&oldid=49965"