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

“工欲善其事，必先利其器”，现在开发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-12? Firebug运行界面

2. HttpWatch

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

（点击查看大图）图1-13? HttpWatch页面视图

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

（点击查看大图）图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-15? Yslow的分析与建议

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

尽量减少HTTP请求

缓存Ajax

推迟加载

提前加载

减少DOM元素数量

使用域名划分页面内容

尽量减少iframe的数量

尽可能地减少DNS的查找

避免404错误

避免页面的重定向

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