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?

A lot has happened in the last 4 weeks but here are few highlights:

I’m mostly finished with the revamp of Allied’s web site… just a few JavaScript tweaks and some content additions and it’ll be ready to go live when their new associate starts in early August. So yeah June was a profitable month which is always nice. But those months don’t happen very regularly at this point in my career.

Anyway, I certainly earned it as I had to do a lot of busy work. I think I edited in total about 70 images which took the good portion of 2 days. But the results I was pretty happy with (as was Greg). I got the feeling whoever initially designed the site kind of dropped the ball because there were a lot of loose ends I had to tie up with the CSS and XHTML. It was crazy because the CSS was written in a really confusing fashion… or written in a way that I wouldn’t do. Needless to say it was interesting slowly figuring out why it was written like that. It did have a lot of specificity with respect to some CSS rules, particularly list items, which taught me a few tricks I was previously unaware of.

I did decide to give jQuery a shot to do a couple JavaScript effects. It’s worked out well and I think I’ll be using jQuery again.

Lately I’ve been fighting with their Exchange server again trying to configure it for RPC over HTTP… which I will not go into as it will not make for good reading. However I will say it has been humbling. It would be nice though if the guy who set up their Win 2K3 Server was a bit more helpful. But I don’t see that happening.

Lets see what else has been happening?

Well I got a sweet Fender Highway One Telecaster at the Music 6000 parking lot sale a couple weeks ago. Been wanting a new Tele ever since I had to sell my American Standard for dubious reasons. Been enjoying it immensely. It rings so much more than the Jazzmaster. But that’s kind of what Tele’s are known for. The JM is still my Number One though. Maybe I’ll do another post why I love the Jazzmaster so much…

Speaking of the JM, it’s new body is here! A little background… About a month ago I was doing some maintenance that required removing the trem plate. In the process of doing that a thin piece of the finish about an inch in length flaked off the body just to the left of the trem plate. Yep it was visible even with the trem plate reinstallled. A couple days later I took it over to Peter’s house to have him help me with something. He noticed it and thought it could probably qualify as a warranty repair (he deals with the special orders at M6K). So he called Fender and they offered to give me a brand new body! So to make a long story slightly longer, the new JM body will be installed in a couple days.

People tend to complain about Fender’s customer service but I’m a pretty happy customer. I’m sure it helps that I know everybody at M6K and I’m a good customer to them too.

One last thing… I now have a bachelor pad. That’s right I’m living alone. It’s been a long time since I’ve lived alone but so far so good. Not getting terribly lonely yet! I can finally have my gigantic Cure poster in the living room! Definitely need some more furniture though…