Difference between revisions of "Use the Inspect Element in Mozilla Firefox"
(importing article from wikihow) |
m (Text replacement - "== Video ==" to "") |
||
| (8 intermediate revisions by the same user not shown) | |||
| Line 4: | Line 4: | ||
== Steps == | == Steps == | ||
===Inspecting Elements=== | ===Inspecting Elements=== | ||
| − | #Update Firefox (optional). You may not have access to all the features described here if you have an old version of Firefox. [[Find | + | #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|Checking your Firefox version]] will automatically download the latest update. |
#*Firefox 9 and earlier does not have the Inspect Element tool at all. | #*Firefox 9 and earlier does not have the Inspect Element tool at all. | ||
#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 {{keypress|control}}. | #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 {{keypress|control}}. | ||
#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. | #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. | ||
| − | #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:<ref>https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/UI_Tour</ref> | + | #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:<ref name="rf1">https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/UI_Tour</ref> |
#*The top row is the Toolbox Toolbar. This has several developer tools, but we're interested in {{button|Inspector}} on the left. Keep this selected (highlighted in blue) for this entire guide. | #*The top row is the Toolbox Toolbar. This has several developer tools, but we're interested in {{button|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. | #*Below the toolbar, there's a single Breadcrumbs row of HTML elements, showing the full path relating to the selected element. | ||
| Line 14: | Line 14: | ||
#*The pane to the right displays the CSS stylesheet for this page. | #*The pane to the right displays the CSS stylesheet for this page. | ||
#Select another element. Once the toolbar is open, selecting another element is easy. Here are three ways to do it: | #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+).<ref>https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML</ref> Click the HTML to select that element. | + | #*Hover over a line of HTML to highlight the corresponding element (requires Firefox 34+).<ref name="rf2">https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML</ref> 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. | #*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. | ||
| − | #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+).<ref>https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element</ref> This is useful for elements too small to select by hand. | + | #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+).<ref name="rf3">https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element</ref> 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 <nowiki><head></nowiki>, and elements that have been hidden with the CSS display property.<ref | + | #*Grey HTML relates to elements not displayed on the page. This includes comments, certain nodes such as <nowiki><head></nowiki>, and elements that have been hidden with the CSS display property.<ref name="rf2" /> |
| − | #*Click the arrow to the left of containers to expand or hide its contents. To expand all contents, hold {{button|Alt}} or {{button|option}} while clicking.<ref | + | #*Click the arrow to the left of containers to expand or hide its contents. To expand all contents, hold {{button|Alt}} or {{button|option}} while clicking.<ref name="rf2" /> |
#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. | #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. | ||
| Line 24: | Line 24: | ||
#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. | #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. | ||
#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. | #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. | ||
| − | #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:<ref | + | #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:<ref name="rf2" /> |
#*"Edit as HTML" makes the node and all its contents editable in the HTML tree, instead of having to edit each line individually. | #*"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 <nowiki><div> or <body></nowiki> | #*"Copy Inner HTML" copies all the contents of the node, while "Copy Outer HTML" copies the node as well (such as <nowiki><div> or <body></nowiki> | ||
| Line 30: | Line 30: | ||
#* :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). | #* :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). | ||
#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. | #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.<ref | + | #*This requires Firefox 39 or later.<ref name="rf2" /> |
#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. | #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. | ||
| − | + | ||
| − | + | ||
== Tips == | == Tips == | ||
| − | *You can also open the toolbar with these top menu options:<ref>https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox</ref><br><br> | + | *You can also open the toolbar with these top menu options:<ref name="rf4">https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox</ref><br><br> |
**Windows: {{button|Firefox}} → {{button|Web Developer}} → {{button|Toggle Tools}} | **Windows: {{button|Firefox}} → {{button|Web Developer}} → {{button|Toggle Tools}} | ||
**Mac or Linux: {{button|Tools}} → {{button|Web Developer}} → {{button|Toggle Tools}} | **Mac or Linux: {{button|Tools}} → {{button|Web Developer}} → {{button|Toggle Tools}} | ||
| − | *Firefox 40 introduced the option to hide the CSS pane to give you more space while editing HTML.<ref | + | *Firefox 40 introduced the option to hide the CSS pane to give you more space while editing HTML.<ref name="rf1" /> 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 | + | *The CSS pane is also editable, but that is beyond the scope of this guide. [[Learn CSS Code|This article]] teaches CSS basics. |
== Related Articles == | == Related Articles == | ||
