Using Firebug in Windows XP Home - Inspecting HTML
(Page 3 of 4 )
Before we can edit HTML, we must know how to inspect it. First we launch Firebug using F12, and then click the Inspect element button/tab (see screenshot below inside the dotted red box).
When the inspect element tab is activated, you can freely move your mouse to point to the element you would like to inspect. If the mouse pointer appears to be out of control and you find it hard to inspect the element, just close Firebug by clicking "off" located in the right section of the tab, then start it again.
You will need to practice some to gain the skill to point to the element you wish you inspect. Sometimes it requires you to suddenly move your mouse or perform some specific kind of mouse coordination to move the arrow to the correct element.
Again, do not feel discouraged if you experience a few problems with this; it is normal. You can close Firebug and then start again.
IMPORTANT: To hold the element to be inspected steady, press the "right click" button on your mouse once. This should hold your chosen element in the Firebug console, and thus it will not move regardless of whether your mouse arrow moves again.
The inspect element window consists of two major parts, the HTML window and the CSS (style window). The HTML window is on the left side, while the CSS window is on the right side. As you inspect the HTML element, Firebug also gives you the style of that page. This makes Firebug a very flexible tool.
As an example of inspecting HTML elements, I have inspected the word "Dictionary" (which Firebug encloses it inside the blue box to signify as an inspected element).
Shaded in light green in the Firebug console is the actual HTML code representing "Dictionary." On the right side is the CSS (Style) console where the underlined elements are the style directly affecting the inspected elements.
Next: Editing HTML and seeing the results in real time >>
More BrainDump Articles
More By Codex-M
/ 5 
