作为前端开发人员来说，我们需要和HTML，CSS和Javascript打交道，并且需要不停的突破自己的创意极限来开发和设计最棒的交互场景。很多资深的前端设计师都拥有自己最喜欢的工具，脚本和资源，在今天我们的这篇文章中，我们将介绍一些能够帮助你高效开发的工具脚本和资源，权当抛砖引玉，希望能够 带给大家帮助，如果你也有自己喜欢的好东西，请给我们留言，希望能够让更多的朋友了解。
JSFIDDLE
jsfiddle是 一个超棒的在线js/css/html调试和分享工具，大家可以方便的在web页面中分享代码，或者调试代码。并且有效的和同事或者朋友分享。相信很多朋 友都使用过它，作为小编我来说，jsfiddle也是必备工具之一。很多我们的在线文章都使用jsfiddle来做“在线调试”。更重要的是你可以将 jsfiddle内容插入你的文章内容，这样你就可以边学边调试，是不是非常方便。
JSBin
JSbin是另外一个相当不错的在线调试和分享网站，和jsfiddle非常类似，但是整体界面更偏重于编辑和调试。 你拥有更大的编辑区域，而且拥有控制台可以查看错误。
HTML/CSS/Javascript的在线开发工具 - Fiddle Salad
超棒的HTML/CSS/Javascript的在线开发工具 - Fiddle Salad，如果你使用过jsfiddle的话，相信大家会更喜欢这个功能强大的在线整合开发环境。
Tinkerbin
另外一个在线调试和演示前端开发工具，和jsfiddle比较起来，TinkerBin界面功能比较简答，但是界面布局更加合理。使用jsfiddle的时候，总感觉每一个窗口的输入都比较费劲，用户不得不来回的拖拉窗口。而使用Tinkerbin， 你可以更加容易的切换多个窗口或者单一个窗口来浏览器CSS，HTML，或者JS代码。
Browser Support
作为一个前端开发者来说，处理不同浏览器的兼容性问题如同家常便饭，但是如果让你说出不同浏览器的CSS兼容性区别，还真不太容易，这里介绍的这个工具Browser Support，可以很方便的告诉你不同浏览器下的CSS区别，是否被支持。相当的方便！
openwebicon
如果你厌倦了图片生成的图标的话，使用openwebicon是一个不错选择，你只需要添加class即可生成需要的图标。
gradient-scanner
这个工具超酷，能够帮助你将上传图片中的渐变特效生成CSS样式，非常便捷和高效，也非常实用。
Em Calculator
Em calculator是一个轻巧的javascript工具能够帮助你创建灵活的CSS设计。它帮助你转换像素到em单位。可以帮助你有效的查看和比对像素和字体大小。
CSS ARROW PLEASE!
一个在线简单实用生成气泡式提示的web工具
checkmycolours
一个帮助你检查网站颜色对比度的工具，能够有效的帮助你设计搭配完美的颜色方案。
Screenqueri.es
如果你需要开发响应式布局设计的网站的话，这个工具肯定能够帮你大忙，它能够模拟不同设备的屏幕尺寸，并且帮助你占线不同设计上的网站显示效果，绝对是测试必备工具。
Dirty Markup
如果你需要一个帮助你规整书写混乱的代码的工具的话，我强烈推荐给你这个在线代码美化工具 - Dirty Markup。这个在线工具能够帮助你有效的处理HTML/HTML5，CSS和javascript代码。
jQuery mobile原型设计开发工具 - codiqa
一个超棒的在线jQuery mobile原型设计开发工具：Codiqa，这个在线设计工具能够帮助我们快速的使用拖拽的方式来构建一个jQuery mobile的web应用程序。
Screenfly
Screenfly是一个免费测试工具，可以用来测试不同客户端下（不同显示器或者移动设备）网站显示状况的工具。
它使用一个代理服务器来模拟设备，并且支持最流行的平板电脑或者移动设备。
Fixie
fixiejs是一个超实用的虚构内容生成脚本，如果你设计网站或者网页，往往需要添加一些文字或者图片内容，查看效果，这个脚本可以有效的帮助你生成不同类型内容，让你专注于设计本身！
SimpleCart
超酷的纯javascript实现的购物车程序，能够很有效的帮助你生成一个B2C购物车。简单，实用，快捷！
Animate.css
animate.css 是一套超棒的CSS动画脚本，可以帮助你使用CSS实现各种类型的动画，不同的淡入，淡出， 或者旋转，翻转特效。绝对是帮助你快速生成特效的好工具，你可以通过使用jQuery的addClass来给你的元素添加特效，方便实用，非常易于整合。 相信你一定会喜欢的！
Redactor - html富编辑器
基于jQuery的一个超棒WYSIWYG编辑器 - Redactor。这个编辑器使用jQuery技术作为框架开发完成，整合了很多炫酷的功能，比如，拖拽上传文件，及其自动保存等，速度很快，并且体积非常小。
jqueryboilerplate
jQuery Boilerplate是一个不错的jQuery插件开发工具，使用这个工具可以帮助你快速的构建一个jQuery框架。
如果你也有你常用的前端开发工具，请给我们留言！
来源：分享一些前端开发人员必备的工具，脚本和资源
