eruda-pixel 前端用了这工具，再也不怕 UI 验收了-原理篇

是什么

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

调研

1. 写一个单独的工具

• 太费时间，否定，集成在一些特定的调试工具上也许是一种更快速的办法
• 本身业务是移动端，需要使用一些调试工具

2. vconsole

• 一开始其实是集成在这个工具上，后来发现拖拽定位有点坑，就放弃了

3. eruda

• eruda 功能比 vconsole 更强。最后选择了这个

页面也是自己写？

当然不是，基于 react、antd 快速搭建基本页面功能

改造 cra

首先注释掉了代码分割的功能，只打包一个文件，为啥？方便后续只插入一个 js 文件到 iframe 里面

antd

antd 组件的复制粘贴

遇到问题：slider 组件在移动端有个 bug： Unable to preventDefault inside passive event listener invocation.
后续 antd 团队会修复。

打包 react 写的 UI 源码 （上传拖拽等等）

执行 build 之后，编译成一个文件了。
执行 shell 脚本进行复制粘贴。

raw-loader

把上边编译好的文件，引入到 eruda 提供的插件模板里,最后插入到 iframe 里面。

iframe postmessage

子 iframe 功能页面和父页面图片的事件通信。
eruda 插件提供两个钩子，一个是 init ，一个是 show

• 如果在 show 里面初始化，eruda-pixel 和 iframe 通信可能会被延迟，但能做到 eruda 插件的按需加载效果（在 postmessage 加事件队列能解决通信延迟的问题）。
• 如果在 init 里面初始化 eruda-pixel 和 iframe 通信就不会被延迟。但可能加载会稍微慢一点，开发调试无感知（采用这种）

shadow dom

插入的图片可能会收样式影响和污染，iframe不会。
但是图片会受到页面的样式污染，怎么办？
shadow dom

图片模式

刷新图片保留

方案：

1. URL.createObjectURL
2. 图片 base64 存储到 localStorage 里

一开始图片加载的时候是使用 src: base64 发现特别卡，就换成了 URL.createObjectURL

假假的CICD

使用 github actions，弄了个体验地址

todo

还有以下优化的点，欢迎大家 star、pull request体验地址

• 减小代码大小。
• lerna 管理项目
• indexDB 替代 localStorage
• 支持在线地址替代上传图片
• 代码测试
• 样式美化
• 支持多张图片