Web Developer Toolbar

The first tool you will want to install is the Web Developer toolbar. This tool is infinitely helpful for you to debug most anything.
Some of the features I use almost daily are:

• Flush cookies (domain, session, path, all
• Disable Cache
• Edit CSS
• Find broken images
• Find image paths
• CSS/HTML/XHTML validation

Anybody who has ever tried to debug a user login issue, a website caching issue, a broken image problem or other similar annoyances, will immediately see the usefulness of this tool. This is the first extension I add to any fresh install of Firefox and can’t imagine my day without it.

Firebug

It’s obvious when somebody is new to website design and development. They ask questions like:

• “How can I change the color of this font/box/thing?”
• “How can I move this font/box/thing?”

Well it’s incredibly easy. Install Firebug. With Firebug you can easily edit css and html on your site, live. Once you edit things how you want them, copy the edited css into your sites custom.css file or into your templates .css. That is WAaaaaaay easier than editing css, saving, upload via ftp, saving, flushing your browser cache, then pressing refresh.

Nightly Tester Tools

Firefox updates a lot. Plugins do not always update as frequently. (with the exception of Firebug. They update directly from bleeding edge builds) So one day you wake up, update Firefox and discover all of your favorite developer add ons no longer work due to being incompatible. This is another incredibly simple fix most people are not aware of. Install the Nightly Tester Tools plugin. This will allow you to quickly override any add ons to work on fresh Firefox builds. You no longer have to wait for 6 months to update Firefox, simply because one of your plugins cannot update.

Other add-ons

I can go on and on about extensions for Firefox. The previous ones I absolutely cannot live without. Here are a few that I find very useful, but if they break I’m not weeping gently into my pillow in the corner.

• ColorZilla – Advanced Eyedropper, ColorPicker, Gradient Generator and other nifty stuff.
• DNS Flusher – Flush your browser DNS cache after making changes to your hosts file or when you change the DNS records on a remote server
• ScreenGrab – Grab screenshots of entire webpages without scrolling. (This is EOL, but you can find other options by following the link.)
• MeasureIt – Measuring tool. This is a easy way to figure out how wide a picture needs to be to fit in an article, or the approximate height you want a button to be.

What are your must have tools?

Those are the tools I must have on my developer browser. What are some of yours?