前端开发常用的工具汇总（2）

调试类工具（2）

4．Microsoft Expression Web SuperPreview

Expression Web SuperPreview支持开发人员在不同的浏览器中模拟呈现Web页以检测布局问题。SuperPreview既有独立的安装版本，也可以集成到Expression Web。如今的浏览器除了Firefox和IE，还有Safari、Opera和Chrome的跨平台版本，以及大量的手机浏览器。除此之外，这些浏览器又有多个版本，它们又有很多不同的呈现特性（如IE 6、IE 7和IE 8）。

当今的Web开发人员面临着如下困境：

大多浏览器的不同版本不能同时存在，应以新版本替换旧版本。所以，在同一台机器上不能同时安装IE 6和IE 7（除非使用虚拟机或者不稳定的注册表技巧）。

很多浏览器同时支持Mac和Windows。开发人员至少要在Mac Safari中进行测试，而Windows版的Safari中呈现的内容却有所不同。

浏览器的人体工学测试则更加糟糕。大多数开发人员要加载他们的网站到演示服务器上，而服务器上却运行着不同的浏览器，他们不得不在每一台机器上手动加载，然后在每台机器上对不同的浏览器进行比较。

SuperPreview这款调试工具正好能帮你解决这些燃眉之急。它需要.NetFramework 3.5的支持，可到微软官方网站下载它的预览版。预览版只支持IE 6、IE 7和IE 8，想要支持更多的浏览器请购买商业版的产品。下面让我们一起看看效果。

SuperPreview的工作区页面见图1-16，整个页面非常简洁清晰，可以打开多个窗口来浏览同一个地址在不同浏览器中的显示效果。

（点击查看大图）图1-16? SuperPreview的工作区

以著名的门户网站为例，效果见图1-17。图1-17的左侧为IE 6的显示效果，右侧为IE 7的显示效果。看来该门户对IE6与IE7的支持都很不错，在这两个浏览器下都可以正常地显示页面。

（点击查看大图）图1-17? SuperPreview分别显示IE 6与IE 7的效果

不过精确到某个DIV的高度和宽度，IE 6与IE 7下显示的效果还是有显著区别的，通过层叠视图就可以看出（见图1-18）。

（点击查看大图）图1-18? SuperPreview的层叠视图效果

有了这样一款工具，相信可以很好地节约你解决IE各版本兼容性问题的时间。

4、辅助类工具

为了提高Web的性能，需要将脚本用样式文件压缩一，即减少文件的大小，将不必要的空格等去除，同时也可以将脚本中的变量等进行混淆。YUI Compressor是值得推荐的压缩工具，它的压缩比大约为50%，详细信息可以参考Yahoo开发者网络。

在进行CSS Sprites样式开发时，经常需要对Photoshop中制作的图片进行测算，比较麻烦。这时可以利用CSS Sprites样式生成工具快速地测算每张小图的位置，具体参考http://www.cssforest.org/blog。关于CSS Sprites的内容在以下章节中将详细描述。

Web中必不可少的就是颜色。碰到你喜欢的颜色，可又不知道它的值，该怎么办呢？除了使用Photoshop进行取色外，还可以使用Yahoo提供的取色软件（PickColor），既方便又快捷。除了取色，配色也是件麻烦的事情。如果没有好的配色方案，那么Adobe Kuler可以为你提供很多方案，还可以将完美的配色方案导入Photoshop中使用。