这篇是SuperPreview软件的体验篇，之前有一篇SuperPreview的感慨篇，如果您对其有兴趣可以点击这里《“IETester”微软官 方产品SuperPreview之感慨篇》

牢骚发过了，现在来看看这款软件给我们带来的革命吧！

如果您还没有下载，点击这里下载Microsoft Expression Web 3 SuperPreview（官方地址）

如果您已下载成功，那么跟我一起开始把它安装到自己的电脑里面吧！（高手绕路）

首先运行刚刚下载好的文件，运行后会出现如下步骤：

step1：License agreement 许可协议，当然是点Accept接受了

setp2: Installation 安装，点击options会出现如下图所示的更改路径界面，默认是c:\Program Files\Microsoft Expression（我习惯性吧应用程序放D盘,因此我这里显示的是d:\Program Files\Microsoft Expression），您也可以选择自己喜欢的安装路径。选择好安装路径后，点击install。

step3、安装等待……

step4、安装成功后的感谢界面，下面有个按钮View release notes查看发行声明，点击会到微软官方的说明网站，这里选择Finish按钮，完成。

这样就把Super Preview安装到电脑了，现在点击桌面的图标开始体验吧！

打开等待界面……

之所以放上这个安装步骤，其实主要原因是我很喜欢它的UI（用户界面），毕竟使用这个软件的人都是前端工程师，都是对审美有需求的，自然我也不例外，其实微软近期发布的新产品UI都全换成类似于这样的了，例如Office2010,毕竟是有影响力的企业，UI总是有我们可以借鉴的地方，比如配色，构图等等。一个好的设计师并不是天生的，而是用时间和经验还有欣赏所积累的。

接下来，就是我们的SuperPreview窗口了。

如此，您看到的便是期待的、传说的、神秘的Microsoft Expression Web 3 SuperPreview整个界面了。可能它并不像我们想像的那样完美，比如它会看起来更像是浏览器，可惜，它不是，而是更像一个类似于图形图像软件的页面调试工具，正如它的界面所传达的信息一样，它会把我们将调试的网页生成一张全览图，类似于Adobe公司的browserlab。

不过值得庆幸的是，它也并没有那么糟糕，虽然我们看到的是一张我们网页的全览图，但是它会生成我们布局中所用到的任何一个元素位置，然后通过一个类似于FireBug的选择工具来选取我们想了解的元素，并且点击它会显示这个元素的大小、左边的距离值，和顶部的距离值，这样我们就可以通过左右对比来判断在IE6和IE8下布局中元素的布局差别了。

如图所示，这是此网站在superpreview下的IE6（左）和IE8（右）的对比，我用鼠标选择了导航的首页按钮（当选择任意一边时，另一边会同时选择），然后会同事在对比窗口左下角显示这个元素的信息，其中两侧数据不同的地方，信息位置会把差异值显示成红色。

点击界面右下角的DOM（Document Object Model文档对象模型）按钮，可以在界面下方弹起一个类似于FireBug的调试窗口，并显示出在对应浏览器下所有的元素（如果使用了判断注释，例如[if IE6]那么在IE8下将不显示其中的DOM）。和选择图中的元素一样，当点击任何一边的标签时，右侧的标签便会一起选中，并显示其数值。

其它功能

在界面顶部是SuperPreview软件的功能区，从左向右依次是：

1.1、Selection Model选择器，快捷键（V）（通过它选择任何想得到的界面中元素）

1.2、Panning Model拖动，快捷键（H）（拖动界面视图到需要的位置，拖动任意一方，另一方会一起移动到相同位置）

2.1、凸显方式:Box highLighting Model圈中元素，快捷键（L）（如上图样式）

2.2、凸显方式：Light-Out highlighting Model高亮元素,快捷键（L）（下图样式）

3.1、Toggle ruler visiblity切换标尺可见性，快捷键（R）（点击打开和关闭边缘的标尺）

3.2、Toggle thumbnail visiblity切换缩略图可见性，快捷键（T）（点击会在窗口右下角显示一小条网页的全景缩略图）

3.3、Toggle guide visiblity切换指示的可见性，快捷键（Ctrl+；）（没用出效果）

4.1、Vertical Split Layout垂直分割布局，快捷键（A）（上面截图所呈现的布局样式）

4.2、Horizontal Split Layout水平分割布局，快捷键（S）（上下显示布局）

