About a year ago I discovered a very handy Firefox add-on that has saved me many hours of work and made the work I've done that much easier. This add-on, the Web Developer Toolbar, has a host of different tools which can be used for debugging sites as well as looking under the hood, so to speak, of sites in order to discover nifty functions, view information and understand different processes.

As a Web Designer I often have to recheck CSS (most importantly class and element details and hierarchy) when changing layouts or defining the look-and-feel for sites. The toolbar is not only for designers though, for most developers it is also an invaluable tool as it has many features (like an error-console and DOM inspector) primarily for developers. Not only does it enable you to view the CSS of any given site, it also includes the option to view images and their information, view the source code, manipulate forms, frames and cookies as well as disable various scripts and view tons of other information invisible to the general user. Its easy-to-use features have helped me with many a tricky problem and I would find it distinctly hard to work without this handy tool in future.

The add-on installs a menu as well as a toolbar in your Firefox browser. From the toolbar all the tools can be accessed easily, although if someone chooses to hide the toolbar, all the tools are also accessible through the context menu.

This add-on is also available for Flock and Seamonkey.

To download for Flock and Seamonkey:  Web Developer Toolbar for Seamonkey
To download for Firefox: Web Developer Toolbar for Firefox