Tip: Get Firebug! Web Development Tools for Firefox.

by emily on April 5, 2009

When recently designing and customizing our blog, I stumbled upon one of the best web development tools I have found in quite a while. I was working on customizing our Thesis based blog and working to modify different style sheets the blog used. The style sheets were very extensive and I was having a difficult time locating specific items I wanted to update. It was very, very time consuming to search through the style sheets to try and find the specific item I wanted to modify.

While researching the Thesis forums to figure out why I had a 5 pixel border showing around my header graphic when I didn’t want any border, I stumbled upon a forum thread which mentioned and hailed the web development tool, Firebug. “Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.” - description taken from http://getfirebug.com/.

A quick installation and review of how the tool works, and I was up and running. Using Firebug I was able to ‘Control - Click’ (on a MAC) anywhere on my web page and immediately see where in my style sheet the item I was pointing to is programmed.

Firebug also provides powerful javascript and network activity monitoring tools. It has been around for a few years, but for us, it is a recent find. Overall, it is the best web development tool I have found in quite some time - highly, highly recommended! Get Firebug, it’s free!

Previous post: Grid Design Firm Meets ‘Ponch’ from CHIPS!

Next post: Tip: How to edit .htaccess file on a MAC