什么是界面走查
在整个研发环节中，由于UI需要对上线的界面效果负责，所以研发线会有一个环节就是UI验收。就是在我们输出效果图和切图文件给前端后，前端根据我们的效果图进行代码编写，出来之后的HTML效果UI设计师需要进行验收。 虽然走查的流程往往比较复杂无聊，但是为了保证设计稿与上线项目的一致，我们就需要有“趁手的武器”才能够项目的高度还原。不知道你们自己有什么好用的走查工具，我今天给大家分享两款我自己非常常用的浏览器插件。
Copiexl
Copiexl是字节出的一款高效走查开源工具。它的使用很简单，就是打开需要走查的前端web页面或项目，接着使用工具上传该页面的高保真设计稿；然后通过降低设计稿的对比度，与开发出来的前端效果进行对比，达到快速走查发现问题的目的。页面哪里有问题通过对比马上就能发现了。 安装使用也很方便：
1.安装工具
首先打开软件的官方网站（ https://copixel.bytedance.com/ ），点击免费下载（这里只支持 Chrome 浏览器，如果你是 Safari 、 Firefox 、 Opera 等浏览器，在官网往下滚动，同样也是提供了下载入口） 点击下载过后，就会跳转到 Google 的应用商店当中，点击安装即可，与浏览器插件的安装方式类似。
2.使用教程
如何选择页面的设计尺寸
建议按照主流窗口尺寸的宽度设计，如：1366px、1440px、1920px；推荐最小设计尺寸使用1366px(宽)，最大设计尺寸1920px(宽)。目的是按照1:1导出设计图，与开发页面显示效果一致。
该如何输出设计稿？
建议一次性导出所有要走查的设计稿，可以批量导入到插件，切换设计稿可以提高走查效率。可以通过设计稿软件的自带图片导出功能(建议导出为1倍图)，也可以选择其他的导出插件，可以更规范的导出设计稿，生成文件包，如Sketch Measure 插件。
该如何使用Copixel插件走查？
下载Copixel扩展插件（点击默认是Chrome插件），其他浏览器插件需向下滚动页面点击下载对应的类型。
安装好插件后，打开开发好的链接页面，在Chrome浏览器的右上方启用该插件，添加UI设计图
通过调整设计图位置、大小和透明度使其与开发页面相对重合，配合截图标注工具进行找茬标记。
把标记的有问题的截图复制到docs文件，分享到产品和技术，并进行修复状态的标记
CSS Peeper
CSS Peeper是一个国外的公司开发的插件，是为UI设计师量身定制的 CSS 查看器。其能快速读取网页上文字的行高、字体或按钮大小，能够以最简单的方式检查代码。检查网络上对象、颜色和资产的隐藏 CSS 样式。
安装工具
首先打开软件的官方网站（https://csspeeper.com/），点击免费下载，点击会跳转到谷歌应用商店下载，点击安装即可，与浏览器插件的安装方式类似。
使用教程
CSS Peeper本质上是CSS样式表，与我们平时在浏览器中按下F12的效果类似，只是工具插件能够把样式表内容展示为我们更容易看懂和理解的内容。 在走查的过程中，我们打开前端开发的地址，并启动工具就能看到样式表效果。插件内容初始化在页面右侧，可以通过鼠标拖拽改变位置。
该如何使用CSS Peeper插件走查文字？
通过鼠标点击需要检查的项目，如页面主标题，点击主标题文字后被选中，右侧出现标题的样式：字体、大小、字重、颜色、背景颜色。
该如何使用CSS Peeper插件走查按钮？
点击按钮，通过右侧窗口查看样式。将样式内容与我们设计稿中的进行对比，看看是否有不一致的地方。
该如何使用CSS Peeper插件走查间距？
选中需要查看间距的内容，出现蓝色虚线框之后，将鼠标放置在边缘，就能显示该内容与周围其他内容的间距。
总结
以上两种工具是大厂设计师平时都在用的两款工具，希望对大家平时工作能够有所帮助~
