Firebug - Web Development Evolved

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.

A quote from Java World Article defines Firebug as a revolutionary tool for web development:

"Web development arguably has two distinct eras: BFB -- the (prehistoric) time before Firebug when we learned the limits of alerts -- and the modern AFB (after Firebug) when we found that we can once again spend quality time with our families. Firebug truly is Web development evolved. Developing a Web application without using Firebug is like coding Java in vi -- it can be done, but it's just not worth the pain." [1]

Firebug is free and open source, licensed under the BSD license. Firebug was initially written in January 2006 by Joe Hewitt, one of the original Firefox creators.  Firebug has two major implementations, an extension (add-on) for Mozilla Firefox and an in-page implementation called Firebug Lite. A cross-browser version is in development. Approximately 3 million users have the Firebug add-on installed as of Nov. 2010 . [2]

In addition to debugging web sites, Firebug is a useful tool for web security testing and for web site performance analysis.

Official Web sites : http://getfirebug.com/

Firebug has also several useful extensions including YSlow and fireQuery.

There are web development tool of the others' browser like firebug. These are : 

• Internet Explorer Developer Toolbar
• Opera Dragonfly
• Web Inspector
• Google Chrome's Inspector

Debug and profile JavaScript

Firebug includes a powerful JavaScript debugger that lets you pause execution at any time and have look at the state of the world. If your code is a little sluggish, use the JavaScript profiler to measure performance and find bottlenecks fast.

Inspect and edit HTML

Firebug makes it simple to find HTML elements buried deep in the page. Once you've found what you're looking for, Firebug gives you a wealth of information, and lets you edit the HTML live.

 

Tweak CSS to perfection

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.

F12 is your friend

The F12 key is undoubtedly the fastest way to get to Firebug. Train yourself to hit that key when it's time to go debugging. If you're the big screen type, use Control+F12 (or Command+F12 on Mac) to open Firebug in a separate window.

Explore the DOM

The Document Object Model is a great big hierarchy of objects and functions just waiting to be tickled by JavaScript. Firebug helps you find DOM objects quickly and then edit them on the fly.

Logging for JavaScript

Having a fancy JavaScript debugger is great, but sometimes the fastest way to find bugs is just to dump as much information to the console as you can. Firebug gives you a set of powerful logging functions that help you get answers fast.

[1] Ajax: Tools of the trade, by Java World Article : http://www.javaworld.com/javaworld/jw-05-2009/jw-05-javascript-tools.html?page=2
[2] Firebug, by Wikipedia Article : http://en.wikipedia.org/wiki/Firebug_(web_development)