4.3、Overlay Layout覆盖布局，快捷键（D）（重合显示两个窗口中的网页）

4.4、Single Layout单一布局，快捷键（F）（显示其中一个页面，然后通过下侧的tab切换当前显示）

5.1、地址栏

5.2、路径选择按钮

5.3、刷新

6、缩放比例（可以从中选择，也可以选中更改，还可以拖动鼠标实现缩放）

7、帮助

顶部的功能栏，到这里就介绍完了，如此整个软件介绍也差不多就是这些了，不过还有一个强大的功能，那就是底部的tab。

底部tab是显示的当前正在调试的网页，类似于我们浏览器的tab，但是如果这么想那就错了，仔细看：

如图所示，最左侧是我打开的IE6窗口，右侧依次是IE8和IE7，发现右侧右下方的加好了么，点击那个的话，如果我们新建立的是IE6窗口，那么最左侧的IE6会并合到右侧的tab里和IE8、7并列显示。自然，如果在左侧新建IE7的话，那么右侧并列显示的IE6就会跑到左侧Tab了。

另外一个细节是在软件右下角有个调整分辨率的选择器，通过它可以选择不同分辨率下我们要测试网页的显示效果。

好了，那么讲到这里就是我发觉到SuperPreview这个软件全部的功能了，如果您发觉到我没有发现的更好的功能，欢迎留言指出，或提供分享。谢谢！

不足：

任何东西都不会完美，这个软件虽然带给我们很大的便利，但是它还是存在一些令人讨厌的体验。

1、网页打开速度很慢

2、如果新建tab的话，它不会独立加载显示新建tab的页面，而是让我们刷新全部打开的tab。

3、只能针对一个网站测试

4、不能时时更改，类似于FireBug的功能

5、调试Javascript就更别想咯……

因此，虽然有了SuperPreview，但是我们还是不能摆脱安装古典浏览器的命运。希望微软能再改进改进吧！

谢谢观赏！

相关日志

• “IETester”微软官方产品SuperPreview之感慨篇
• 微软实验室产品Pivot浏览器初体验
• 基础Javasctipt正则表达式
• 网页测试工具分享
• IE9 Platform Preview——IE9预览版本

这篇是SuperPreview软件的体验篇，之前有一篇SuperPreview的感慨篇，如果您对其有兴趣可以点击这里《“IETester”微软官 方产品SuperPreview之感慨篇》

自从把我的XP系统换成Windows7之后,IETester就不好好工作了!不是运行时错误重启tab,就是IE7无法访问测试本地文件。不过我并没有就此放弃它，我总觉得IETester的开发人员会尽快修复这个BUG,但是用到现在，每次我打开IETester都会习惯性的去点更新，可每次得到的结果都是“您安装的已经是最新版本”。身为一个web前段开发者来说，这无疑是一个压在心头的石头，如果让我在那么好用的操作系统和已经过时的IE7浏览器调试之间选择，我很想放弃浏览器，但是毕竟那是我吃饭用的一根筷子，丢不得啊。情急之下，我只好用安装双系统的方法来解决应急之需，后来觉得总是重启电脑也不是办法，即耽误时间又中断思路。

后来发现搜狗浏览器用的是IE7的内核(鄙视一下，用还不用好的),于是我就把搜狗浏览器装上了。这样我在测试时IETester运行IE6，搜狗调试IE7,电脑自带IE8,加上Firefox,Chrome,Opera,Safari一一安装到电脑，这样一来，市面上的主流浏览器就齐了。后来觉得搜狗浏览器的用户体验很是垃圾（个人见解），尤其是在任务转换的时候，平时按Alt+tab一次转换的任务，在搜狗下要按两次，多少次的冲动我都想把搜狗置于万劫不复。谁叫我暂且依赖于它呢？另外一个方案http://spoon.net/browsers/网站提供一个沙盘运行的浏览器插件，安装上去后，它可以运行当前主流浏览器的多数版本，如IE6、7、8,Safari3、4，火狐2、3、3.5，Opera9、10和Chrome。后经win7测试，IE7也是不可以运行，看来一山不容二虎在电脑上一样适用——一系统不容二7呀！

不过现在好了，算是一个前段开发者的福音吧！微软官方推出IE6、7、8的官方测试软件——Microsoft Expression Web 3 SuperPreview（好长的名字）。

