前端开发工具有许多黑科技软件,但在这里,我只介绍自己常用的轻型工具,就是打开一个页面就能使用的工具,大家如果有觉得不错的轻型辅助工具可以在评论区留言。以后看机会再做重型工具合集
更新说明:长久未更新,圣诞节当天做一次更新,整理近一年中新发现的工具--2018.12.21
由于内容较多,在总卷的基础上进行了分卷,内容一样
前端开发工具辅助工具分卷「Chrome插件及其他」
评星说明:
☆ 知道有这个就好
☆☆ 了解下会很有帮助
☆☆☆ 开发常用,提升效率
☆☆☆☆ 可以对开发效率有益,效果斐然
☆☆☆☆☆ 神器,不知道你就亏大了
目录
- 设计类
- CSS
- JS
- Chrome
- 其他(主要是页面测试相关)
设计类
色彩
- 颜色代码查询「常用」☆☆☆
- RGB颜色值与十六进制颜色码转换工具「」☆☆☆
- 匹配你喜欢的色系「通过Like和Dislike来匹配自己喜欢的色系–赞」☆☆☆☆
- 在线配色☆☆☆
图片
- JPG压缩☆☆
- PNG压缩☆☆
- App UI设计规范☆☆☆☆
尺寸
- PX EM单位换算☆☆
- 移动屏幕尺寸☆☆☆
- 比例计算工具☆☆
- 网页制作辅助工具-张鑫旭「添加JS实现页面刻度尺,试用不是很好」☆☆
布局
- 响应式VS自适应 让你了解响应式、自适应、液态和静态的区别☆☆
- SpurApp「使用不同的方法来测试页面的可用性和布局」☆☆
设计稿
- APP原型设计「在线设计APP界面」☆☆
- UI8「精品设计图资源网站」☆☆☆☆☆
- 千图网「海量页面设计图资源网」☆☆☆☆
- multicolored「页面设计图资源网」☆☆☆
- processon「思维导图原型图设计」☆☆☆☆
导航
- 设计师网址导航☆☆☆
CSS
- 资源库
- 流行的CSS默认样式重置方案☆☆☆☆
- 网易提供的CSS代码规范「包含CSS命名,格式,公共样式抽离等」☆☆☆☆
- 工具「」
- 编辑器 「从视觉开始学习CSS属性」
JavaScript
- 原生JavaScript
- 原生JavaScript的DOM操作汇总「附样例」☆☆☆☆
- 原生JS代替jQuery大全「带查询功能」☆☆☆☆☆
- Can i use ?「查询CSS,JS属性兼容性,带查询功能」☆☆☆☆☆
- jQuery
- jQuery Cards 1000个高品质Jq插件☆☆☆
- jQuery – 选择器使用详解「附样例」☆☆☆
- jQuery API速查表☆☆☆
- D3
- 工具
- 缓动函数速查表☆☆
- JS压缩☆☆
- CSV转换☆☆
- 地图坐标拾取☆☆
- JS性能测试 ☆☆☆
- 手机端web调试Console☆☆
- Bookmarkleter「将你的JavaScript代码转换成一个小书签」☆☆
- JSLint「JavaScript调试工具,找出潜在问题」☆☆☆
- 加密
- MD5在线加密「常用做给请求加密,在线确认请求加密是否正确」☆☆☆
- 散列/哈希加密☆
- Base64加密解密「JWT常用,用不到,可做了解」☆
- Url加密「如果不想让别个通过url知道信息,使用加密后URL还是可以访问」☆☆
资源
- bootCDN静态资源库☆☆☆
- API大全☆☆☆
Chrome 插件「链接已加上」
- FeHelper「WEB前端助手内容很多很全,很有帮助」☆☆☆☆☆
- Ripple Emulator (Beta)「移动端调试」☆☆☆
- The Great Suspender「Chrome页面打开太多,将不常查看页面休眠」☆☆☆
- Viewport Resizer「测试不同屏幕下效果,0-1960像素」☆☆☆
- WhatRuns「查看页面所使用技术框架」☆☆☆
- 捕捉网页截图 – FireShot 「可将超出可视区的整个页面进行截图」☆☆☆
- ColorZilla「页面颜色取色」☆☆☆
- POSTMAN「模拟发送请求」☆☆☆
- Visual Event「网页事件监听」☆☆☆
- 二维码扫描「」☆☆☆
- WhatFont「找到网页的字体」☆☆
- Speed Tracer「」
其他
- Browsers「实用的浏览器沙箱,不用下载可使用想测试的浏览器」☆☆☆☆☆
- Pingdom「测试网站的加载时间,并分析,帮助你找出瓶颈」☆☆
- Loads.in「测试网站的加载时间」☆☆
- HTML5 Test「HTML5特性兼容性」☆☆
- 奇云测「页面全球服务器加载速度,与性能评分」☆☆☆
评星说明:
炼气:☆ 无名,知或不知
筑基:☆☆ 有为,知之者智
金丹:☆☆☆ 轻取,无往不利
元婴:☆☆☆☆ 重器,镇守一方
金仙:☆☆☆☆☆ 无憾,纵横四海