Three Cool Firefox Extensions for Developers

If you design Web pages and write your own HTML/XHTML and CSS, or even if you're just interested in seeing how your favorite Web pages are put together, you'll probably find these tools as useful as I do.

Web Developer Extension
Chris Pederick's Web Developer Extension provides a whole range of useful little tools, many of them focused on helping you work with CSS. Among them is the ability to selectively disable CSS styles -- all styles, embedded styles, inline styles, linked styles, or even individual style sheets -- making it easy to see (and debug) the effect of each style. You can even interactively edit CSS styles and see the effect of your changes immediately, even on public pages. Other groups of tools in this extension help you work with forms and images, outline selected elements on the page, view information about the page, perform various validations, and more. You can find Web Developer Extension at chrispederick.com/work/firefox/webdeveloper/.

View Cookies
This nifty little extension, by Edwin Martin, adds a tab to the Firefox Page Info dialog on which you can view the name, value, domain, path, and scope (duration) of the cookies for any page you're viewing. Very useful when developing and debugging cookie-based pages. View Cookies is available for download from addons.mozilla.org/extensions/moreinfo.php?id=315.

Aardvark
When turned on, Aardvark outlines each page element as you pass over it with your mouse, showing you the associated element type such as div, p, td, h3, etc., along with its CSS class or ID info, if any. A set of keyboard shortcuts enable you to interact with the selected element in various ways. From Karmatics, Inc. at www.karmatics.com/aardvark/.

Others
There are of course many other Firefox extensions, both for developers and for other uses, too. You can find an alphabetical list on mozilla.org at addons.mozilla.org/extensions/?application=firefox. Two that I'll be checking out soon include View Formatted Source and View Rendered Source. Look for them near the bottom of the Developer Tools list.