SuperPreview Technology

Hi, I'm a Program Manager for SuperPreview and wanted to blog a bit about how the technology of SuperPreview works. My goal is to help our users better understand the capabilities of SuperPreview and some of its limitations.

SuperPreview captures an image rendering and DOM after a web page loads.

SuperPreview relies on the locally installed browser rendering engines to take a snapshot in time of how the page is rendered. In taking this snapshot we do a few things to provide the most complete picture possible.

• Capture key information from the Document Object Model of the browser. We provide users with information that will help them indentify their elements and diagnose problems. For every visible element on the page this information includes:
  • ID and Class
  • Height & Width
  • Position on page from top left corner.
• Scroll the viewport to get a full rendering of the web page regardless of the page's length.

It is important to note, this is a snapshot in time, so interactive elements such as Javascript roll-over or accordion menus will not manifest in SuperPreview.

Javascript support through onLoad in SuperPreview

Through exhaustive testing we found that many sites use Javascript to do fix ups on their pages to address cross browser problems. To support web designers and developers using these types of fixes SuperPreview runs Javascript up thru the onLoad event of the page. After the onLoad Javascript runs we take our snapshot rendering of the page to get the most accurate picture possible of how your site will present itself to your users.

How the available browser list is built.

To do comparisons, SuperPreview for Internet Explorer uses your locally installed browser versions. It also includes a copy of Internet Explorer 6, allowing users to escape the neccessity of a virtual machine for testing IE 6. Depending on which version of IE you have installed different browser versions will appear available in SuperPreview.

Known Issues

We are currently aware of problems with IE 6 not showing up on Win 7 and are actively investigating. For other known issues please review the Release Notes (readme.en.htm in your install directory.)

Links

Download SuperPreview for Internet Explorer

Hopefully this post will help you better understand what SuperPreview does and how you can incorporate it into your workflow to more easily design cross-browser compatible sites.

Thanks,
Alex Moskwa