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系列之数据类型 字符串
Jun 08 Javascript
jQuery拖拽 & 弹出层 介绍与示例
Dec 27 Javascript
Javascript中String的常用方法实例分析
Jun 13 Javascript
详解JavaScript对象序列化
Jan 19 Javascript
jQuery实现选项联动轮播效果【附实例】
Apr 19 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
Dec 25 Javascript
js的三种继承方式详解
Jan 21 Javascript
canvas实现十二星座星空图
Feb 14 Javascript
利用require.js与angular搭建spa应用的方法实例
Jul 19 Javascript
详解开源的JavaScript插件化框架MinimaJS
Oct 26 Javascript
JS实现为动态创建的元素添加事件操作示例
Mar 17 Javascript
详解vue+webpack+express中间件接口使用
Jul 17 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
PHP编码规范-php coding standard
2007/03/16 PHP
php生成的html meta和link标记在body标签里 顶部有个空行
2010/05/18 PHP
php中有关合并某一字段键值相同的数组合并的改进
2015/03/10 PHP
php集成动态口令认证
2016/07/21 PHP
PHP  Yii清理缓存的实现方法
2016/11/10 PHP
PHP的中使用非缓冲模式查询数据库的方法
2017/02/05 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
2006/10/17 Javascript
JavaScript入门之事件、cookie、定时等
2011/10/21 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
2013/07/01 Javascript
Javascript alert消息换行的方法
2013/08/07 Javascript
jQuery中的$.ajax()方法应用
2014/05/06 Javascript
js基于setTimeout与setInterval实现多线程
2016/06/17 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
2016/08/30 Javascript
Vue.js基础学习之class与样式绑定
2017/03/20 Javascript
jQuery表单元素过滤选择器用法实例分析
2019/02/20 jQuery
Three.js中矩阵和向量的使用教程
2019/03/19 Javascript
对layui初始化列表的CheckBox属性详解
2019/09/13 Javascript
JavaScript实现省市联动效果
2019/11/22 Javascript
[05:42]DOTA2英雄梦之声_第10期_蝙蝠骑士
2014/06/21 DOTA
[00:32]10月24、25日 辉夜杯外卡赛附加赛开赛!
2015/10/23 DOTA
在Python的Flask框架中验证注册用户的Email的方法
2015/09/02 Python
Python判断变量是否为Json格式的字符串示例
2017/05/03 Python
Windows 64位下python3安装nltk模块
2018/09/19 Python
在Python中Dataframe通过print输出多行时显示省略号的实例
2018/12/22 Python
python如何获取当前文件夹下所有文件名详解
2019/01/25 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
Python requests模块cookie实例解析
2020/04/14 Python
无需压缩软件,用python帮你操作压缩包
2020/08/17 Python
生产部主管岗位职责
2014/01/06 职场文书
就业自我评价
2014/02/04 职场文书
2014财务人员自我评价范文
2014/09/21 职场文书
关于颐和园的导游词
2015/01/30 职场文书
2019年关于小学生课外阅读情况的分析报告
2019/12/02 职场文书
python中redis包操作数据库的教程
2022/04/19 Python
volatile保证可见性及重排序方法
2022/08/05 Java/Android