What is the one application you probably have open more than any other? Your browser! I know my browser is open 24×7. I’m testing my application, watching the news, reading blogs, etc. As a developer your browser is one of the most important tools in your toolbox. If you haven’t explored the current browsers and the vast number of ‘extensions’ or plugins available you are hurting your development!

In the next few Developer Toolbox posts I’ll cover some of my favorite Firefox add-ons. There are also plugins available for Internet Explorer and Opera although not nearly as many as available for Firefox.

The extension I use all the time is the Web Developer toolbar.

Every time I use the WebDeveloper toolbar I find something new. Or I’ll read about someone touting some bit of software and say “that’s in the Web Developer toolbar!”. Today Sean Corfield mentioned a CSS editor that allowed you to do real time edits to any website. You can do that with the WebDeveloper toolbar! Click CSS > Edit CSS (or CTRL+Shift+E) and a small dialog box will open at the bottom of your browser with the site’s CSS loaded. Edit away and in real-time your changes will be visible! I fixed up Sean’s site which I thought needed a bit of color! :)

I also saw MeasureIt (a ruler plugin) making the rounds on the blogs this week. If you do a lot of design – I’d probably install MeasureIt as it has a lot of neat features but for developers who don’t do a lot of design, the Web Developer toolbar includes a nice ruler itself giving you height, width and the position on the page. It also provides a handy “Line Guides” which is useful if you are trying to line something up.

If you don’t already have it installed do it now and go exploring! Also make sure to check out the preferences as there are lots of options you can set there. I have added a lot of screen resolutions, switched it to use Notepad++ as my view source editor, and added a few additional validation tools.