# Mirrorframe 网页采集与 React 重建工具

> Mirrorframe 使用 Playwright 采集网页，并将观察到的布局和行为重建为独立的 React 应用。它记录计算样式、资源、动效和部分交互状态，再通过图像差异，将重建后的节点和重放状态与原网页比对。

- 类型：工具
- 目标：网站
- 类别：网站分析工具
- 关联：基础工具
- 来源复核于：2026-11-06
- 收录于：2026-11-06
- 原始资源：<https://github.com/byte271/mirrorframe>
- 一手来源：<https://github.com/byte271/mirrorframe/blob/16ffce02957bbc7f28f5ea1b38e40bea3ff4fd37/README.md>
- 目录页面：<https://awesomerea.org/zh/resources/mirrorframe/>
- 记录 JSON：<https://awesomerea.org/resources/mirrorframe/record.json>
- 英文版：[English](https://awesomerea.org/resources/mirrorframe/index.md)

## 使用条件与局限

- **前提条件：**需要 Node.js 18 或更新版本及 Playwright Chromium。
- **局限：**0.x 版本的命令参数、genome 结构和报告格式可能变化。
- **局限：**不重建实时 Canvas、WebGL 或 WebGPU 绘制程序；Canvas 输出为采集时的静态画面。
- **许可：**采用 MIT 许可证。

## 一手来源

1. <https://github.com/byte271/mirrorframe/blob/16ffce02957bbc7f28f5ea1b38e40bea3ff4fd37/README.md>
2. <https://github.com/byte271/mirrorframe/blob/16ffce02957bbc7f28f5ea1b38e40bea3ff4fd37/references/limitations.md>

## 同分区更多条目：网站

- [unwebpack-sourcemap 源码恢复脚本](https://awesomerea.org/zh/resources/unwebpack-sourcemap/index.md) · 工具
- [Wirebrowser 浏览器运行时插桩工具](https://awesomerea.org/zh/resources/wirebrowser/index.md) · 工具
- [Thug 低交互蜜罐客户端](https://awesomerea.org/zh/resources/thug/index.md) · 工具
- [spy-debugger 移动页面调试代理](https://awesomerea.org/zh/resources/spy-debugger/index.md) · 工具
- [恐龙跑酷：恢复一条加速规则](https://awesomerea.org/zh/resources/rea-dinosaur-speed-case/index.md) · 案例
- [rauchg.com：根据捕获的 Flight 输出重建 RSC 博客](https://awesomerea.org/zh/resources/rauchg-rsc-reconstruction-case/index.md) · 案例

## 关于此条目

说明已依据一手来源复核。
原创说明采用 MIT 许可；外部项目、论文与素材保留各自的权利和许可。