阅读 2940

逼死前端的视觉走查工具 Visual Inspector

image.png

对不起,我是卧底

通常前端同学都会面临一个ui验收的工作,而最能逼死前端的一个方式就是--直接截图,覆盖到psd上。

对于这种会逼死前端的事情,我觉得...ui可以有更好的方法,比如我今天推荐的这款工具。

产品介绍

Visual Inspector是一款chrome插件,用于做视觉走查,下面看下具体的截图。

image.png

简单来说,就是可以把图片插入到页面中,做叠加操作。这样ui再也不用截图了,省去了每次截图的繁琐操作。

安装

chrome 插件商店中查找 Visual Inspecto

image.png

使用说明

点击插件,插入设计稿 image.png

image.png 然后调整插入图片的尺寸和位置,并设置为正片叠底

image.png

image.png 就可以直接查看像素级别的差异了

多种模式

除了web可以使用外,也支持h5的检查

image.png 可以通过chrome的模拟,以及定位,缩放,尺寸等进行匹配

image.png

end

在一些大公司可能会有自动化的视觉工具+ai辅助做ui的自动化验收,不具备的小公司的话,不妨试下这款工具,查看自己的设计还原程度。

文章分类
前端
文章标签