10个前端开发在线实用工具-效率提升

TinyPNG-图片压缩

https://tinypng.com/

TinyPNG的原理是将 PNG24位真彩色图片 压缩成 PNG8位索引图片，从而做到基本不损失画质和观感，但是并非完全意义上的无损，TinyPNG压缩图片时确实略有信息数据的损失，只是感官上很难察觉到显著的画质降低。

使用方法很简单，把需要压缩的png或jpg格式的图片拖到网页中即可，一般的png图可压缩到50%以上。

TinyPNG

Can I Use-兼容性查询

https://caniuse.com/

这是一个检测浏览器对JS、HTML5、CSS、SVG或者其他Web前端相关特性支持程度的列表。可以检测的浏览器包括桌面和移动版的主流浏览器：IE, Firefox, Chrome, Safari和 Opera等。

Can I Use

Iconfont-矢量图标库

https://www.iconfont.cn/

阿里巴巴旗下的图标库网站。设计师将图标上传到Iconfont平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。

Iconfont

草料二维码-二维码生成器

https://cli.im/

功能齐全且强大的二维码美化系统，加logo、加背景、加前景、换样式、调码眼，并可保存成模板重复使用。还有专为chrome核心的浏览器开发的工具插件，自动将地址栏链接生成二维码。

草料二维码

CodePen-代码编辑

https://codepen.io/

CodePen提供了一个浏览器内编码环境，专为学习编码和快速原型创作而设计。它经常被用来展示网站的demo，同时它也是学习前端开发基础知识的好地方。

CodePen

Tridiv-CSS 3D图形编辑器

http://tridiv.com/

利用最新的CSS技术，配合支持的浏览器，可以轻松的在线创建、浏览并保存管理Web3D图像。Tridiv是一个基于 Web 的免费编辑器，使用 CSS 创建 3D 图像，直观且容易操作，不需要多余的教程即可轻松上手，并且可基于Local Storage保存管理你创建的3D图像。

Tridiv

Regulex-正则表达式解析和可视化工具

https://jex.im/regulex/

Regulex是一款JavaScript正则表达式解析和可视化工具。通过该工具可以对任何正则表达式进行解析，并以可视化图表的显示显示该正则表达式的解析流程结构，还可以将图表导出为图片。

Regulex

Ultimate CSS Gradient Generator-渐变背景色设计

http://www.colorzilla.com/gradient-editor/

支持新增删除颜色节点，支持选取颜色，支持改变角度，支持随机生成渐变色，还提供了默认的一系列渐变色供选择。

Ultimate CSS Gradient Generator

cubic-bezier-贝塞尔曲线调试

http://cubic-bezier.com/

赋予transition-timing-function不同的值可以制作不同的动画效果，结合cubic-bezier，我们可以做出更多表现的动画。cubic-bezier可以用来在线调试立方贝塞尔曲线，预览动画效果。

cubic-bezier

Clippy – clip-path 裁剪路径

http://bennettfeely.com/clippy/

clip-path是 CSS 中的一个裁剪属性，用于裁剪元素，通过此属性可以实现类似PS蒙版一样效果。Clippy 是一个 CSS clip-atch 属性绘制工具，使用它可以轻松绘制不同的几何形状。

Clippy