FIREBUG : DEBUGGING TOOLS FOR WEB DEVELOPER AND WEB DESIGNER

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. (firebug.com)

I was using Web Developer Toolbar for debugging web design element of website. And now firebug come with various cool features that can be very helpful for a web developer and web designer. Here is feature list at a glance :

• Inspect and Edit HTML
• Tweak CSS to Perfection
• Visualize CSS metrics
• Debug and Profile Javascript
• Quickly Find Errors
• Explore the DOM
• Execute javascript on the fly
• Logging for Javascript
• Monitor Network Activity (My favourite feature, it's very helpful as consideration for page load optimization)

It's Firebug Monitor Network Activity snapshot, it's very helpful because firebug give information on loading process, so we know what element that make website slow and must be optimized.

And here some Firebug in action videos :

• Debugging Javascript with Firebug
• Introduction to CSS editing using Firebug
• Firebug Console for IE
• Joe Hewitt Talks About FireBug