I must say I spend the vast majority of my day in Firefox which is probably the case for many web developer types out there. It is the de facto browser for development for a myriad of reasons… adherence to W3C standards (for the most part) being the biggest. But I think what gets me most excited about Firefox is the mind boggling array of add-ons available to developers. The foremost of which, in my opinion, is Chris Pedrick’s Web Developer Toolbar.

This add-on has so many amazing features that I will only introduce you to a few that I use regularly… ones that can save you huge amounts of time in debugging and help make your development cycle more efficient in general.

So yeah, I could gush all day about how much I love Firefox but many of you are likely aware of the power FF packs under it’s hood. Discovering the Web Developer Toolbar a couple of years ago was akin to a spiritual awakening for me… majorly geeky I know.

If you’re a standards practicing developer using CSS to control the presentation of your projects, Web Developer has some amazing features for you. The one that gets my vote for slickest is Edit CSS… which allows you to edit the CSS on your page, or any web page for that matter, in REAL TIME!

I can’t tell you how many times I’ve used this to demo different hex colors or font family’s in a layout. But the fun doesn’t stop there. You can edit whole sections of your layout and see the changes right there without having to edit your style sheet and uploading the changes. Pretty sweet!

A lot of times when I’m randomly surfing and I come across a page that piques my CSS curiosity I’ll often use the View CSS feature to peruse the page’s style sheet(s). This is great to check out what sorts of techniques other folks are using in their CSS… essentially it can be a nice educational tool.

Lets move on and look at Web Developer’s image features…

Taking a look at the image menu, you can see what’s at your fingertips. The feature I use most is View Image Information. It’ll display every single image on a given web page and inform you of its properties… including height, width, file size and any alt properties.

Again not only is this useful on your own projects but seeing how other sites are sliced and diced with images is a great learning tool. One other image feature worth mentioning is Replace Images With Alt Attributes. This’ll allow you to toggle on and off all image content in your page to check, for example, how things shape up in a non-visual web browser… like one a sight-impaired user may use to view your page.

Another very powerful Web Developer Toolbar feature within the Information menu is Display Element Information. This is what sold me when I first started using Web Developer.

Essentially you can think of it as a DOM inspector sort of deal that traverses the DOM for each individual block level element on your page and displays the relationships with its parent and sibling elements. If you look above the tab bar in the photo you’ll see a the box that displays the cascade beginning at HTML and traversing all the way down to your selected element. In addition, a dialogue box (the yellow box in the photo) will appear and tell just about anything you’d want to know about any element in your page. Way cool!

Remember the Edit CSS feature I told you about? Well a complementary feature also exists for HTML, appropriately called Edit HTML which is accessible under the Miscellaneous menu.

This also lets you edit your HTML in real time and preview changes without messing with your text editor and ftp client. It’s kind of similar to the “Try-It-Yourself Demos” over at W3Schools. So if you’ve used that before you’ll be right at home with Edit HTML in Web Developer.

Finally I’d like to touch on the window resizing features in Web Developer. Clicking on Resize, you’ll be presented with options to resize your browser window to an exact width and height. A fresh install of Web Developer will come with the option to resize to 800×600… the old school web design resolution standard. I added 1024×768 as that is the resolution I design for these days.

This feature is so simple yet so powerful that I can’t believe this isn’t a standard feature on all web browsers. Anyway you can easily create any resize dimensions you want by clicking Edit Resize Dimensions… and going through the set-up. You could also theoretically set up the browser window to roughly mimic the size of a mobile device, like an iPhone or Blackberry. The resize feature in conjunction with the Display CSS By Media Type feature (allowing you to view your Mobile Style sheet) can really help when optimizing for mobile devices. The iPhone / iPod Touch however are changing things for the better as the Safari browser on those devices completely ignores Mobile style sheets and basically displays as a mini version of a desktop browser. Designing for mobile devices is really tricky… in fact sometimes a plain (x)HTML document is the most effective way to go.

Well this only scratches the surface of what the Web Developer Toolbar is capable of. I’m continually finding new uses for it so I think the best thing to do, like most things, is to just experiment. I’ve found it to be a huge productivity enhancer and it plays a large part in the development of every project I do.

Web Developer is available for Firefox on both Mac and Windows. You won’t be disappointed!

Download Resources:

Web Developer page at Mozilla.org

Chris Pedrick’s Web Developer page

This post is first in a series dedicated to Firefox Add-ons. Hope you enjoyed this first installment.

How do you use the Web Developer Toolbar?