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站点。
图1-5 Layer Styles站点
2.Bear CSS
该工具可以根据上传的HTML文档，采集其中所使用的HTML元素，来生成CSS模板。Bear CSS站点如图1-6所示。
图1-6 Bear CSS站点
1.4.2 JavaScript工具
1.Bookmarkleter
该工具可以将你的JavaScript代码转换成一个小书签，帮助用户进行代码压缩和URL编码。Bookmarkleter工具站点如图1-7所示。
图1-7 Bookmarkleter工具站点
网址：https://chriszarate.github.io/bookmarkleter/
2.JSLint
这是一个JavaScript调试工具。可以查找代码中的潜在问题，并返回一条消息，告诉用户存在的问题以及出现的位置。JSLint工具站点如图1-8所示。
图1-8 JSLint工具站点
1.4.3 图像优化工具
1.PunyPNG
该工具可以大大降低图像文件的大小，且没有任何质量损失。PunyPNG工具站点如图1-9所示。
图1-9 PunyPNG工具站点
2.SpriteMe
该工具以一种不同的方式来创建CSS Sprites。这是一个书签，可以检测用户网站中的图像，并相应地进行CSS Sprites的操作。SpriteMe工具站点如图1-10所示。
图1-10 SpriteMe工具站点
1.4.4 开发及调试工具
1.WebStore
WebStore是jetbrains公司旗下的一款JavaScript开发工具，被广大中国JavaScript开发者誉为“Web前端开发神器”“最强大的HTML 5编辑器”“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JavaScript部分的功能。WebStore工具站点如图1-11所示。
图1-11 WebStore工具站点
2.Fiddler
Fiddler是一个HTTP协议调试代理工具，它能够记录并检查计算机和互联网之间的HTTP通信，设置断点，查看所有的“进出”Fiddler的数据，包含Cookie、HTML、JS、CSS等文件，这些数据都可以让开发者在调试时随意修改。Fiddler比其他的网络调试器更加简单，因为它不仅仅暴露HTTP通信，还提供了一个用户友好的格式。Fiddler工具站点如图1-12所示。
图1-12 Fiddler工具站点