17 September, 2007

Firebug: Firefox Extension for Web Developers

I have been using the Web Developer toolbar for Firefox for some time now, but I recently learned of a new, powerful Extension, Firebug from Joe Hewitt. Firebug makes it very easy to inspect different portions of your code while on your web page. For example, click the Inspect tab and then you can see the related code as you hover over different elements on the page.

Where the Web Developer toolbar makes it easy to look at different parts of the code on a page, Firebug lets you interact with the page and subsequent code. If you want to see how fast (or slow) the various elements load on the page, click on the Net tab. In addition to showing the time to load the various elements, it is very easy to filter by element types such as JavaScript, images, and even Flash.

You can use Firebug as a part of your browser window (while you're interacting with it) or in its own window. the one drawback I see is that each time I change tabs, the new website is processed by Firebug; not that it's slow, but rather I'd like to see the window close or hide. One work-around is to go into the options and specify the websites that you want Firebug to interact with, and all others will therefore not inspected. You can also set what sites shouldn't be inspect. Perhaps a complex page, such as I use for posting to this blog, causes Firebug (and therefore Firefox) to crash. Just disallow that page and the problem goes away.

There are many more powerful features; I've just scratched the surface. Use it to debug your JavaScript; to see horizontal and vertical rulers for your CSS. You can even get a Japanese version. So if you're a web developer, professional or hobbyist, give Firebug a look.

No comments: