eruda-pixel 前端用了这工具,再也不怕 UI 验收了-使用篇

eruda-pixel 前端用了这工具,再也不怕 UI 验收了-使用篇

技术杂谈小彩虹2021-07-17 23:30:2450A+A-

是什么

基于移动端调试工具 eruda 开发的一款 UI 高精度还原辅助工具,设计师验收页面利器。

原理是把设计图插入到页面中,降低设计图透明度。然后进行对比。

设计师给的设计图

image.png

开发出来之后实际实现效果

image.png

使用 eruda-pixel 工具后,开发自查,设计验收效果

image.png

Demo 体验

体验地址

仓库地址、欢迎 star、issues、pr

安装

npm 安装


npm install eruda eruda-pixel -D
eruda.init();
eruda.add(erudaPixel);

cdn安装

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.10/eruda-pixel.js',
  ],
  () => {
    const eruda = window.eruda;
    if (typeof eruda !== 'undefined') {
      eruda.init();
      eruda.add(window.erudaPixel);
    }
  },
);

功能

点开 pixel 面板,上传 ui 设计图(图片存放到页面内存里,不会上传到任何地方)。

image.png

  1. 冻结:设计图不可拖动,防止影响页面的一些鼠标事件
  2. 坐标轴:基于左上角
  3. 模式: 支持多种模式,找出页面不同点
  4. 刷新页面保留设计图
  5. 只支持单张设计图上传,重新上传会覆盖前一张设计图

优势

  1. 方便快速,支持 npm 和 cdn 安装,甚至能像我上面的 demo 通过抓包工具注入插件到某个网站上
  2. 支持手机真机调试
  3. 插件使用 shadow dom + iframe,没有 DOM、JavaScript、CSS 污染真实页面
  4. 虽然是移动端调试工具,但是 pc 端也适用

招贤纳士

深圳明源云招人了,港股千亿体量公司,前端、php、go 中高级都需要(组件、插件、工程化 )。 全程跟进面试进度和回复。深圳少有的不主张加班的公司(去年年终4个月+)。六险一金,目前前端团队 100 人左右 ,每周都有前端技术分享,面试一天完成。

内推邮箱:chenql01@mingyuanyun.com

职位详情地址: note.youdao.com/ynoteshare1…

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1

联系我们