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

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

技术杂谈小彩虹2021-08-15 21:47:07260A+A-

是什么

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

调研

  1. 写一个单独的工具
  • 太费时间,否定,集成在一些特定的调试工具上也许是一种更快速的办法
  • 本身业务是移动端,需要使用一些调试工具
  1. vconsole
  • 一开始其实是集成在这个工具上,后来发现拖拽定位有点坑,就放弃了
  1. eruda
  • eruda 功能比 vconsole 更强。最后选择了这个

页面也是自己写?

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

改造 cra

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

antd

antd 组件的复制粘贴

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

打包 react 写的 UI 源码 (上传拖拽等等)

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

image.png

raw-loader

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

image.png

iframe postmessage

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

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

shadow dom

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

image.png

图片模式

image.png

刷新图片保留

方案:

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

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

假假的CICD

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

todo

还有以下优化的点,欢迎大家 starpull request体验地址

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

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

支持Ctrl+Enter提交

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

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们