前端UI设计稿对比工具 - chrome+webpack插件

（切图仔）前端开发者一大重要的职责就是将 UI画稿转化为实际可用的页面，效果图的还原度在相当大的程度上决定了 UI 和 PM的满意度

一般情况下，拿到设计稿后，懒散点的可能直接看图软件打开，肉眼测距就开搞了，负责点的会打开 PS或者更正规的 Photoshop，力图精确到 px，这两种方法各有利弊，前者的还原度大概率堪忧，后者耗时耗力，能把眼睛看瞎，最后都不一定能过得了设计师的像素眼

鄙人不才，恰好热衷并擅长于肉眼测距，只要不是苛刻到死盯像素级的差异，那么完全足够交差，然而天有不测风云，公司的设计部近来加大了对设计稿还原度的较真劲头，导致我与设计师之间摆头的频率直线拉升，一来二去之后筋疲力尽，细细想来，不是长久之计，于是决定着手从根源上解决这个问题

uipx-chrome-plugin

肉眼测距与 PS测量各有利弊，最好能摒弃糟粕并把这两个的优点结合到一起，肉眼测距的优点是短平快，缺点是不够精确，PS测距的优点是够精确，缺点是太慢了，碰上赶进度的需求根本来不及，所以需要做到既快又准

那么，如果把还原稿从 PS中移到正在开发的页面上，再加上一些必要的辅助能力，比如测距，这不就能解决上面的问题了吗？

一般情况下，无论开发 PC端的页面还是移动端的页面，我们都是习惯于在 PC的浏览器上进行调试，既然是浏览器，那么我首先就想到浏览器扩展插件了

这个插件最好具备以下几个功能：

• 测距
  测量设计稿与页面还原图之间元素位置、尺寸的差异，类似于 PS的标尺，方便调节
• 反相
  一是方便对比差异，二是对于一个像素来说，与其反相过后并设置透明度为 0.5的像素混合重叠后，合成后的颜色将变为灰色