Web Developer Toolbar is a Firefox extension that helps you when you are designing webpages, working on your blog and so on. You don’t really need to be a pro to use its features either, it has some helpful tools for beginners as well.

The idea is that you should be able to view, edit, and instantly see changes you want to make on a page immediately in your browser, without going back and forth between an editor and the page. It also aims to give as much useful info geared toward usability, error-catching, general info and so on.

There are so many features I would need a 5 page report just to list them. From deleting the domain cookies, displaying image properties, rulers, guides, resize options to viewing the source, validating the page it has everything you will need.

The best feature in my opinion is the CSS viewing. By viewing style info, you can switch into a mode where a red box will appear around the item whose CSS details you want. In the top bar it will show you the location in the CSS code, and if you click, it will show you the code itself. You can also opt to add a user style sheet, so if you are redesigning your site you can take a look easily. You can also edit the CSS code right there in the browser, and it will show you the changes immediatel. It’s a pity you can’t immediately upload the changes via ftp, but this is still a huge load taken off our shoulders.

I find my productivity skyrocketing with this one, since it saves me about 20 seconds after each change, and this would amount to at least 20 minutes in an hour,  I preview a lot. In addition, if you are learning as you go along (like me), you may want to take a look and modify existing site’s code to see what’s what.  All in all, it’s a great tool for everyone, check it out!

Download Web Developer Toolbar from Mozilla Addons