SharpStyle Labs

It is not often that I find software where in the first 5 minutes of using it, I know that it will save me a lot of time. Meet 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.

Think of Firebug as Web Developer extension on steroids. Here are some of the features:

• Live editing of HTML, JavaScript, CSS with immediate result
• Visual representation of the layout for each element including margin, border and padding — this will certainly save me a lot of time
• Monitor network activity
• Debug and profile JavaScript
• Powerful JavaScript console

Make sure to read documentation as there are a number of keyboard shortcuts and console macros that will save you time

Firebug is open source.

If you are looking for similar functionality in IE, there are a number of options:

• (free) Internet Explorer Developer Toolbar Beta 3 – somewhat limited
• ($) IE WebDeveloper V2 — http://www.ieinspector.com/dominspector – didn’t try this one; screenshots show functionality very similar to Firebug

~Mike