也不知道微软此举是该表扬呢还是该骂，值得表扬的是它终于为它曾经开发的的烂产品做了一个交代，让我们前段人员不再为了做一个网页而去下载几个不同版本的IE浏览器做调试了，而且在同一系统下不能同时安装。这也算是微软为以前的错误而付出的代价吧。

值得一骂的是，你早干嘛去了，首先，你不该把没有开发成功BUG重重的产品投入市场——IE6，其次，你不该发布稍做改动就当其是一次浏览器革命的IE7,再者，你不该让IE8孤立在IE6包围的环境中。IE6早该死了，无论XP系统怎样。如果上一个操作系统不是失败的vista而是如今的win7的话，估计现在IE8的市场份额依然处于浏览器市场的辉煌地位。可惜，当初错误的产品注定了微软浏览器现在的处境——浏览器市场正在被新生的Firefox和Chrome吞噬。如今只能期盼今年即将发布的IE9能有新的突破了。但是不知道对于人们或者早已改变的使用习惯，微软的IE9能否力挽狂澜，如果Microsoft live labs下的Pivot浏览器是一个IE9的前瞻技术预览的话，那么我想IE9会是一场革命（不过微软应该考虑一下IE9的运行环境和硬件需求，如果还像Pivot的话，囧），我想微软肯定不会眼看着自己的孩子被别人超越的。那么我们姑且对IE9翘首以盼吧！延伸阅读:《微软实验室产品Pivot浏览器初体验》。

好了，有了Microsoft Expression Web 3 SuperPreview我们可以抛弃IETester了，也可以不用为IETester的bug而用国产的寄生浏览器来弥补了，但是还是要感谢Windows XP时代下IETester为前段工程师所做的贡献。

相关日志

• 体验篇：Microsoft Expression Web 3 SuperPreview全攻略
• 微软实验室产品Pivot浏览器初体验
• 网页测试工具分享
• 第六期web标准化交流会心得
• 第六期web标准化交流会短记

如果非要这么说，那么我不会去否认，因为经过测试Pivot浏览器就内核来说和IE8没有什么分别，而且硬件的要求有点过分了，我电脑双核E5200 Core 双核2.0CPU、2G内存，安装Pivot浏览器后运行竟提示错误。经过测试是因为没有显卡的原因，加上显卡后运行正常。以下是Pivot官网提供的安装环境需求清单：

System Requirements

Recommended System Configuration: Windows 7 with Aero enabled, 2-GHz 32-bit (x86) processor, 2 gigabytes of random access memory.

推荐系统配置：启用了Aero效果的win7系统，2GHZ 32位CPU，2G独立内存。

Supported System Configuration: Windows Vista with Aero enabled, 2-GHz 32-bit (x86) or 64-bit (x64) processor.

可以支持的系统配置：启用了Aero效果的Vista系统，2GHz 32位或64位CPU

Minimum Graphics Requirements: 256 megabytes of video memory. Pivot does not support most Intel integrated video chipsets.

最低显卡配置：256M显存。并且不支持大多数的Intel集成显卡。

Pivot requires .NET Framework 3.5 SP1 and Internet Explorer 8. Pivot will import your browsing history from Internet Explorer and Firefox during installation.

电脑需要有.NET Framework 3.5 SP1 和 Internet Explorer 8.安装完成后，浏览器将自动导入IE和火狐的浏览历史等信息。

Windows XP is not supported. Pivot only displays in English (US).

XP系统不支持，浏览器仅有英文版本……

如此说来，我只能在公司电脑运行这个微软新生儿Pivot了……

所以它的第一个缺点是硬件需求比较高。囧。

初次打开Piovt,它会显示主功能提示信息,如图所示：

1、导航按钮：点击会在地址栏下方，以下拉菜单的形式显示一行当前tab的浏览历史页面缩略图。如图：

2、Favorites and Tags: 当打开一个新的网页时，这个位置会显示一个五角星，点击五角星便会将当前网页加入收藏，此时五角星会变成tag标签图标，点击这个图标，地址栏会出现提示输入标签以逗号间隔。如图所示：

3、Exploring  the Web: 网页显示窗口，而不仅仅只用于网页浏览。

