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 相关文章推荐
新浪的图片新闻效果
Jan 13 Javascript
Ajax 数据请求的简单分析
Apr 05 Javascript
读jQuery之六 缓存数据功能介绍
Jun 21 Javascript
JavaScript中读取和保存文件实例
May 08 Javascript
javascript中checkbox使用方法简单实例演示
Nov 17 Javascript
谈一谈JS消息机制和事件机制的理解
Apr 14 Javascript
Bootstrap开关(switch)控件学习笔记分享
May 30 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
Sep 24 Javascript
Angular企业级开发——MVC之控制器详解
Feb 20 Javascript
JS实现隔行换色的表格排序
Mar 27 Javascript
Vue中之nextTick函数源码分析详解
Oct 17 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
Aug 30 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制作的意见反馈表源码
2007/03/11 PHP
php根据生日计算年龄的方法
2015/07/13 PHP
win7系统配置php+Apache+mysql环境的方法
2015/08/21 PHP
php将文件夹打包成zip文件的简单实现方法
2016/10/04 PHP
php 运算符与表达式详细介绍
2016/11/30 PHP
利用PHP访问带有密码的Redis方法示例
2017/02/09 PHP
PJ Blog修改-禁止复制的代码和方法
2006/10/25 Javascript
javascript实现的基于金山词霸网络翻译的代码
2010/01/15 Javascript
很好用的js日历算法详细代码
2013/03/07 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
2014/06/16 Javascript
jQuery动画效果相关方法实例分析
2015/12/31 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
JavaScript原生节点操作小结
2017/01/17 Javascript
微信小程序获取微信运动步数的实例代码
2017/07/20 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
2017/09/06 jQuery
浅谈vue中.vue文件解析流程
2018/04/24 Javascript
如何把vuejs打包出来的文件整合到springboot里
2018/07/26 Javascript
JS 数组基本用法入门示例解析
2020/01/16 Javascript
[01:11:08]Winstrike vs NB 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
基于Python的接口测试框架实例
2016/11/04 Python
Python3.6.2调用ffmpeg的方法
2019/01/10 Python
Python多进程写入同一文件的方法
2019/01/14 Python
python3使用腾讯企业邮箱发送邮件的实例
2019/06/28 Python
解决django-xadmin列表页filter关联对象搜索问题
2019/11/15 Python
python爬虫学习笔记之Beautifulsoup模块用法详解
2020/04/09 Python
通过实例简单了解python yield使用方法
2020/08/06 Python
Python如何将模块打包并发布
2020/08/30 Python
基于html5实现的图片墙效果
2014/10/16 HTML / CSS
欧洲著名的珠宝和手表网上商城:uhrcenter
2017/04/10 全球购物
计算机毕业生自荐信范文
2014/03/23 职场文书
慈善晚会策划方案
2014/05/14 职场文书
中学生教师节演讲稿
2014/09/03 职场文书
小学庆六一主持词
2015/06/30 职场文书
Python基础之进程详解
2021/05/21 Python
InterProcessMutex实现zookeeper分布式锁原理
2022/03/21 Java/Android
Pandas数据结构之Series的使用
2022/03/31 Python