前端开发工具辅助工具总卷「全」

前端开发工具有许多黑科技软件，但在这里，我只介绍自己常用的轻型工具，就是打开一个页面就能使用的工具，大家如果有觉得不错的轻型辅助工具可以在评论区留言。以后看机会再做重型工具合集

---

---

更新说明：长久未更新，圣诞节当天做一次更新，整理近一年中新发现的工具--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命名，格式，公共样式抽离等」☆☆☆☆
• 工具「」
  • Simpless「在线Less编译器」☆☆☆
  • CSSWrap「将输入的文字转变成形状」☆☆
  • SpritePad「CSS sprite生成器」☆☆☆
  • CSS代码「将CSS代码按照要求进行整理或压缩」☆☆
• 编辑器 「从视觉开始学习CSS属性」

  • CSS动画☆☆☆☆

  • 渐变色☆☆

  • Div阴影☆☆

  • 圆角☆☆

  • 文本阴影☆☆

  • 2D位移☆☆

  • 3D旋转☆☆

  • 过渡动画☆☆

  • 动画特效☆☆

  • Grid布局☆☆

  • Canvas☆

  • Flex布局豪华版「推荐」☆☆☆☆

  • 背景颜色 边框颜色 字体颜色集合☆☆☆

JavaScript

• 原生JavaScript
  • 原生JavaScript的DOM操作汇总「附样例」☆☆☆☆
  • 原生JS代替jQuery大全「带查询功能」☆☆☆☆☆
  • Can i use ?「查询CSS，JS属性兼容性，带查询功能」☆☆☆☆☆
• jQuery
  • jQuery Cards 1000个高品质Jq插件☆☆☆
  • jQuery - 选择器使用详解「附样例」☆☆☆
  • jQuery API速查表☆☆☆
• D3
  • D3可视化图表分类☆☆☆
  • D3样例库「1575种demo」☆☆☆☆
• 工具
  • 缓动函数速查表☆☆
  • 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特性兼容性」☆☆
• 奇云测「页面全球服务器加载速度，与性能评分」☆☆☆

评星说明：
炼气：☆               无名，知或不知
筑基：☆☆             有为，知之者智
金丹：☆☆☆           轻取，无往不利
元婴：☆☆☆☆         重器，镇守一方
金仙：☆☆☆☆☆       无憾，纵横四海