A few times within every persons life time a new technology emerges, that once you’ve used it you can’t imagine how you ever lived without it. For example: the internet, mobile phones and credit cards.

The same thing can also be said for every person’s professional career where every once in a while you discover a new tool that improves your productivity so much that you could never dream of a day at work without it and I am no exception. For me such tools include Google, Eclipse IDE and CVS.

It’s not very often that this list is expanded, but I have to say over the last six months a new tool has battled its way onto my prestigious list of tools that I could not live without. That tool is Firebug.

Firebug is a plugin for Firefox which allows you to debug, and monitor CSS, HTML, and JavaScript live in any web page. The amount of time this tool saves you cannot be understated.

If you are like me and get easily frustrated with CSS, this tool will delay the onset of grey hair another five or ten years. You can right click on any element on the page and then hit the ‘Inspect Element’ option which will show you view every piece of CSS applied to that element both directly and via inheritance. You can then change any of the values or add new ones live within the browser. Instead of doing the tedious – edit code->clear cache->load page routine which can drive even hardened hackers to the verge repetition induced insanity.

Firebugs CSS features are just the tip of the iceberg, other features which are too complex to cover here such as it JavaScript debugging capabilities and live AJAX display will literally blow you away.

Here are two video tutorials which will display to you the power of Firebug.

First up AJAX:

Second up CSS: