本身的前端工具集

找到好的工具和插件会在这里持续更新，方便收藏的童鞋回溯。但愿更多的童鞋可以把你工做上的用到的工具分享给你们！

切图类插件

• cutterman

• assistor-ps

做为页面仔，本身的ps没有一个好的插件怎么能行呢。

预处理器和后处理器

处理器

• Less

• Sass

• Stylue

• autoprefixer

编译工具

• gulp-autoprefixer

• gulp-less

• gulp-sass

• gulp-stylus

• gulp-sourcemaps 用来在浏览器中调试本身写的less\sass\stylus，可以准确在开发中工具定位。

• koala 不想使用gulp\grunt等自动化工具来编译的话，可使用这个，全平台支持。

编译工具中我经常使用到的gulp，因此都是依赖gulp插件的。若是你是使用别的自动化工具的话，能够去npm package官网上寻找你要的插件。

CSS 在线生成工具

• CSS小工具集合

• CSS3 Maker

• Border Radius

• CSS3 Generator

• CSS3 Tool

• CSS3 Keyframes Animation Generator

• Ceaser - CSS Easing Animation Tool - Matthew Lein

• Stylie

• CSS背景颜色属性值转换 v3

在线的css3工具，做为学习和编写css特效项目有很大的帮助。尤为是css3动画的制做。

自动化工具

• npm

• bower

• gulp

• use-gulp gulp资源大合集

• grunt

• fis3

• webpack -> 翻译文档

自动化工具用来安装依赖和构建项目，可以很方便的处理那些繁琐的事情如：压缩、打包、编译等。

调试工具

• Browsersync

• 微信调试工具

• BrowserStack Local 一款要收费的chrome插件，提供许多许多版本的浏览器能够测试（远程开虚拟机，而后咱们在浏览器里面能够看到）。还支持一些安卓和ios模拟器的查看（也有免费的能够用，不过可用的浏览器就不多了）。

• WEB前端助手（FeHelper） 也是一款chrome的插件，功能的话能够点开连接看看。

• Visual Event 一款用来查看页面上使用了jQuery绑定事件的元素，可以很详细的看到在哪一个文件的哪一行。

• Rosin Alloyteam 出款的一个移动端调试利器！

调试工具能够解放咱们的f5键和可以更加方便的在手机上调试。大大提升生产力！

Sublime 插件

• 个人 Sublime Text 必备插件 列出了一些经常使用的插件以及安装和使用的方法，适合第一次使用的童鞋。

• Sublime collection

建议你们把本身的package都上传到github或者coding之类的代码托管平台，之后换电脑的时候就不再用从新的去安装那些插件了。

其余

• Landscaping With Frontend Development Tools

• Frontend Tools

• 醉牛前端

• 正则表达式工具

• caniuse-cmd 知道 caniuse 的童鞋都懂。

最后

做为一个页面仔，很须要有工具去辅助本身开发。例如：处理器、自动化工具、调试工具等。随着本身的负责的项目愈来愈大，更须要这些工具去处理那些繁琐的事情，让咱们可以更加专一的去写代码。

若是你有更好的工具，可以有效的提升的本身的开发效率。请在评论中告知我！