Copixel 走查验收插件使用教程
一、了解Copixel 是什么、做什么的?
前端开发过程中如果遇到需要固定尺寸 1:1UI还原的情况,你辛辛苦苦改了千万遍,却每次都是还差一点点,怎么也通过不了的时候,可以试试Copixel 这款插件
让你的网页与设计完全重叠。精确到像素。
前端开发者UI稿还原辅助工具。设计工作者走查检测利器
二、 哪些公司在用它来走查他们的项目?
三、如果下载?
-
可以翻墙 能打开官网地址情况:
可直接打开官网:copixel.bytedance.com/ 直接下载,或者拖动带中间,选择你想要在什么浏览器里下载
-
可以翻墙 但是打不开官网地址情况:
可以直接到谷歌插件应用商城下载,地址是:chrome.google.com/webstore/de…
-
不能翻墙情况:
-
导出已安装插件比较好的 文章推荐:blog.csdn.net/yexudengzhi…
Mac下现在已经隐藏了插件id , 所以可通过 下载地址推测id 类似App Store ;
eg 下载地址为:chrome.google.com/webstore/de…
那可以推测 这个APP的ID为:iljifliapaimkofafkddpgkfkmnocajf
谷歌放文件的地方不知道怎么办??
方法: 浏览器打开 chrome://version/
查看到的内容为:复制这个地址,就可以打开
-
安装包下载地址:
链接: pan.baidu.com/s/1_t8o4vho… 提取码: o2od
-
解压安装包
-
打开谷歌浏览器
** 注意: 第三步 就把 0.3.2_0 整个文件导入即可,不用到前面 iliji层,如果从iliji层会出现 导入无法识别问题**
四、 使用教程
bytedance.feishu.cn/docs/doccnr…
大致步骤:
-
安装好插件后最好重启一下浏览器,不然有可能添加了设计稿后出不来
-
把Copixel 插件固定
- 打开自己开发的网站,选择想要对比的设计稿 ,F12 调出开发页面,调整页面尺寸,可进行对比走查
-
调试的时候是否疑问,这重叠的,哪个是设计稿,哪个是我们开发的呀,聪明的安大哥在自己开发的地方添加一个尾巴 eg:00 或者别的文字,让设计稿和开发稿有所区别,然后就可以调整 没有重合的地方,开始找茬,进行调整修改, 结束后把自己添加的尾巴去掉即可
-
更多功能