CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章WEB前端设计师常用工具集锦由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

下面是我整理和收集的一些前端开发常用的 插件、工具、软件等不为别的，相当于给电脑做个小备份，至于使用方法，以后我会总结，目前的话还是自行google吧.

【FireFox插件】 。

1.  Firefbug     ——    页面调式工具 。

2.  YSlow     ——    网页评级工具 。

3.  pixel Perfect      ——    HTML与设计稿对比 。

4.  CSS Usage     ——    CSS使用效率优化工具 。

5.  Page Speed     ——    快速优化网页类似于YSlow 。

6.  Measureit     ——    实时测量工具 。

7.  Fiddler     ——    本地调式页面样式利器 。

8.  DNS flusher     ——    DNS刷新工具 。

9.  Colorzilla     ——    实时颜色选取工具 。

10.  Web Developer     ——    检查网页的相关信息 。

11.  FireMobileSimulator     ——    模拟手机 。

12.  JavaScript Dubugger     ——    JavaScript 排错 。

13.  Greasemonkey     ——    脚本小程序 。

14.  Firecookie     ——    Cookie 。

【Chrome插件】 。

1.  Awesome Screenshot     ——    网页截图 。

2.  user-Agent Switcher     ——    切换显示设备 。

3.  web Developer     ——    检查网页的相关信息 。

4.  Window Resizer     ——    更改分辨率 。

5.  YSlow     ——    网页评级工具 。

6.  浏览器兼容性检测 。

【前端开发常用网址工具】 。

web色彩搭配 。

http://www.peise.net/tools/web/ 。

http://www.peise.net/tools/lilun/lilunxuexi.html 。

http://www.colorschemer.com/online.html 。

http://www.workwithcolor.com/hsl-color-picker-01.htm 。

CSS3 生成器 。

http://www.css3maker.com/ 。

http://www.flickyard.in/autocss3/ 。

http://www.colorzilla.com/gradient-editor/ 。

http://css3pie.com/ 。

http://www.css3.me/ 。

http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/ 。

CSS3 按钮生成器 。

http://www.wordpressthemeshock.com/css-drop-shadow/ 。

http://css3buttongenerator.com/ 。

CSS 图片合成器 。

http://csssprites.com/ 。

http://cn.spritegen.website-performance.org/ 。

CSS代码检查 。

http://csslint.net/ 。

ajax loading图片 。

http://ajaxload.info/ 。

http://preloaders.net/ 。

CSS hack表 。

http://centricle.com/ref/css/filters/ 。

浏览器市场 。

http://tongji.baidu.com/data/browser 。

测试浏览器支持CSS3情况 。

http://css3test.com/ 。

http://kimblim.dk/css-tests/selectors/ 。

http://selectivizr.com/ 。

http://www.findmebyip.com/litmus 。

检测用户体验 。

http://gtmetrix.com/ 。

CSS模板生成器 。

http://blog.html.it/layoutgala/ 。

http://www.mycelly.com/ 。

http://www.intensivstation.ch/en/templates/ 。

CSS压缩 。

http://www.csscompressor.com/ 。

CSS常用字体 。

http://cssfontstack.com/ 。

http://www.google.com/webfonts# 。

http://www.dafont.com/ 。

CSS3 Transform 。

http://www.useragentman.com/IETransformsTranslator/ 。

CSS3 贝塞尔曲线 。

http://cubic-bezier.com/#.47,.73,1,.41 。

YUI CSS grid工具 。

http://developer.yahoo.com/yui/grids/builder/ 。

JavaScrip代码优化美化 。

http://js.clicki.cc/ 。

代码演示 。

http://jsfiddle.net/ 。

http://jsbin.com/#html,live 。

http://ikeepu.com/bar/20143449 。

http://codepad.org/ 。

原型图设计工具 。

https://gomockingbird.com/mockingbird/# 。

http://www.jotform.com/ 。

【本地及常用软件及IDE编辑器】 。

1.  MarkMan     ——    设计师，前端工程师必备 。

2.  VIM     ——    超快的编辑器 。

3.  Adobe PhotoShop CS6     ——    切图专用 。

4.  IE Tester     ——    检查页面兼容 。

5.  Fiddler2     ——    检测请求 。

6.  Beyond Commpar     ——    文件比较 。

7.  GIT     ——    分布式版本控制 。

8.  Opera Mobile Emulator     ——    手机浏览器 。

9.  SimpLESS     ——    LESS 。

掌握了以上这些工具中的大部分，恭喜您，离一个优秀的前端设计师不远了~~ 。

最后此篇关于WEB前端设计师常用工具集锦的文章就讲到这里了,如果你想了解更多关于WEB前端设计师常用工具集锦的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。