Email This Post Email This Post

Firefox Fire Bug

At a recent meeting we had a great presentation by Trip Kirkpatrick on the benefits of Firebug.  Firebug is a plug-in for Firefox, and provided a suprisingly complete group of web development tools.  In my own work I can see it being particularly useful for troubleshooting CSS issues. 

Firebug gives you a live window into the web page you’re currently viewing in Firefox.  You can then view and alter the HTML, CSS and script elements, seeing your changes displayed in real time.  The inspection functions are pretty cool too, with DIV elements highlighted on the screen as you select them in the code, CSS showing all the inherited properties for elements, and all sorts of debugging help for any scripts.  I’ve had Firebug installed for a while now, but never took the time to figure out what to use it for — now I know.  This is not a replacement for Dreamweaver (or whatever other HTML editor you use) but a great addition to a workflow and a great aid for troubleshooting.

The only issue is this tool is Firefox-only.  For IE there is the IE Developer Toolbar which has similar functions.  Of course its not quite as cool, but its worth a look.

Firebug - Web Development Evolved

Firebug’s CSS tabs tell you everything you need to know about the styles in your web pages, and if you don’t like what it’s telling you, you can make changes and see them take effect instantly.

Powered by ScribeFire.

Digg!

See also:

RSS feed for comments on this post · TrackBack URL

Leave a Comment