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 相关文章推荐
(JS实现)MapBar中坐标的加密和解密的脚本
May 16 Javascript
网页上的Javascript编辑器和代码格式化
Apr 25 Javascript
js动态设置div的值下例子
Oct 29 Javascript
jQuery 快速结束当前正在执行的动画
Nov 20 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
Sep 25 Javascript
Jquery uploadify上传插件使用详解
Jan 13 Javascript
JavaScript提升性能的常用技巧总结【经典】
Jun 20 Javascript
js removeChild 方法深入理解
Aug 16 Javascript
Vue.js事件处理器与表单控件绑定详解
Mar 20 Javascript
node.js中express中间件body-parser的介绍与用法详解
May 23 Javascript
JS实现的视频弹幕效果示例
Aug 17 Javascript
Nuxt.js nuxt-link与router-link的区别说明
Nov 06 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 socket方式提交的post详解
2008/07/19 PHP
用PHP提取中英文词语以及数字的首字母的方法介绍
2013/04/23 PHP
ThinkPHP中使用ajax接收json数据的方法
2014/12/18 PHP
PHP实现SMTP邮件的发送实例
2018/09/27 PHP
javascript 面向对象编程 聊聊对象的事
2009/09/17 Javascript
键盘 keycode的值 javascript时触发事件时很有用的要素
2009/11/02 Javascript
基于jquery点击自以外任意处,关闭自身的代码
2012/02/10 Javascript
JS左右无缝滚动(一般方法+面向对象方法)
2012/08/17 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
2013/10/29 Javascript
JQuery插入DOM节点的方法
2015/06/11 Javascript
详解JavaScript中的构造器Constructor模式
2016/01/14 Javascript
node.js 动态执行脚本
2016/06/02 Javascript
树结构之JavaScript
2017/01/24 Javascript
webstorm添加vue.js支持的方法教程
2017/07/05 Javascript
Javascript 编码约定(编码规范)
2018/03/11 Javascript
JavaScript动态加载重复绑定问题
2018/04/01 Javascript
JS性能优化实现方法及优点进行
2020/08/30 Javascript
[06:43]2018DOTA2国际邀请赛寻真——VGJ.Thunder
2018/08/11 DOTA
Python中用于计算对数的log()方法
2015/05/15 Python
python实现对excel进行数据剔除操作实例
2017/12/07 Python
Python实现求解括号匹配问题的方法
2018/04/17 Python
python爬虫获取新浪新闻教学
2018/12/23 Python
在python中用print()输出多个格式化参数的方法
2019/07/16 Python
python与mysql数据库交互的实现
2020/01/06 Python
python求一个字符串的所有排列的实现方法
2020/02/04 Python
html5小技巧之通过document.head获取head元素
2014/06/04 HTML / CSS
世界经理人咨询有限公司面试
2014/09/23 面试题
医学院毕业生自荐信
2013/11/08 职场文书
护理专业自荐信
2013/12/03 职场文书
深入开展党的群众路线教育实践活动方案
2014/02/04 职场文书
《望洞庭》教学反思
2014/02/16 职场文书
乡村卫生服务一体化管理实施方案
2014/03/30 职场文书
人间正道是沧桑观后感
2015/06/15 职场文书
2016教师节问候语
2015/11/10 职场文书
Keras多线程机制与flask多线程冲突的解决方案
2021/05/28 Python
浅谈 JavaScript 沙箱Sandbox
2021/11/02 Javascript