JavaScript cross-browser testing

You've probably all experienced the delights of having to accommodate browser quirks in CSS. Well, they're quirky about JavaScript, too. It's important to test your site not only in all the main browsers (Internet Explorer (IE), Chrome, Firefox, Safari and Opera) but, particularly in the case of IE, earlier versions of the browsers.

Why so quirky?

When a user receives a page which includes JavaScript, the JavaScript interpreter of his browser kicks in and tries to execute the script. The main problem here is that the various browsers each use their own interpreter, and that sometimes browser vendors have
chosen not to implement a bit of JavaScript. Their reasons were usually related to business advantage over the competitors.

Hence the feared browser incompatibilities.

In addition each new browser version understands more JavaScript and allows more and more parts of the HTML page to be changed by scripts. This leads to even more incompatibilities.

There are a number of sites which list these incompatibilities (Quirksmode and WebDevot, for example), but those lists are formidable. It's best to solve compatibility problems on a case-by-case basis. Which is why you should test your site in as many browsers as possible.

So what can we do?

Obviously, you should install as many of these browsers on your machine for testing purposes as possible.

IE is the biggest problem browser, partly because it has a wealth of unique quirks, but particularly for Mac users, since Microsoft dropped its Mac version in 2003 in a fit of pique at Apple. It would be stupid to ignore IE, since it has the largest user base of all the browsers by quite a margin. However, as the chart here shows, IE users don't actually access the web nearly as much as users of other browsers. It was beaten into 4th place in usage by Chrome, Firefox and even Safari.

IE users also tend not to update, and there are a great many legacy IE browsers in the wild. Microsoft finally officially dropped support for decade-old IE6 about a year ago, but it's still out there, quite often in large corporations who don't want to update for security reasons. Which is odd, because it's been roundly criticised for its security, being branded 'the least secure software on the planet'.

Of course, Mac users can install Windows on their machine, using Parallels and other methods (like various flavours of Wine), Unfortunately, thorough testing requires you to install multiple versions of IE, which would demand creating a Virtual Machine for each version. You will also have to splash out on one or more flavours of Windows OS. Frankly, you might as well buy a cheap Windows laptop.

Online alternatives

There are a number of sites which offer online browser testing, where the host machine simulates various computing environments to test your pages in. The best of these was, until recently Adobe Browser Lab, which, sadly, has now been abandoned by Adobe. Sadly, because it was free, and the remaining alternatives do like to charge.

Without any order of preference, you can try, among others: Modern IE, Net Renderer, Browser Stack, Sauce Labs, or Browser Test. Some offer a limited amount of free testing, but only around 45 minutes per month. If that's all the testing you're planning to do, you're in luck. Otherwise fees start at around $19 per month.

The Mac cavalry

There is a little-known alternative for Mac users.

In Safari's Develop menu, which has to be turned on in Safari Preferences, you can access the User Agent tab, which enables you to view your pages rendered by different web engines, including IE 7 through 10, and Chrome and Firefox for Windows.

I don't know if the same feature is available in Safari for Windows. Maybe I should install Parallels and find out.