1.4 Web前端开发工具

优秀的工具可以使开发者的开发工作事半功倍，创建出高品质的Web应用程序。本节将介绍8款重要的Web开发工具，涵盖CSS、JavaScript、图像优化及调试的Web开发工作，希望对开发者有所帮助。

1.4.1 CSS工具

1.Layer Styles

如果不想去记新的CSS 3特性和前缀，Layer Styles可帮上你的忙，该工具使用类似于Photoshop图层样式的界面，让你轻松配置阴影、背景、边框和边界半径。图1-5所示为Layer Styles站点。

网址：http://layerstyles.org/

2.Bear CSS

该工具可以根据上传的HTML文档，采集其中所使用的HTML元素，来生成CSS模板。Bear CSS站点如图1-6所示。

网址：http://bearcss.com/

1.4.2 JavaScript工具

1.Bookmarkleter

该工具可以将你的JavaScript代码转换成一个小书签，帮助用户进行代码压缩和URL编码。Bookmarkleter工具站点如图1-7所示。

网址：https://chriszarate.github.io/bookmarkleter/

2.JSLint

这是一个JavaScript调试工具。可以查找代码中的潜在问题，并返回一条消息，告诉用户存在的问题以及出现的位置。JSLint工具站点如图1-8所示。

网址：http://www.jslint.com/

1.4.3 图像优化工具

1.PunyPNG

该工具可以大大降低图像文件的大小，且没有任何质量损失。PunyPNG工具站点如图1-9所示。

网址：http://conradchu.com/

2.SpriteMe

该工具以一种不同的方式来创建CSS Sprites。这是一个书签，可以检测用户网站中的图像，并相应地进行CSS Sprites的操作。SpriteMe工具站点如图1-10所示。

网址：http://spriteme.org/

1.4.4 开发及调试工具

1.WebStore

WebStore是jetbrains公司旗下的一款JavaScript开发工具，被广大中国JavaScript开发者誉为“Web前端开发神器”“最强大的HTML 5编辑器”“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JavaScript部分的功能。WebStore工具站点如图1-11所示。

网址：http://www.webstore.com/

2.Fiddler

Fiddler是一个HTTP协议调试代理工具，它能够记录并检查计算机和互联网之间的HTTP通信，设置断点，查看所有的“进出”Fiddler的数据，包含Cookie、HTML、JS、CSS等文件，这些数据都可以让开发者在调试时随意修改。Fiddler比其他的网络调试器更加简单，因为它不仅仅暴露HTTP通信，还提供了一个用户友好的格式。Fiddler工具站点如图1-12所示。

网址：http://www.telerik.com/fiddler