Mozilla Firefox has a very powerful add-on tool called Firebug. Firebug allows web developers to inspect web pages to do such things as identify CSS styles being applied to sections of a page, easily inspect sections of a page, and to tweak style values to properly determine values for padding, font sizes, margins, and the like. Firebug is also extremely useful in tracking down and debugging layout issues on a page, especially trying to determine what style is actually being applied to a section of a page. Also, you can step-wise debug Javascript code being run by the browser.
To get started, first install Mozilla Firefox, if not already installed (). Then go to (using Firefox) to download and install Firebug. When done, you'll see the Firebug option in Mozilla's Tools menu. Selecting Tools -> Firebug -> Open Firebug will display the Firebug panes at the bottom of the browser:
Click on the Inspect button. Now you can mouse around the page and see the defined sections of the page (surrounded by blue border):
The lower pane will display the relevant section of the page being moused over. You can also click on the moused-over area, which selects the area (and takes you out of inspect mode). The right pane will show what styles are in effect for the selected area, and you can also mouse over the HTML section to highlight the section on the page, and can click on the HTML pane lines to see the relevant styles, including the hierarchy/cascade effect of a given style.
When an HTML line is selected, you can view and tweak the associate styles. This is very useful when debugging the page to determine both what style is (or isn't) being applied, and to determine correct values so the page is displayed as desired.
You can also disable a style setting to see its effect, by clicking to the left of the setting in the right pane (marked by a red 'do not' symbol):
Using combinations of these tweaking mechanisms and you can both easily see why a page displays and what the correct settings should be. You can also add new setting values in the right page.
Lastly, Firebug can be used to debug Javascript. You can set breakpoints, watch values, and step lines of Javascript in real-time:
In conclusion, Firebug helps to take out the guesswork in page layout and very easily shows what styles are being applied to sections of a page, as well as the page layout itself. For any serious web developer it is an essential tool. This blog is by no means a comprehensive explanation of all of Firebug's functionality, but rather a basic introduction of its core features. As of this writing, there is no equivalent tool for Internet Explorer. And, of course, IE and Mozilla don't always display a page the same way, typically because of the way the two browsers interpret styles.
