Code Monkey home page Code Monkey logo

eruda-pixel's Introduction

是什么

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

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

设计师给的设计图

image.png

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

image.png

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

image.png

Demo 体验

体验地址

安装

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/[email protected]/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 端也适用

eruda-pixel's People

Contributors

faithree avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.