Cross-browser Development with SuperPreview

There are lots of ways to test for multiple browsers. Way back in the good ol’ days we had our own little browser ghetto—a seedy corner of the office where dusty, dishevelled computers and their unloved browsers gathered. Testing involved that most despised of activities: walking across the office.

Later, we installed virtual machines with different browser versions and different operating systems—a hefty investment of time, energy, and often machine-grinding frustration.

Other developers subscribed to solutions involving online tools such as browsershots.org, which render your pages in multiple browsers and return those renderings to you as bitmap images. Unfortunately, this approach is often slow and cumbersome, and only works on public URLs, which makes it difficult to debug as you’re building a site, and certainly doesn’t integrate easily with your development tools and lifecycle. More critically, none of these bitmap-based approaches allow you to debug beyond simple layout tests. For example, they offer none of the DOM inspection tools that you’d expect in a layout debugging system.

A little over a year ago, Microsoft released its first concerted attempt to make Internet Explorer testing easier: the SuperPreview—er…preview. In the year since its test-launch, a number of notable events have taken place.

Firstly, SuperPreview now incorporates non-Microsoft browsers into its test bed, which means you no longer need to switch out to test Firefox or Safari. It’s also become a much more mature, finished product. Finally, SuperPreview has been integrated into Microsoft’s main web development play, Expression Web.

So, if you’re late to the SuperPreview party, let me give you the executive summary.

When you’re done, remember to have a go at our Microsoft-sponsored Article Quiz.

Conducting a Basic Test

From Expression Web, launching SuperPreview for the current page is simple: choose Display in SuperPreview from the File menu. Once SuperPreview loads, you’ll see the display shown in Figure 1, “SuperPreview awaiting browser selection” as the program waits for you to select your desired browser.

Figure 1. SuperPreview awaiting browser selection

SuperPreview awaiting browser selection


Select Internet Explorer 8, on th left-hand side, as shown in Figure 2, “Selecting IE8”.

Figure 2. Selecting IE8

Selecting IE8


And on the right, click on Firefox 3.6.3, as shown in Figure 3, “Selecting Firefox 3.6.3”.

Figure 3. Selecting Firefox 3.6.3

Selecting Firefox 3.6.3


And voilà! You now see a side-by-side comparison rendering of your page like the one shown in Figure 4, “Comparing the site, at a glance, in different browsers”.

Figure 4. Comparing the site, at a glance, in different browsers

Comparing the site, at a glance, in different browsers


If you want to test the page in other browser versions, simply click on the add (+) button next to the browser you need, as shown in Figure 5, “Adding more browser versions to the test”.

Figure 5. Adding more browser versions to the test

Adding more browser versions to the test


Which Browsers Are Supported?

So, which browsers are supported by SuperPreview? Out of the box, the tool supports IE6, IE7, IE8, and IE8 in Compatibility Mode. To add Firefox, simply install th browser on your machine.

Interestingly, SuperPreview also supports Safari 4.0.4 on OSX. I’m sure you’re a little curious as to how Safari on OSX magically renders on a Windows PC. The answer is that Microsoft has implemented a web service that renders Safari on OSX in the cloud.

To enable this feature, simply click on the Remote Browser button on the main tool bar, as illustrated in Figure 6, “The Remote Browser button”.

Figure 6. The Remote Browser button

The Remote Browser button


You’ll be prompted to sign in for a free Remote Browser account. And from now on, whenever you choose to get a page render using Safari on OSX, SuperPreview will call the web service and bring back a render. Pretty cool, eh?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

No Reader comments

Comments on this post are closed.