基于移动端调试工具 eruda 开发的一款 UI 高精度还原辅助工具,设计师验收页面利器。
原理是把设计图插入到页面中,降低设计图透明度。然后进行对比。
npm install eruda eruda-pixel -D
eruda.init(); eruda.add(erudaPixel);
const loadOneJS = (url, callback) => { const script = document.createElement('script'); const fn = callback || (() => {}); script.type = 'text/javascript'; script.onload = () => { fn(); }; script.src = url; document.getElementsByTagName('head')[0].appendChild(script); }; const loadJS = (urls, callback) => { let i = 0; const fn = callback || (() => {}); urls.forEach((url) => { loadOneJS(url, () => { i = 1 + i; if (urls.length === i) { fn(); } }); }); }; loadJS( [ '//cdn.bootcdn.net/ajax/libs/eruda/2.4.1/eruda.min.js', '//unpkg.com/eruda-pixel@1.0.13/eruda-pixel.js', ], () => { const eruda = window.eruda; if (typeof eruda !== 'undefined') { eruda.init(); eruda.add(window.erudaPixel); } }, );
点开 pixel 面板,上传 ui 设计图(图片存放到页面内存里,不会上传到任何地方)。
- 冻结:设计图不可拖动,防止影响页面的一些鼠标事件
- 坐标轴:基于左上角
- 模式: 支持多种模式,找出页面不同点
- 刷新页面保留设计图
- 只支持单张设计图上传,重新上传会覆盖前一张设计图
- 方便快速,支持 npm 和 cdn 安装,甚至能像我上面的 demo 通过抓包工具注入插件到某个网站上
- 支持手机真机调试
- 插件使用 shadow dom + iframe,没有 DOM、JavaScript、CSS 污染真实页面
- 虽然是移动端调试工具,但是 pc 端也适用