Using Firebug to Inspect an Web Page

From Zanecorpwiki

First, get the firebug plugin (TODO: ref) for Firefox . You now have a control in the bottom right hand corner of your Firefox browser. It shows up as either a white check in a green circle or white x in a red circle. If firebug is currently disabled, the control renders as a grey circle. Clicking the control will bring up the firebug split screen. If firebug is disabled, enable it.

There are two wages to look at a page structure. You can click the 'inspect' button in the top level menu in the firebug split screen. Now as you move the cursor around the page, you'll see the different HTML elements highlighting. Clicking any one will bring the element in the HTML structure browser in the firebug window. Or, you can go straight to the structure browser by clicking the HTML view in the menu for the left hand part of the firebug split screen and navigate the document tree. Notice that as you select elements in firebug, they highlight on the screen.

This is very useful to determine what style is set and where the style is set (element, page, or separate CSS file). On the right hand side of the firebug split, you see the different element views. 'Style' shows the CSS stylings, layout shows the calculated offsets, borders, and paddings, and DOM shows the raw data attached to the element. In the style view, it will list the most tightly bound styles first, followed by lower priority stylings. Overridden stylings will be crossed out. On the right hand side of each selector, you can see where the style is defined and even jump to the line in the indicated file by clicking the file name/line number.