B端设计师在工作中肯定会遇到这样的情况：因为上线的项目和设计稿不符而和前端吵架，在要知道所用的显色是否准确只能通过“截图”，然后在设计软件中“吸色”来判断。因此，在我们的工作中设计走查已成为项目过程中非常重要的一部分。虽然走查过程往往复杂枯燥，但为了保证设计稿与线上项目一致，我们需要有一把“得心应手的利器”来还原项目的高水平。我不知道你是否有任何有用的演练工具。今天给大家分享两个我用的非常多的浏览器插件：Copiexl，它是字节跳动出品的一款高效的漫游插件。它的原理很简单。首先打开需要验证的在线项目；然后上传你的设计稿图片；进而降低设计稿的透明度，达到快速验收项目的目的。开发哪里出了问题，一眼就能看出来。简单教你如何安装和使用这样一个插件：1、安装方法：首先打开软件官网（https://copixel.bytedance.com/），点击免费下载（仅限Chrome浏览器）这里支持，如果你是Safari、Firefox、Opera等浏览器，在官网向下滚动，也提供下载入口）点击下载后，会跳转到谷歌应用商店，点击安装，类似安装浏览器插件的方法（这里需要自己搭梯子）2、使用教程选择合适的页面设计尺寸。建议按照主流窗口尺寸的宽度进行设计，如：1366px、1440px、1920px；建议最小设计尺寸为1366px、1440px，最大设计尺寸为1920px（宽度）。目的是按照1:1导出设计图，与开发页面显示效果一致。如何输出设计稿？Copiexl浏览器插件的原理是将你的设计稿悬浮在前端还原页面进行比对，让你快速知道自己的设计页面有什么问题。因此，我们需要一次性将设计稿导出为PNG文件。这样就可以批量导入到插件中，直接切换设计稿，提高走查效率。如何使用打开的前端实现页面，使用刚刚安装的浏览器插件“Copixel”，添加UI设计图。通过调整设计图的位置、大小和透明度，使其与开发页面高度重叠，配合具有截图标注功能的软件（如：Xinp）查找故障标记。通过使用排查文档来标记和描述问题，可以有效地完成项目排查。然后将有问题的演练内容直接分享给开发。CSSPeeperhttps://csspeeper.com/这是设计走查/样式复制/资源下载的高效神器，可以轻松查看网页中所有元素的CSS属性，不需要像Chrome一样“右键”浏览器——“检查”浏览器元素，并在众多代码中寻找您需要的CSS代码。我们只需要点击插件，选择元素即可快速查看样式。场景1：设计走查。例如，前端工程师完成页面后，设计师需要进行页面走查。这时候很多同学往往会用自己的像素眼一一比较。最终设计者会打开浏览器的内置检查来检查元素。不过，浏览器内置的检查其实更多是为程序员设计的。对于我们的设计师来说，只能理解一小部分。内容，显然检查的效率不是太高。这时候就可以使用CSSPeeper来方便地查看网页中的CSS样式。我们不仅可以看到元素的一般属性，比如颜色、背景、间距；我们还可以看到元素的盒子模型，可以看到元素的Padding和Margin。。。通过这个插件，可以很清楚的看到开发的哪一部分在恢复时出现了问题，并且可以展示在眼前的他很“可惜”~场景二：风格文案对于设计师来说，完全不用担心竞品是怎么设计的？如何还原，因为你可以通过这个插件查看他的还原思路，知道它对网页上任何元素的设计风格和属性，可以同时点击颜色或图片，所有的颜色或图片页面中使用的可以归纳汇总，可以导出，方便分析设计风格。,使用了哪些图标和图片。并且这些资源可以快速下载到本地进行存储。这样，您就可以成为资源专家。这是我工作中最常用的插件。你最常使用什么插件？大家一起交流交流！！
