调试类工具(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,整个页面非常简洁清晰,可以打开多个窗口来浏览同一个地址在不同浏览器中的显示效果。

前端开发常用的工具汇总(2)-魏星博客
(点击查看大图)图1-16? SuperPreview的工作区

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

前端开发常用的工具汇总(2)-魏星博客
(点击查看大图)图1-17? SuperPreview分别显示IE 6与IE 7的效果

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

前端开发常用的工具汇总(2)-魏星博客
(点击查看大图)图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中使用。