4、Zooming Scrollbar: 可以缩放的滚动条，点住滚动条向左拖动会缩放整个网页直到整个网页大小，并且会有一个框选中当前浏览器窗口显示区域，上下拖动还可以实时重选。如图所示：

5、Quick Links: 在发现一个你喜欢的网页时，点击右侧那个箭头便可以把当前网页保存到快速链接表里，并以网站的favicon图标为按钮显示在浏览器下方，当你想打开它时，直接点击图标便可。在箭头下方的按钮是把已收藏在此栏上的网站以缩略图方式显示在窗口里。在快速链接的左侧被一条竖线隔开的是首页和历史链接按钮，点击首页按钮它会显示类似苹果浏览器的Top Sites功能，更好的是，在页面预览图的下方会显示一个最近关闭的tab列表，如图所示：

这个区域的功能还没有结束，在首页按钮右边的是历史按钮，点击它会出现按日期归档竖列横排显示的历史浏览页面缩略图,如图所示：

5.1、Exploring Collections(搜索集):点击项目可以查看更精确的预览，鼠标滚轮可以控制缩放，当屏幕放大后，还可以点住鼠标左键实现拖拽预览。（Ming注:此历史功能堪称强大之处就在于它的信息过滤和具有相当酷炫效果的动画预览，点击时间可以实现时间递归历史浏览网页，一层层的精确到秒）

5.2、Veiws（视图）:拖动滑块也可以实现缩放，右侧按钮是预览的方式切换。

5.3、Filters（过滤器）：使用过滤器筛选条件 ，缩小搜索范围。（Ming注：此处便是传说中的过滤器，左边栏一竖排都是控制条件列表，分别有：关键字过滤、站点过滤、搜索历史、访问日期、标签等来控制右侧历史的排序和显示，

关键字过滤器：展开此列会显示一个‘输入一个关键字（Enter a new keyword）’按钮，点击此时地址栏会提示输入‘过滤类型(Type to filter)’这时输入关键字并回车，便会实现过滤，并且输入历史会以复选框方式显示在关键字过滤器列表，那么以后通过左侧选中一个关键字便可实现过滤。


站点过滤器：此过滤器会以访问过网站的主域名和二级域名在左侧生成一个带有复选框的列表，通过选择主域名和二级域名分类显示相关目录的历史，从而便能更快速的定位搜索内容。

搜索历史：效果一样，同样是在列表生成带有复选框的列表，不同的是，这里是你搜索过的内容。

访问日期：效果一样，不同的是这里是访问日期列表，分栏显示，最上边是今天、昨天、一周。然后是月、年……

这个没整明白……

标签：效果一样，不同的是这里显示的是自己添加过的标签。

6、Collection Suggestions(收藏建议):Pivot 会建议您收藏一些内容到这里。通过和左侧的过滤器配合，将会产生很强大的搜索效果。IT168上有一篇介绍Pivot的文章,链接奉上：《全接触!微软最新浏览器Pivot的七个细节》其中详细介绍了关于过滤器与收藏集的使用。

7、站点选项卡（tab）、在5和6中间排列的是已打开网页的缩略图，类似于现在浏览器常见的tab选项卡，这个东西的好处就不再说了，不过对于pivot这个以预览展现的方式，除了opera自带（需自己调整）和火狐插件（需鼠标移上显示）之外，pivot这个方式显得更方便些。紧挨着这个的右边有一个加好和一个缩略图按钮，点加好可以增加新的tab,点缩略图按钮会把当前所有的tab以缩略图方式显示在浏览器窗口。

好了，对于pivot浏览器的体验就说到这里了，大家如果有对这个产品有兴趣并且系统配置能达到官方所标注的需求，那么不妨安装体验一下，因为它的体验还得您试过才知道，我这里只能用两个字代替——很酷。您可以

去Microsoft live labs了解更多关于Pivot的信息：http://getpivot.com/

还可以点击这里下载Pivot最新版本：http://content.getpivot.com/resources/Pivot.en-us.msi

如果您没有邀请码，可以留言给我，并留下您的联系方式，我这里有30个邀请名额，送完为止。

本文欢迎转载，转载请注明出处，谢谢！

相关日志

• “IETester”微软官方产品SuperPreview之感慨篇
• IE9 Platform Preview——IE9预览版本
• 体验篇：Microsoft Expression Web 3 SuperPreview全攻略
• 网页测试工具分享
• 第六期web标准化交流会心得