“工欲善其事,必先利其器”,现在开发Web应用和前些年相比已经完全不同了。早些年开发ASP应用时,只需要掌握如何应用Dreamweaver就行了;而现在Web应用得越来越成熟,开发语言也更多样化,特别是在Web标准、兼容性、性能、调试、设计等方面得到了广大用户的重视,基于Web的工具应用也越来越多。这些工具能辅助我们在开发效率、思维拓展、协同工作等方面进行改善。下面的小节中将列举一些前端开发人员所必须掌握的工具,相信它们能给我们的工作带来便利。

1、设计类工具

Adobe公司旗下的一些软件是我们最常使用的工具集,下面分别介绍其中的一些软件。

Adobe Photoshop作为一款最早用于平面设计的软件,现在也常被视觉设计师应用于Web的视觉原型稿制作。视觉设计师可以根据线框图原型稿进行视觉设计,最终完成真实的Web视觉原型,交付评审。同时Photoshop还可以用于切割图片,将视觉稿切割成小图供编码人员使用,一些背景图、PNG图、CSS精灵的整合图片都离不开Photoshop这款史上功能最强的图像制作软件。

Adobe Flash动画制作软件虽然是制作矢量动画的软件,但是它已成为Web中不可或缺的元素,从主题广告到交互动画,都离不开Flash。

Adobe Fireworks的推出满足了网页设计师的一些需求,如切片、添加热点等,既可编辑位图,也可编辑矢量图。如果要制作一些GIF小动画,用它来编辑比用Photoshop要方便得多。

Adobe Dreamweaver是快速的HTML/CSS/脚本编辑软件,提供了自动补全功能,同时还提供所见即所得的功能。如果你不善于记住每个HTML/CSS属性,那么Dreamweaver是最好的选择。

2、原型类工具

产品原型设计的形式比较多样,可以是图表,也可以是HTML,在实现的工具上也有许多选择,一些常用工具就能够简单实现(如Photoshop、Office),当然还有一些专业的工具能帮助我们更快捷地设计。

Adobe Flash Catalyst是Adobe公司新增的Flash平台产品,面向的是设计师及开发人员,它提供了一种协作平台,为设计师和开发人员架起一座沟通的桥梁。如果你没有开发Flash应用,那么用它来进行交互原型的开发是很简单的。

Balsamiq Mockup是一款类似手绘涂鸦风格的界面原型工具,采用Adobe AIR技术开发,包含丰富的界面组件,可以帮助我们设计任何界面原型。

Axure RP是一款功能很强大的原型工具,能帮助网站需求设计者快速完成原型文档、交互界面、功能流程,可以直接生成浏览器Demo版本或Word文档,它的特点是能够开发一些交互性的原型,在第2章中我们将提到它的一些简单用法。

Pencil最早只是Firefox的插件,后来基于XULRunner发布了桌面版应用,程序使用XUL进行开发,可以用来作原型图,它也是一款不错的工具。

3、调试类工具(1)

在前端开发中,主要以调试HTML、CSS、JavaScript为主,在编写前端应用中都需以Firefox为主进行开发。在Firefox中表现良好了,在其他的浏览器中当然也不会有特别异样的地方。IE、Firefox、Chrome、Safari、Opera等浏览器一个都不能少,特别要提到的是Firefox,它的插件非常丰富,我们主要应用两款插件完成前端的调试工作,其他丰富的组件可以访问https://addons.mozilla.org/zh-CN/firefox/browse/type:7

1. Firebug

Firebug在Firefox的插件中属于五星级的插件工具,它集合了查看HTML结构及样式、实时编辑等功能,是开发HTML、CSS、JavaScript的得力助手,我们可以利用它全面了解页面,可以对任何网页的CSS、HTML、JavaScript进行实时的编辑、调试和监控。如图1-12所示为Firebug的运行界面。

前端开发常用的工具汇总(1)-魏星博客
(点击查看大图)图1-12? Firebug运行界面

2. HttpWatch

HttpWatch是一个老牌的调试工具,支持与IE和Firefox的集成,通过工具可以看到整个页面交互的详细过程,见图1-13。

前端开发常用的工具汇总(1)-魏星博客
(点击查看大图)图1-13? HttpWatch页面视图

对某个URL请求的具体细节也可以一一概览,比如Header内容、Cookie内容、响应时间图、提交信息、流信息等,见图1-14。

前端开发常用的工具汇总(1)-魏星博客
(点击查看大图)图1-14? 某次URL请求的Header信息

该工具同样还支持一些报告的生成与分析。这些强大的功能有助于开发人员进行性能分析与问题定位。

3. Yslow

Yslow是由Yahoo开发的一套网页评分插件,共有12条使用准则,使用它可以评估网页设计上的不足之处。它还提供了许多改进意见,Yslow与Firebug集成在一起,所以需要先安装Firebug插件才能使用。使用Firefox访问https://addons.mozilla.org/zh-CN/firefox/addon/5369,点击“添加到Firefox完成安装”,重启浏览器即可使用Yslow。打开右下角仪表盘图标,运行测试,Yslow将对网页进行分析,并给出评分及建议,见图1-15。

前端开发常用的工具汇总(1)-魏星博客
(点击查看大图)图1-15? Yslow的分析与建议

根据Yahoo提出的性能优化最佳实践法则,共分7大类、35条准则,如基于内容方面的10条为:

尽量减少HTTP请求

缓存Ajax

推迟加载

提前加载

减少DOM元素数量

使用域名划分页面内容

尽量减少iframe的数量

尽可能地减少DNS的查找

避免404错误

避免页面的重定向

转自:http://book.51cto.com/art/201008/222603.htm