Web Developer Firefox Add-on

I just discovered the Web Developer add-on for Firefox and I’m impressed — it’s an essential toolkit for anyone building websites. It exposes a lot of useful features that make debugging and testing faster and more practical.

Here are some of the things it lets you do:

• Resize Firefox window — quickly switch the browser viewport to common resolutions (for example, 1024×768 or 800×600) to see how your layout responds.
• View HTTP headers — inspect request and response headers for the current page.
• View CSS styles — inspect the CSS rules applied to elements on the page.
• Live CSS editing — modify CSS in real time and see results immediately (very handy for experimenting).
• Reveal passwords / hidden form fields — temporarily view form values that would normally be obscured.
• Cookie management — disable, add, delete, or clear cookies (including session cookies) for the current domain.
• Disable plugins and scripting — turn off Java or JavaScript to test progressive enhancement and behavior without scripts.
• Page information — view a summary of lots of page details (images, links, forms, etc.).
• Validate code — run quick validations on HTML and CSS.
• View source variations — see original source, generated source, and more.

If you haven’t tried it yet, grab it from the Firefox Add-ons site:

Web Developer — Firefox Add-ons

Get it there and give it a spin — it saves me a lot of time when debugging layout and behavior issues.