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 相关文章推荐
鼠标移到导航当前位置的LI变色处于选中状态
Aug 23 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
Nov 26 Javascript
js获取视频时长代码
Apr 10 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
Jul 02 Javascript
Javascript中setTimeOut和setInterval的定时器用法
Jun 12 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
Oct 09 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
May 23 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
Mar 21 Javascript
ES5学习教程之Array对象
Apr 01 Javascript
微信小程序 监听手势滑动切换页面实例详解
Jun 15 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
Jul 13 Javascript
React实现评论的添加和删除
Oct 20 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
PHP4之真OO
2006/10/09 PHP
php自定义函数实现二维数组排序功能
2016/07/20 PHP
使用laravel和ECharts实现折线图效果的例子
2019/10/09 PHP
PHP dirname(__FILE__)原理及用法解析
2020/10/28 PHP
js跨域问题之跨域iframe自适应大小实现代码
2010/07/17 Javascript
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
2011/12/31 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
2013/11/21 Javascript
使用firebug进行调试javascript的示例
2013/12/16 Javascript
Node.js中的事件驱动编程详解
2014/08/16 Javascript
jQuery解决浏览器兼容性问题案例分析
2016/04/15 Javascript
js只执行1次的函数示例
2016/07/20 Javascript
ES6所改良的javascript“缺陷”问题
2016/08/23 Javascript
JQuery动态添加Select的Option元素实现方法
2016/08/29 Javascript
js模糊查询实例分享
2016/12/26 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
2017/06/17 Javascript
原生JS实现自定义滚动条效果
2020/10/27 Javascript
js面试题之异步问题的深入理解
2020/09/20 Javascript
[09:59]DOTA2-DPC中国联赛2月7日Recap集锦
2021/03/11 DOTA
python3之微信文章爬虫实例讲解
2017/07/12 Python
Python实现求两个数组交集的方法示例
2019/02/23 Python
python-opencv获取二值图像轮廓及中心点坐标的代码
2019/08/27 Python
解决安装新版PyQt5、PyQT5-tool后打不开并Designer.exe提示no Qt platform plugin的问题
2020/04/24 Python
关于Python3爬虫利器Appium的安装步骤
2020/07/29 Python
python中pow函数用法及功能说明
2020/12/04 Python
推荐10个HTML5响应式框架
2016/02/25 HTML / CSS
利用canvas实现图片压缩的示例代码
2018/07/17 HTML / CSS
巴西家用小家电购物网站:Polishop
2016/08/07 全球购物
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
期末考试动员演讲稿
2014/01/10 职场文书
公司财务流程之主管工作流程
2014/03/03 职场文书
社区志愿者培训方案
2014/06/10 职场文书
空气的环保标语
2014/06/12 职场文书
领导班子对照检查材料
2014/09/22 职场文书
网络妈妈观后感
2015/06/08 职场文书
《岳阳楼记》原文、译文赏析
2019/09/10 职场文书
一文弄懂MySQL索引创建原则
2022/02/28 MySQL