前端开发神器一个插件解决一个痛点

1.二维码插件

在平时移动端开发我们免不了要用手机测试，怎么把地址发手机上呢？手敲？用qq传？当然也有的国产浏览器自带二维码生成，但是有的人只喜欢用谷歌怎么办？那么下面这个插件你值得拥有。
草料二维码：草料chrome插件，是专为chrome核心的浏览器开发的一个二维码应用增强工具插件。可以自动将地址栏链接生成二维码，也可以解析网页上任意一个二维码图案的内容。

Paste_Image.png

• 下载地址：http://cli.im/news/6527
• 安装方法：http://jingyan.baidu.com/article/da1091fbdf12e9027949d673.html

2.css3动画调试插件

平时写css3动画我们只能靠脑补效果，然后在一点点调试成自己想要的效果，用了下面这个插件之后会方便很多。

css3 Animaition:该插件是一个谷歌浏览器插件，可以让你在控制台自行添加，设置，预览动画效果，设置好后可生成对应的代码，直接复制粘贴到代码中就可以了

Paste_Image.png

Paste_Image.png

• 下载地址：https://chrome.google.com/webstore/detail/css3animation/lhbbbidpkalopmenjffckblgbdhcffpa?hl=zh-CN

3.移动端调试插件vconsole

相信大家一定有遇到过这样的问题，明明模拟器上显示正常的，但是真机上各种不服，要么其他浏览器是好的，微信浏览器就不行，而我们只能一个个的alert,而且如果参数是对象还只能弹个"[object]"。移动端开发调试最头痛的应该就是这个了吧，下面这个小插件一行代码就可以轻松解决你的问题。引入改js后他会在页面内生成一个小型控制台，输出你的console.log,用法和pc端差不多。我目前的用法就是把它放到一个cnd里面，需要调试引入一个script就可以了，很方便。

Paste_Image.png

• 项目地址：https://github.com/WechatFE/vConsole

４.图片压缩

做一个H5页面里面图片太多影响页面加载速度？使用ps改成png24图片也很大，改成png-8图片又失真怎么办？图片压缩压缩再压缩，偶然间发现一个图片压缩的插件很好用，可以装到ps里面也可以在线压缩，压缩过后的图片体积大幅度减少而且图片质量肉眼几乎看不出差别。

Paste_Image.png

可以同时压缩几张图片，对比原图，几乎看不出任何差别， 但体积却小了几乎一半！

Paste_Image.png

• 官方地址：：https://tinypng.com/