前端开发工具有许多黑科技软件，但在这里，我只介绍自己常用的轻型工具，就是打开一个页面就能使用的工具，大家如果有觉得不错的轻型辅助工具可以在评论区留言。以后看机会再做重型工具合集
更新说明：长久未更新，圣诞节当天做一次更新，整理近一年中新发现的工具--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特性兼容性」☆☆
- 奇云测「页面全球服务器加载速度，与性能评分」☆☆☆
评星说明：
炼气：☆ 无名，知或不知
筑基：☆☆ 有为，知之者智
金丹：☆☆☆ 轻取，无往不利
元婴：☆☆☆☆ 重器，镇守一方
金仙：☆☆☆☆☆ 无憾，纵横四海
