前端UI走查1:1还原UI稿还原辅助工具Copixel

3,256 阅读2分钟

Copixel 走查验收插件使用教程

一、了解Copixel 是什么、做什么的?

前端开发过程中如果遇到需要固定尺寸 1:1UI还原的情况,你辛辛苦苦改了千万遍,却每次都是还差一点点,怎么也通过不了的时候,可以试试Copixel 这款插件

让你的网页与设计完全重叠精确到像素
​
前端开发者UI稿还原辅助工具设计工作者走查检测利器
​

image.png

image.png

二、 哪些公司在用它来走查他们的项目?

image.png

三、如果下载?

  1. 可以翻墙 能打开官网地址情况:

    可直接打开官网:copixel.bytedance.com/ 直接下载,或者拖动带中间,选择你想要在什么浏览器里下载

image.png

  1. 可以翻墙 但是打不开官网地址情况:

    可以直接到谷歌插件应用商城下载,地址是:chrome.google.com/webstore/de…

  2. 不能翻墙情况:

  3. 导出已安装插件比较好的 文章推荐:blog.csdn.net/yexudengzhi…

    Mac下现在已经隐藏了插件id , 所以可通过 下载地址推测id 类似App Store ;

    eg 下载地址为:chrome.google.com/webstore/de…

    那可以推测 这个APP的ID为:iljifliapaimkofafkddpgkfkmnocajf

    谷歌放文件的地方不知道怎么办??

    方法: 浏览器打开 chrome://version/

image.png

查看到的内容为:复制这个地址,就可以打开

image.png

image.png

  1. 安装包下载地址:

    链接: pan.baidu.com/s/1_t8o4vho… 提取码: o2od

  2. 解压安装包

image.png

  1. 打开谷歌浏览器

image.png

image.png

** 注意: 第三步 就把 0.3.2_0 整个文件导入即可,不用到前面 iliji层,如果从iliji层会出现 导入无法识别问题**

四、 使用教程

bytedance.feishu.cn/docs/doccnr…

大致步骤:

  1. 安装好插件后最好重启一下浏览器,不然有可能添加了设计稿后出不来

  2. 把Copixel 插件固定

image.png

  1. 打开自己开发的网站,选择想要对比的设计稿 ,F12 调出开发页面,调整页面尺寸,可进行对比走查

image.png

  1. 调试的时候是否疑问,这重叠的,哪个是设计稿,哪个是我们开发的呀,聪明的安大哥在自己开发的地方添加一个尾巴 eg:00 或者别的文字,让设计稿和开发稿有所区别,然后就可以调整 没有重合的地方,开始找茬,进行调整修改, 结束后把自己添加的尾巴去掉即可

  2. 更多功能

image.png

End