Multiple Browser Testing Environment - The All In One Solution // writing
All developers know that browser testing is a pain. Even amongst the ‘good browsers’ there can be quite a few annoying inconsistancies. Hence the importance of having a comprehensive suite of applications at your beck and call.
Now the only way to fully test across all the major browsers is to use a Mac (although the only one missing from Windows is Safari 2 so the times, they are a-changing) plus I use a Mac so there may be some understandable Mac OS X bias to the tools I suggest. Plus, honestly, do yourself a favour and get a Macbook. Advert over.
Now… the list.
Safari 3
Apple’s sneak peek at what Leopard has to offer and provides a development environment for iPhone. And for Windows too, who’d have thought?
Safari2
You’ll want to keep a copy of Safari2 around for testing, as it has it’s own quirks. I finally found a tip that let you run them on the same machine.
You might also want to check out Multiple Safaris which gives you many versions of Safari to play with.
Xray
A bookmarklet that shows you the dimensions and location of any element in the browser window.
SafariTidy
A plugin for Safari, that allows you validate at a glance. For the Web-Standards Nazi within.
iPhoney
A nice little application that emulates an iPhone, using the Safari3 rendering engine, ideal for those of us in countries without the iPhone. (Mac only)
Firefox
My main development browser, due to the add-ons below. I find it a bit ‘un-Mac-like’ and clunky feeling, but were I using Windows, I’d be all over it.
Firefox 3 preview
The beta for the next version of Firefox, I have a Fifefox expert who switched me onto this, and with a little hacking you can run it at the same time as Firefox 2.
Firebug
If you’re doing any web development without this tool, you’re in for a world changing experience once it’s loaded.
YSlow
An extension to an extension, more useful for larger sites with high traffic, but contains some useful info about how to make you pages more efficient.
Web Dev Toolbar
The pre-Firebug champ, still full of useful shortcuts.
Dust Me Selectors
A clever idea for those stylesheets that have got out of control. As you browse your site this clever extension works out CSS rules you’re not using.
Xray
This clever bookmarklet works for Firefox too.
Camino
Jon Hicks, the browser-hussy :-), has an on/off love affair with the more-Mac-like-than-Firefox browser from Mozilla. All the rendering goodness of Firefox in a beautiful Mac application. A close run thing with Safari for my main use browser.
Opera
The standards stalwart, not without it’s own quirks and disregarded by the mainstream. Although powers plenty of mobile phone browsers and the Nintendo Wii. So important to keep around.
Internet Explorer 7, 6, 5.5, 5
Anyone who designs or develops for the web has a hate-hate relationship with the dreaded IE, its entertaining quirks and funky behaviour can pass many a frustrating afternoon. Now at version 7 it is better, but it’s still not very good. Plus not much noise about any serious upgrades yet.
To run IE on a Mac you’ll need a copy of Windows XP and Parallels Desktop or VMWare Fusion if you want to avoid a reboot. I’ve had good (if occasionally flaky) experience with Parallels but their rate of development is truly impressive.
For those wanting to spend less cash and or have a gaming partition as well there’s BootCamp. Now at version 1.4. However with Leopard (the new Mac OS X) on the imminent horizon will it remain freely avalible?
You might want to shrink your XP install to save valuable hard disk space, particularly on a laptop.
I’ve not seen a great deal of linkage to Multiple IE, goodness knows why! It’s essential (unfortunately). Rather than keeping multiple partitions/machines around it allows you to run IEs 3 through 6 alongside your main IE7 install.
Grumble
Why do browser manufacturers make us jump through hoops to test on old version of their browsers, even Saint Jobs is guilty.
It should be simple, include an old binary, hell even give us a switch to let us render with an older version of the rendering engine. Why am I having to hack around inside applications to just see how a site looks? They must know that users don’t upgrade and thus designers need to test, in older browsers, for them. Where do they think these sites come from?
Anyhow. Rant over. And so is the article.