# domrecord

**Repository Path**: DaBuChen/domrecord

## Basic Information

- **Project Name**: domrecord
- **Description**: 网页截图功能。基于DOM对网页记录和回显。做到更加灵活的网页截取。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-03-29
- **Last Updated**: 2025-07-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# DOM Record

[![License: ISC](https://img.shields.io/badge/License-ISC-blue.svg)](https://opensource.org/licenses/ISC)

DOM Record 是一个用于捕获和回放 DOM 状态的 JavaScript 库。

## 功能特性

- 捕获当前页面的 DOM 序列化为 JSON
- 使用序列化的 JSON 重新呈现 DOM

## 用途

- 将 DOM 转化为 JSON 后体积更小，便于传输和存储。将 JSON 上传到服务器，然后在需要时重新呈现 DOM。

### 使用情景

- 日常在项目中埋点，埋点携带的数据通常是业务数据，但是当你需要关注最终的呈现效果是否正确时，你可能需要将 DOM 转化为 JSON 后通过埋点上报上传到服务器，然后在需要时利用上报数据重新呈现 DOM，用来观察最终的呈现效果是否正确（一些页面呈现效果的逻辑复杂，比如用低代码生成的千人千面页面）。这样做的好处是，在使用很少的传输数据量的情况下，你可以观察到最终的呈现效果是否正确。

## 安装

使用 npm 安装：

```bash
npm install domrecord
```

或者通过 CDN 使用：

```html
<script src="https://unpkg.com/domrecord@0.0.1/dist/domrecord.umd.js"></script>
```

## 使用示例

### 捕获 DOM

```javascript
// 捕获当前页面的 DOM 数据，并将其序列化为 JSON，可以将其传输给服务器进行存储
const snapshotData = domrecord.snapshot();
```

### 回放 DOM

```javascript
const visualizer = new domrecord.Visualizer();
// 创建一个 iframe 用于回放
const iframe = document.createElement('iframe');
iframe.id = 'replayFrame';
iframe.style.cssText = 'width: 100%; height: 100%; border: none;';
document.getElementById('replay-container').appendChild(iframe);
// 设置回放环境
await visualizer.setup(iframe.contentWindow);

// 渲染捕获的 DOM
visualizer.render(snapshotData);
```

## 使用效果

![DOM Record 效果图](docs/images/DOMRecord1.png)