Difference between revisions of "Use the Inspect Element in Mozilla Firefox"
m (Update ref tag) |
m (Text replacement - "== Video ==" to "") |
||
| (7 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}}. | ||
| Line 33: | Line 33: | ||
#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 == | ||
| Line 41: | Line 41: | ||
**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 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. | *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 == | ||
