Firebug

Firebug (version 1.3.3), developped by Joe Hewitt and Rob Campbell, is a free and open source (BSD) debug tool. It integrates with Firefox to put a wealth of tools at the fingertips of web designers. The tool allows to edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

Firebug makes it simple to find HTML elements buried deep in the page. 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. When your CSS boxes aren’t lining up correctly it can be difficult to understand why. Let Firebug be your eyes and it will measure and illustrate all the offsets, margins, borders, padding, and sizes for you. Your pages are taking a long time to load, but why? (JavaScript, image compression, partner’s servers). Firebug breaks it all down for you file-by-file. When things go wrong, Firebug lets you know immediately and gives you detailed and useful information about errors in JavaScript, CSS, and XML. 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. The command line is one of the oldest tools in the programming toolbox. Firebug gives you a good ol’ fashioned command line for JavaScript complete with very modern amenities. 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.