What is the

Eruda-pixel front-end use this tool, no longer afraid of UI acceptance – use

research

  1. Write a separate tool
  • Too time consuming, negative, integration with some specific debugging tools may be a faster approach
  • The service itself is mobile terminal, need to use some debugging tools
  1. vconsole
  • It was actually integrated into the tool at first, but was abandoned when it was found that drag and drop positioning was a bit of a pit
  1. eruda
  • Eruda is more powerful than VConsole. I chose this one

Write your own page?

React, ANTD, etc

Transform cra

First comment out the code split function, only package a file, why? It is convenient to insert only one JS file into iframe

antd

Copy and paste antD components

Slider has a bug on mobile: Unable to preventDefault inside passive event listener Invocation. The ANTD team will fix it later.

Package react UI code (upload drag, etc.)

After executing build, it is compiled into a file. Execute the shell script to copy and paste.

raw-loader

Import the compiled file into the plugin template provided by Eruda, and finally insert it into iframe.

iframe postmessage

Event communication between the child iframe function page and the parent page image. The Eruda plug-in provides two hooks, init and show

  • If initialized in show, the eruda-Pixel and iframe communication may be delayed, but it can achieve the on-demand loading effect of the ErUDA plugin (adding event queues to postMessage can solve the communication delay problem).
  • If you initialize the ERuda-Pixel and iframe communication in init, it will not be delayed. But the load may be slightly slower, the development debugging is not aware (adopt this)

shadow dom

Inserted images can be styleaffected and tainted, but iframe does not. But the image will be polluted by the style of the page, what to do? shadow dom

Picture mode

Refresh image retention

Solution:

  1. URL.createObjectURL
  2. The image base64 is stored in localStorage

SRC: base64 was used to find the special card when the image was first loaded, which was replaced with the URL. CreateObjectURL

False false CICD

Use Github Actions to create an experience address

todo

There are also the following optimization points, welcome everyone star, pull request experience address

  • Reduce the code size.
  • Lerna manages the project
  • Alternative indexDB localStorage
  • Support online address instead of uploading pictures
  • The test code
  • Style beautification
  • Support for multiple images