推荐一款页面开发神器，视觉还原可以如此简单

作为一名前端工程师，经常因为做出的页面和UI设计稿之间存在一些偏差，导致和UI同学反复沟(si)通（bi），这个过程很让人沮丧是不是？？其实要避免这种情况很简单，一款chrome插件就可以很方便帮助工程师和设计师做UI走查。它的原理是在当前页面上叠加了一层设计稿，可以自由拖拽拉伸，调整透明度等等，页面和设计稿之间的差异一目了然有木有？在方便自己的同时也希望可以方便到更多人，推荐给大家一起使用。

废话不多说，插件传送门，谷歌商店，，国内可能需要翻墙访问

使用方法

安装好插件后，插件栏会有这个图标（如果图标是灰色的，请刷新页面，注意谷歌商店页面上不生效，应该是谷歌自己禁用了）

点击图标插入设计稿，插入后的设计稿可以随意拖动和拉伸，在拖到合适的位置后，可以点击冻结（或者按下快捷键：d)，冻结的设计稿不再响应拖拽和拉伸操作，但是可以改变透明度。这里主要是为了避免设计稿影响到页面原有的交互功能。

如果希望在页面刷新后保留设计稿的状态，可以勾上实时。

然后对于某些设计细节想对比的更明显一些，适当切换混合模式有时候会很有帮助。

快捷键:

插件还支持如下快捷键操。

h 键: 显示和隐藏图片
f 键: 显示和隐藏底部工具栏
d 键: 冻结和解冻图片
数字键（0-9）：快速设置图片透明度。如：1秒内快速按下两次5，将设置图片55%的透明度。如果1秒内只按下了一次数字键，如5，一秒后将自动补0，即设置图片透明度为50%。
方向键：移动图片，一次移动1px。如果同时按下Shift键，将一次移动10px。
快速匹配
- alt + 0 : 重置
- alt + 1 : 原图大小
- alt + 2 : 原图两倍
- alt + 3 : 原图一半
- alt + 4 : 窗口宽度

如果发现快捷键无效，可以检查当前页面焦点是否在某个浏览器控件上（如input，textarea等），有时简单的点一下页面空白处，或者设计稿，就可以解决。

tip:

开始只是为了方便在做UI对比，后来发现，其实在页面开发阶段就可以利用上，插入设计稿后，相当于空白页面上有了一个设计模板，我们直接在模版上临摹页面就好，是不是感觉连测量都可以省了？再配合热刷新，，coding可以如此轻松有木有？

转载于:https://juejin.im/post/5c99cd1ce51d455b251df9ef