Mozilla Firefox is starting to gain some much-needed recognition as a serious contender in the Browser market. In many ways it has become the Open Source movement’s poster child, and nothing shows that more than its large list of extensions. For those not in the know extensions are add-ons that you can download to add new functionality to your browser, such as Image Zooming, Full Screen browsing, and more. I could go on and on about the impact of extensions on software today but that’s for another day. At the moment there is one extension that came one day and conquered the next, one that every Web Designer or Developer should not be without.

That extension is FIREBUG!

Simply put, Firebug is a tiny package of specialised development tools that can be used on any web page, stored locally or online. Despite it being an extension for a browser it makes more sophisticated, mature IDE’s look foolish. Once Firebug is running on your Firefox installation you can view edit the HTML, CSS and JavaScript of any web page. It perfectly lays out the HTML code on one side, nested and expanded, and the related CSS rules to the right, along with any other inherited rules.

Once installed, Firebug tucks itself into the browser nicely, and is activated by a small green button in the bottom-right corner of the screen. Once clicked and activated Firebug springs into action at the bottom part of the window, allowing you to change your page. On top of that it can also be used in a standalone window, for those who want their browser space to be clean.

In all honesty, Firebug is so good it could even run as a standalone application!

Firebug provides users with a box model viewer that runs alongside the left-hand HTML window. By hovering over your code in the HTML window you are able to see your code highlighted in the main Firefox window, whilst viewing the model in the side part of the Firebug window. From there, it’s just a matter of rewriting the code whilst it changes on-the-fly. It’s a feature that is somewhat forgotten with the rest that is on offer, and for those that feel they need more visual representation of their layouts it acts as a perfect tool to alter margins and widths. In fact, there are many people out there who prefer using the box model viewer than actually changing the widths through the CSS.

Its CSS tools are nothing short of magical, and they’ve now become a collective tool I cannot live without when developing web pages. It’s dominating feature on the CSS front is the ability to toggle full-lines of CSS on and off, whilst the web page changes right in front of you. Firebug also automatically crosses out any lines of CSS that has been overwritten by other rules in your code; a feature that has shaved hours off development time for me.

Its JavaScript tools are one of its main areas of functionality and I couldn’t even begin to scratch the surface of what it can do for you. If you, like everyone else, find your JavaScript code full of errors and issues then Firebug’s tools will become essential for you. If you’re an AJAX convert, Firebug can also show activity on your AJAX-enabled page. This is one of its greatest strengths, and it makes JavaScript a joy to code again.

Even though Firebug has been around for a few years now it is still an outside great of the web IDE market, and a tool that further cements Firefox as the leading browser for many around the world. If you have even the slightest interest in the running of web pages or building your own you NEED Firebug!