14个高效前端开发所必备的工具/脚本推荐(转载)

作为前端开发人员来说，我们需要和HTML、CSS和JavaScript打交道，并且需要不停的突破自己的创意极限来开发和设计最棒的交互场景。

很多资深的前端设计师都拥有自己最喜欢的工具、脚本和资源，在今天这篇文章中，我们将介绍一些能够帮助你高效开发的工具脚本和资源，权当抛砖引玉，希望能够带给大家帮助，如果你也有自己喜欢的好东西，请给我们留言，希望能够让更多的朋友了解。

1. JSFIDDLE 
JSFIDDLE是一个超棒的在线JS/CSS/HTML调试和分享工具，大家可以方便的在web页面中分享代码，或者调试代码。并且有效的和同事或者朋友分享。 
 

2. JSBin 
JSbin是另外一个相当不错的在线调试和分享网站，和JSFIDDLE非常类似，但是整体界面更偏重于编辑和调试。你拥有更大的编辑区域，而且拥有控制台可以查看错误。 
 

3. HTML/CSS/Javascript的在线开发工具 - Fiddle Salad 
超棒的HTML/CSS/Javascript的在线开发工具，如果你使用过JSFIDDLE的话，相信大家会更喜欢这个功能强大的在线整合开发环境。 
 

4. Tinkerbin 
另外一个在线调试和演示前端开发工具，和jsfiddle比较起来，TinkerBin界面功能比较简答，但是界面布局更加合理。使用jsfiddle的时候，总感觉每一个窗口的输入都比较费劲，用户不得不来回的拖拉窗口。而使用Tinkerbin， 你可以更加容易的切换多个窗口或者单一个窗口来浏览器CSS、HTML或者JS代码。 
 

5. Browser Support 
作为一个前端开发者来说，处理不同浏览器的兼容性问题如同家常便饭，但是如果让你说出不同浏览器的CSS兼容性区别，还真不太容易，这里介绍的这个工具Browser Support，可以很方便的告诉你不同浏览器下的CSS区别以及是否被支持。相当的方便！ 
 

6. openwebicon 
如果你厌倦了图片生成的图标的话，使用openwebicon是一个不错选择，你只需要添加class即可生成需要的图标。 
 

7. gradient-scanner 
这个工具超酷，能够帮助你将上传图片中的渐变特效生成CSS样式，非常便捷和高效，也非常实用。 
 

8. Em Calculator 
Em calculator是一个轻巧的JavaScript工具，能够帮助你创建灵活的CSS设计。它帮助你转换像素到em单位。可以帮助你有效的查看、比对像素和字体大小。 
 

 

9. CSS ARROW PLEASE! 
一个在线的、简单实用的生成气泡式提示的web工具。 
 

10. checkmycolours 
一个帮助你检查网站颜色对比度的工具，能够有效的帮助你设计搭配完美的颜色方案。 
 

11. Screenqueri.es 
如果你需要开发响应式布局设计的网站的话，这个工具肯定能够帮你大忙，它能够模拟不同设备的屏幕尺寸，并且帮助你占线不同设计上的网站显示效果，绝对是测试必备工具。 
 

 

 

12. Dirty Markup 
如果你需要一个帮助你规整书写混乱的代码的工具的话，我强烈推荐给你这个在线代码美化工具。这个在线工具能够帮助你有效的处理HTML/HTML5、CSS和JavaScript代码。 
 

13. jQuery mobile原型设计开发工具 - codiqa 
一个超棒的在线原型设计开发工具，这个在线设计工具能够帮助我们快速的使用拖拽的方式来构建一个基于jQuery mobile的web应用程序。 
 

14. Screenfly 
Screenfly是一个免费测试工具，可以用来测试不同客户端下（不同显示器或者移动设备）网站显示状况的工具。它使用一个代理服务器来模拟设备，并且支持最流行的平板电脑或者移动设备。 
 

 

 

15. Fixie 
fixiejs是一个超实用的虚构内容生成脚本，如果你设计网站或者网页，往往需要添加一些文字或者图片内容来查看效果，这个脚本可以有效的帮助你生成不同类型内容，让你专注于设计本身！ 
 

16. SimpleCart 
超酷的纯JavaScript实现的购物车程序，能够很有效的帮助你生成一个B2C购物车。简单、实用、快捷！ 
 

17. Animate.css 
animate.css 是一套超棒的CSS动画脚本，可以帮助你使用CSS实现各种类型的动画，不同的淡入、淡出，或者旋转、翻转特效。绝对是帮助你快速生成特效的好工具，你可以通过使用jQuery的addClass来给你的元素添加特效，方便实用，非常易于整合。 相信你一定会喜欢的！ 
 

18. Redactor - HTML富编辑器 
基于jQuery的一个超棒WYSIWYG编辑器。这个编辑器使用jQuery技术作为框架开发完成，整合了很多炫酷的功能，比如，拖拽上传文件、自动保存等，速度很快，并且体积非常小。 
 

19. jqueryboilerplate 
jQuery Boilerplate是一个不错的jQuery插件开发工具，使用这个工具可以帮助你快速的构建一个jQuery插件。