Firebug – You got my cool vote!

If you are into web development, and have not used Firebug yet, then you should install it and see how cool it is!

I was just introduced to it by a friend today, and after trying it out, I can’t imagine going back to web page development without it.

Firebug is a Firefox add-on as a development tool that “can edit, debug, monitor CSS, HTML, and Javascript live in any web page.”  I felt that it was also a good educational tool if you are struggling around with CSS, HTML and Javascript.

With the enabling of Firebug, it opens up a window at the bottom of your Firefox browser.  It shows the HTML code in expandable/retractable form within its frame.  You can click on elements and it highlight the section of the web page related to the element.  The right side Firebug frame will show the CSS code that is affecting the looks of the element.  By changing the CSS values, you can see the changes affecting the element in real time.  So it’s dandy that you don’t have to re-deploy your CSS and HTML codes over and over again just to see what the changes are like.

It also has a network module that shows you the size of data and time taken for downloading each file.  So if you have a problem with page load speed, you can analyse which file is too fat and what can be done to put your application on diet.

Here are some of the preview screenshots that I’m linking from Firebug’s web page:

Download Firebug here: [https://addons.mozilla.org/firefox/1843/]

If you do a lot of web page layout designing, or just dipping your fingers in it once in a while, Firebug is a cool helper.  Thanks Joe Hewitt!