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学习笔记(五)正则表达式
Apr 08 Javascript
JS实现的省份级联实例代码
Jun 24 Javascript
js实现全屏漂浮广告移入光标停止移动
Dec 02 Javascript
javascript中字符串的定义示例代码
Dec 19 Javascript
Jquery遍历checkbox获取选中项value值的方法
Feb 13 Javascript
js delete 用法(删除对象属性及变量)
Aug 24 Javascript
浅谈js的url解析函数封装
Jun 28 Javascript
TableSort.js表格排序插件使用方法详解
Feb 10 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
Nov 15 Javascript
JS中的一些常用的函数式编程术语
Jun 15 Javascript
vue+element表格导出为Excel文件
Sep 26 Javascript
countup.js实现数字动态叠加效果
Oct 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
蝙蝠侠:侠影之谜
2020/03/04 欧美动漫
PHP4 与 MySQL 交互使用
2006/10/09 PHP
PHP Header用于页面跳转时的几个注意事项
2016/10/21 PHP
记录Yii2框架开发微信公众号遇到的问题及解决方法
2018/07/20 PHP
js 图片轮播(5张图片)
2008/12/30 Javascript
用jquery写的一个万年历(自写)
2014/01/20 Javascript
JavaScript静态类型检查工具FLOW简介
2015/01/06 Javascript
js验证上传图片的方法
2015/05/12 Javascript
javascript函数命名的三种方式及区别介绍
2016/03/22 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
2016/09/05 Javascript
JS调用打印机功能简单示例
2016/11/28 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
2017/11/11 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
2017/12/08 Javascript
React从react-router路由上做登陆验证控制的方法
2018/05/10 Javascript
jQuery实现合并表格单元格中相同行操作示例
2019/01/28 jQuery
Vuepress 搭建带评论功能的静态博客的实现
2019/02/17 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
2019/03/11 Javascript
layui动态渲染生成select的option值方法
2019/09/23 Javascript
Swiper实现导航栏滚动效果
2020/10/16 Javascript
python实现查找两个字符串中相同字符并输出的方法
2015/07/11 Python
Python基于lxml模块解析html获取页面内所有叶子节点xpath路径功能示例
2018/05/16 Python
Python 跨.py文件调用自定义函数说明
2020/06/01 Python
详解python 支持向量机(SVM)算法
2020/09/18 Python
奥巴马的演讲稿
2014/05/15 职场文书
根叔历年演讲稿
2014/05/20 职场文书
借款协议书
2014/09/16 职场文书
2015届大学生就业推荐表自我评价
2014/09/27 职场文书
起诉离婚协议书样本
2014/11/25 职场文书
2015年电教工作总结
2015/05/26 职场文书
婚礼男方父母答谢词
2015/09/29 职场文书
2016年暑期见闻作文
2015/11/25 职场文书
Python 处理表格进行成绩排序的操作代码
2021/07/26 Python
MySQL去除重叠时间求时间差和的实现
2021/08/23 MySQL
mysql查询结果实现多列拼接查询
2022/04/03 MySQL
oracle设置密码复杂度及设置超时退出的功能
2022/06/28 Oracle