Firefox is an invaluable, time-saving tool regardless of weather you’re designing standards compliant visions of pure css beauty or, at the other end of the scale (more on that in another post) , customising templates for enterprise CMS products targeted exclusively at corporate environments running Internet Explorer.

So why is Firefox so invaluable? Well, firstly it renders pretty reliable standards compliant output which is a good starting point but more important is its extensibility. The combination of this open extensibility and some very smart web developers willing to contribute has led to a tool-set that no other browser has been able match, not that many (if any) seem to really be trying.

Firefox add-ins that should be in every web designers toolkit:

• The Web Developer Toolbar by Chris Pederick
  Access to a vast array of information about the way pages are constructed, allowing browser features such as css rendering, javascript, images and cookies to be turned on and off on-the-fly. The ability to edit live cached versions of pages and there related files, instantly seeing the effects and the ability to re-size the browser to precise screen resolutions as well as providing direct access to validation services. In fact, so many features I couldn’t possibly list them all here and do them justice.

• FireBug by Joe Hewitt
  Such a powerful tool it still blows me away to think how I ever managed without it. Firebug allows you inspect any object or element on a page telling you, among many other things, which styles are being applied or over-ridden. A full javascript debugging environment providing detailed error information and links directly to the source of the errors as well as letting you add breakpoints and watches and editing on the fly.

And a couple of less developer oriented add-ons I have found useful on a daily basis:

• ColorZilla
  An eye-dropper colour selection tool that runs from the status bar.

• FireFTP
  A complete, full-featured FTP client inside Firefox.

• Stylish
  Allows you to create custom style sheets for websites you regularly use that override the default styles for the site. Handy for fixing browser bugs, accessibility issues or just plain ugly sites!

• IE Tab
  Allows you to switch the current page to Internet Explorer inside Firefox. Great for quick comparisons.

And finally, in the interests of fairness and to show my openness on this subject, if you’re absolutely determined NOT to use Firefox (you poor poor fools! ) then here are some (lesser) solutions for the IE oriented among you:

• XRay by WestCIV
  XRAY is a bookmarklet that works with both Firefox and IE6+ that, through the wonders of Javascript, exposes the box model properties of any element on a page.

• Web Accessability Toolbar by Vision Australia
  I haven’t actually used this toolbar much, but it appears the folks in the AIS team (Accessible Information Solutions) at Vision Australia have done a pretty good job at implementing something very similar to the Firefox Web Developer Toolbar.There’s access to validation, window resizing and the ability to switch CSS, Javascript, ActiveX and Images on and off. As with the Web Developer Toolbar you can highlight key elements on the page such as tables and divs although here you are also able to identify and highlight a raft of other elements including lists, tab-order, access keys and headings.

  As the toolbars primary focus is on accessability rather than development it also comes with some pretty nifty features such as a colour contrast analyser, gif flicker checker, the ability to switch to greyscale.This is actually a REALLY powerful tool and a vast improvement over some other attempts at a web developer style toolbar for Internet Explorer.

The issue seems to occur because the html comments in the xsl template, along with their contents, are not rendered to the browser.

The answer is to structure the conditional comment using xsl comment tags, which translate into html comments when the page is rendered, as follows:

I’ve been running the beta version alongside version 1.5 for a couple of weeks now (which while a little clumsy, was no where near the pain-in-the ass multi-IE is) and I gotta say, I like it… a lot! It’s clean, it’s fast, and most importantly… it hasn’t broken anything yet!

Extensions and themes are now collectively referred to as “Add-ons” and managed through a unified control panel, and at time of writing a few have yet to be upgraded for compatibility with Firefox 2 (nothing that can’t be fixed with the use of the the Nightly Tester Tools add-on which allows you to force compatibility), but most of the main extensions work out of the box and the new UI theme is so nice that for the moment at least I don’t want to change it!

The options control panel has changed a bit too and it took a little while to find everything again but on the whole it looks like all the changes are for the good and I would certainly recommend the upgrade. So what are you waiting for? Go get it now!

The large software company I work for has rolled out an official IE7 blocker as several of our key enterprise apps don’t work with it, so it looks like I’ll be sticking to testing inside of a VM.

Ironic isn’t it that an “Upgrade” stands to break so many existing apps… hopefully things will improve in the coming weeks/months as developers (like myself) work to bring sites an applications in line with these new fangled web standards things (insert sarcasm smiley here!). I’ve just upgraded to the latest Firefox 2 release candidate from Firefox 1.5 and while it probably doesn’t change anywhere near as much as IE7 does from IE6 it also doesn’t break anything… at least yet!

