From 500f89b1d0492e6a9733b7293cd24798d0f0731f Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Wed, 1 Apr 2026 12:00:00 +0800
Subject: [PATCH] add a repl mode for quick test

---
 README.md    |  29 ++++++++++++++
 package.json |   1 +
 test/repl.ts | 105 +++++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 135 insertions(+)
 create mode 100644 test/repl.ts

diff --git a/README.md b/README.md
index 1d361d1b..602965b9 100644
--- a/README.md
+++ b/README.md
@@ -18,6 +18,7 @@ rrweb 主要由 3 部分组成：
   - 避免 mutation observer 异步回调导致的时序问题
   - 处理跨域请求错误
   - 实现更高效的高精度定时器
+  - 转移至 web worker 中执行
   - 实现传输数据压缩
   - 移除 inline script
   - 验证移动端录制效果
@@ -32,3 +33,31 @@ rrweb 主要由 3 部分组成：
 - 测试
   - 补充更多单元测试
   - 随机在更多网站上运行集成测试
+
+## Contribute Guide
+
+1. Fork 需要修改的 rrweb 组件仓库
+2. `npm install` 安装所需依赖
+3. 修改代码并通过测试
+4. 提交代码，创建 pull request
+
+除了添加集成测试和单元测试之外，rrweb 还提供了交互式的测试工具。
+
+运行 `npm rnu repl`，将会启动浏览器并在命令行要求输入一个测试的 url：
+
+```
+Enter the url you want to record, e.g https://react-redux.realworld.io:
+```
+
+输入后等待浏览器打开指定页面，并在命令行中出现以下提示信息：
+
+```
+Enter the url you want to record, e.g https://react-redux.realworld.io: https://github.com
+Going to open https://github.com...
+Ready to record. You can do any interaction on the page.
+Once you want to finish the recording, enter 'y' to start replay:
+```
+
+此时可以在页面中进行交互，待所需录制操作完成后，在命令行输入 y，测试工具就会将刚刚的操作进行回放，用于验证录制是否成功。
+
+_注意，当页面发生跳转时，rrweb 将停止录制，但仍可以回放跳转前的操作。_
diff --git a/package.json b/package.json
index 3cbc2d9b..9004c651 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
   "module": "dist/module.js",
   "scripts": {
     "test": "TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",
+    "repl": "TS_NODE_CACHE=false TS_NODE_FILES=true ts-node test/repl.ts",
     "bundle": "rollup --config"
   },
   "repository": {
diff --git a/test/repl.ts b/test/repl.ts
new file mode 100644
index 00000000..c177297e
--- /dev/null
+++ b/test/repl.ts
@@ -0,0 +1,105 @@
+/* tslint:disable: no-console */
+
+import * as fs from 'fs';
+import * as path from 'path';
+import * as EventEmitter from 'events';
+import * as readline from 'readline';
+import * as rollup from 'rollup';
+import typescript = require('rollup-plugin-typescript');
+import resolve = require('rollup-plugin-node-resolve');
+import * as puppeteer from 'puppeteer';
+import { eventWithTime } from '../src/types';
+
+const emitter = new EventEmitter();
+
+async function getCode(): Promise<string> {
+  const bundle = await rollup.rollup({
+    input: path.resolve(__dirname, '../src/index.ts'),
+    plugins: [typescript(), resolve()],
+  });
+  const { code } = await bundle.generate({
+    name: 'rrweb',
+    format: 'iife',
+  });
+  return code;
+}
+
+(async () => {
+  const code = await getCode();
+  const browser = await puppeteer.launch({
+    headless: false,
+    defaultViewport: {
+      width: 1600,
+      height: 900,
+    },
+  });
+
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout,
+  });
+
+  let events: eventWithTime[] = [];
+
+  rl.question(
+    'Enter the url you want to record, e.g https://react-redux.realworld.io: ',
+    async url => {
+      console.log(`Going to open ${url}...`);
+      await record(url);
+      console.log('Ready to record. You can do any interaction on the page.');
+      rl.question(
+        `Once you want to finish the recording, enter 'y' to start replay: `,
+        async answer => {
+          if (answer.toLowerCase() === 'y') {
+            emitter.emit('done');
+          }
+        },
+      );
+    },
+  );
+
+  async function record(url: string) {
+    const page = await browser.newPage();
+    await page.goto(url, {
+      waitUntil: 'domcontentloaded',
+    });
+    await page.exposeFunction('log', (event: eventWithTime) => {
+      events.push(event);
+    });
+    await page.evaluate(`${code}
+      rrweb.record({
+        emit: event => window.log(event)
+      });
+    `);
+    emitter.once('done', async () => {
+      await page.close();
+      console.log(`Recorded ${events.length} events`);
+      replay();
+    });
+  }
+
+  async function replay() {
+    const style = fs.readFileSync(
+      path.resolve(__dirname, '../src/replay/styles/style.css'),
+      'utf8',
+    );
+    const page = await browser.newPage();
+    await page.goto('about:blank');
+    await page.addStyleTag({
+      content: style,
+    });
+    await page.evaluate(`${code}
+      const events = ${JSON.stringify(events)};
+      const replayer = new rrweb.Replayer(events);
+      replayer.play();
+    `);
+  }
+
+  process
+    .on('uncaughtException', error => {
+      console.error(error);
+    })
+    .on('unhandledRejection', error => {
+      console.error(error);
+    });
+})();