Firebug: A highly recommended tool for web designers  

If you are a web designer, especially the one who mainly use CSS to implement your design, Firebug is definitely a must-have tool in your toolbox.

This Firefox plug-in dynamically analyses the html document, giving you the detailed hierarchy of the document Firefox is currently viewing.

Using its document tree, you can efficiently browse though the document and find the node you interested in. You can also click on the "view" tool and then click on a part of the document to select the node that occupies the selected area.

When you select a node from the document tree, its location in the document is automatically highlighted with rulers tell you the exact dimension information. And more importantly, its CSS definition is also presented to you on the right side of Firebug toolbar with override details and file name and path of every effective CSS definition for that particular node you selected. Which gives you a highly efficient way to see how your design works.

If you think this is not powerful enough, double click on the CSS definition, you'll find that you can actually change the definition and see the result immediately! Although you can't save your modification to the CSS file, this is still the fastest way to tune your design. You know sometimes inspirations come suddenly and it would be wonderful to try your new ideas right away.

Firebug also features a network monitor which can tell you how much time have been used to load every single part of your document. And it even has a JavaScript debugger.

Now do you have any reason to resist this wonderful tool?

Of course, it is a pity that Firebug works only in Firefox, but we do have alternatives in other browsers!

The first one is Firebug Lite, it's a JavaScript version of Firebug, with its basic functionalities. To enable Firebug Lite, you'll have to embed a script code to your page or install a bookmark script to the browser.

The other one is from Microsoft, so it works in IE, obviously. It's called "Internet Explorer Developer Toolbar". Its interface is kinda like Firebug except it's not that detailed. For example, it only displays calculated result of CSS, and lack the dimension chart which tells you the exact number of padding, border and margin of a node. So you don't know which CSS is in effect and where did the current node inherit the style from. After all, it's better than nothing, you know...