Firebug Series - Part 1: Getting it Installed

I've been using Firebug for some time now and most techie folks will already know about Firebug, so you fellow computer nerds may ignore this series. However, feel free to let me know if I have missed anything...

Firebug is quite possibly the best reason any web developer should abandon IE for Firefox. It's a small little extension that packs quite a big punch. I have found that after developing a site and getting it to look "good" in FF, it is usually OK in IE. As with anything I know there are exceptions, especially with IE6, but I am speaking in general terms.

First thing to do is get Firefox if for some bizarre reason you don't already have it. Then get Firebug by going to Tools, Add-ons, and then in the window that pops up, click on Get Extensions in the bottom right. Then search for Firebug (see below). There is also a wealth of info at Firebug's website, http://www.getfirebug.com. At that website there are links to groups, discussions, a blog, the documentation, and even the source code.




Click on the Add to Firefox button in the upper right and then follow the prompts to load it. Once loaded it will show a little gray circle in the bottom right of your Firefox status bar. Click on that Circle and then click Enable Firebug. One note, you may choose to enable Firebug on a case by case basis, because it can interfere with some sites, especially sites that are use JavaScript heavily. That being said, I leave mine on globally and never disable it and I haven't had any problems, but I felt I should give the warning.



Once you have the Firebug window open, you have the whole HTML document at your fingertips, or should I say pointer tip. Maybe the easiest tool to use is the Inspect button. As you mouse over the web page it points directly into the HTML to where the code is and also shows you the styles directly applied to that element as well as all the inherited styles.



Hopefully this is enough to get you to at least install Firebug. More will come next time as we look into the Inspect functionality a little deeper, and I promise it will come quicker than most posts around here.

<the todd />