Two new browsers… interesting times lay ahead!

I agree completey with the "trying to get the layout working using only CSS before giving up and using tables" part. There are still one or two very frustrating shortcomings with CSS that have given me many a float nightmare!
Via Poisoned Minds

• The Web Developer Toolbar by Chris Pederick HAS to take the No.1 spot.
  The toolbar includes the ability to turn off CSS to view semantic markup, turn off images, outline page elements such as block level elements and tables, validation and SO MUCH MORE. I can't recomend this extension enough if you do any sort of web development.
• FireBug, which I only discovered recently takes a close second.
  At it's core it allows you to drill through a pages structure (aka the DOM) and debug the JavaScript including the ability to add break points. Unfortunatley the current version of FireBug (0.4) is not compatible with Flock and 0.3 doesn't appear to have the JavaScript dubugging functionality.
• IE Tab
  As I mentioned in my previous post, for anyone that works in an Internet Explorer centric world (most/all of us unfortunatly) IE Tab is a god send. It allows you to specify URL's that will use the IE rendering engine within the Firefox browser interface. You can also click on the browser logo to the left of the status bar to swith back and forth between the rendering engines. Great for corss browser compatability checking.
• FireFTP
  A full featured FTP client in the browser! Need I say more? The user interface is the same intuative left to right interface that you would expect with any good FTP client, supports drag and drop and has all the functionality most users need, including secure connections.
• Gmail Manager
  This extension displays notifications from the browser status bar as well as from the Windows System Tray and gives you an overview of your GMail inbox, storage usage and unread mail, when you roll over the status bar. I know both GTalk and recent versions of the Google Toolbar support Gmail notifications, but this just feels a little more integrated.

I'm sure there are many other extentions I still haven't discovered but I'm lookin'! and if there are any you think deserve to be on this list by all means let me know.

BTW, as the title of this post would suggest, I'm currently playing with the latest beta of Flock, a significantly enhanced browser based on Firefox, and while there are still a few flaws that would prevent me from adopting it in a more full time role it is a VERY promising project.

Features of note include an integrated Flickr/PhotoBucket photo viewer, enhanced user interface, built-in blog posting for most of the mainstream blogging tools, integration with De.lico.us and an integrated RSS Feed reader.

Last week Vitamin posted an feature with Molly Holzschlag entitled "Will the Standards Battle Ever be Won?" in which she answers some of the burning questions surronding Internet Explorer's standards support. In the comments for this article, some are pretty scathing of Microsoft and this has been met with a, slightly less than refrained, response from Chris Wilson, the Group Program Manager of the Internet Explorer Platform team at Microsoft… and to be fair, I can't really blame him.

It nice to actually hear the "Other" side of this argument, although I hate to admit that's probably exactly what the response to Chris's post will be (and some of the comments thus far would indicate just that)… There is, it seems, a community within the community (our community), and I've been guilty myself in the past, that simply put will never accept Microsoft as anything but the anti-christ of anything they do, particulary on the web front.

But I for one applaude Microsoft for addressing the issues and making a valient attempt to move forward (or should that be "catch up"?… sorry, couldn't help it, that one just slipped out and I look forward to IE7, although I'm sure in the short term it will make life harder. While I agree, we do spend a lot of our time addressing issues within IE, we should not forget that IE has, in the past, facilitated a considerable amount of forward momentum in the web arena without which we may very well not be where we are today… and for that perhaps we should forgive their error in judgement, taking the extended holiday that was/is IE 6.

Enough with the bitter rhetoric… they have acknowledged they made a mistake and action is being taken… it's time to move on!

Now, I've been a Firefox user in a secondary sense for a couple of years, since long before version 1.0, and in that time I have come across som pretty good (even great) extensions such as the indispensible Web Developer toolbar, as well as some utter crap, and I got to wondering what else might be worth a try.

Obviously I don't want to go as far as this clown, but there must be more useful extensions out there and so I thought I'd see if anyone had any suggestions? What extensions do YOU use?

Fortunatly, due to some clever guys in Taiwan we have IE Tab, a handy extension for Firefox that, with a single click, switches the current browser tab to the IE rendering engine. Now if I want to work with IE I just open up an IE Tab directly in Firefox and away I go! Great for Windows Live Mail (the successor to Hotmail), which is STILL hobbled for non IE users!, and development testing! Now If they only did an "Opera Tab"

Another cool feature is the ability to create a list of sites and have Firefox automatically switch to IE Tab when rendering them. Innovations like this make switching so much easier can certainly do Firefoxe's uptake rates any harm… Great stuff!