WEB前端设计师常用工具集锦


Posted in Javascript onDecember 09, 2014

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

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

Javascript 相关文章推荐
Javascript !!的作用
Dec 04 Javascript
jQuery实现可拖动的浮动层完整代码
May 27 Javascript
jquery ajax jsonp跨域调用实例代码
Dec 11 Javascript
JavaScript新窗口与子窗口传值详解
Feb 11 Javascript
Javascript基础知识(一)核心基础语法与事件模型
Sep 29 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
Jun 05 Javascript
使用JQuery在线制作ppt并在线演示源码特效
Sep 08 Javascript
jQuery中的AjaxSubmit使用讲解
Sep 25 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
React Native基础入门之初步使用Flexbox布局
Jul 02 Javascript
15分钟深入了解JS继承分类、原理与用法
Jan 19 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
May 28 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
Dec 09 #Javascript
JQuery中使用on方法绑定hover事件实例
Dec 09 #Javascript
jQuery实现HTML5 placeholder效果实例
Dec 09 #Javascript
jQuery on方法传递参数示例
Dec 09 #Javascript
jquery实现侧边弹出的垂直导航
Dec 09 #Javascript
基于javascript实现判断移动终端浏览器版本信息
Dec 09 #Javascript
使用jQuery实现星级评分代码分享
Dec 09 #Javascript
You might like
西德产收音机
2021/03/01 无线电
PHP实现支持GET,POST,Multipart/form-data的HTTP请求类
2014/09/24 PHP
symfony2.4的twig中date用法分析
2016/03/18 PHP
完美解决Thinkphp3.2中插入相同数据的问题
2017/08/01 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
2010/01/22 Javascript
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
2010/12/02 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
2016/03/07 Javascript
jquery.validate表单验证插件使用方法解析
2016/11/07 Javascript
AngularJS实现的回到顶部指令功能实例
2017/05/17 Javascript
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
JavaScript判断浏览器版本的方法
2019/11/03 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
2020/01/11 jQuery
Javascript执行流程细节原理解析
2020/05/14 Javascript
如何利用vue实现波谱拟合详解
2020/11/05 Javascript
python中去空格函数的用法
2014/08/21 Python
Python中使用ConfigParser解析ini配置文件实例
2014/08/30 Python
使用Turtle画正螺旋线的方法
2017/09/22 Python
python中map()函数的使用方法示例
2017/09/29 Python
python最长回文串算法
2018/06/04 Python
python实现播放音频和录音功能示例代码
2018/12/30 Python
多版本python的pip 升级后, pip2 pip3 与python版本失配解决方法
2019/09/11 Python
对Python中 \r, \n, \r\n的彻底理解
2020/03/06 Python
Python第三方库的几种安装方式(小结)
2020/04/03 Python
使用python matploblib库绘制准确率,损失率折线图
2020/06/16 Python
python安装cx_Oracle和wxPython的方法
2020/09/14 Python
CSS教程:CSS3圆角属性
2009/04/02 HTML / CSS
Canvas与图片压缩的示例代码
2017/11/28 HTML / CSS
Melijoe英国官网:法国儿童时尚网站
2016/11/18 全球购物
医疗保健专业人士购物网站:Scrubs & Beyond
2017/02/08 全球购物
优秀女职工事迹材料
2014/02/06 职场文书
关于运动会的口号
2014/06/07 职场文书
竞聘自述材料
2014/08/25 职场文书
一份教室追逐打闹的检讨书
2014/09/27 职场文书
2014大学生学生会工作总结
2014/12/19 职场文书
2016新年晚会开场白
2015/12/03 职场文书