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.
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.
|Installed Internet Explorer Version||Browser Choices Available|
|IE 6||IE 6|
|IE 7||IE 6, IE 7|
|IE 8||IE 6, IE 8, IE 8 (Compatibility View)|
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.)
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.