diff --git a/README.zh_CN.md b/README.zh_CN.md index f8961330..3c71a4c5 100644 --- a/README.zh_CN.md +++ b/README.zh_CN.md @@ -52,33 +52,4 @@ rrweb 主要由 3 部分组成: 除了添加集成测试和单元测试之外,rrweb 还提供了交互式的测试工具。 -运行 `npm run 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,测试工具就会将刚刚的操作进行回放,用于验证录制是否成功。 - -回放时命令行中将出现以下提示信息: - -``` -Enter 'y' to persistently store these recorded events: -``` - -此时可以再次在命令行中输入 y,测试工具将把已录制的内容存入一个静态 HTML 文件中,并提示存放位置: - -``` -Saved at PATH_TO_YOUR_REPO/temp/replay_2018_11_23T07_53_30.html -``` - -该文件默认使用最新 bundle 的 rrweb 代码,所以我们可以在修改代码后运行 `npm run bundle:browser`,之后刷新静态文件就可以查看最新代码对回放的影响并进行调试。 +[使用 REPL 工具](./guide.zh_CN.md#REPL-工具) diff --git a/guide.zh_CN.md b/guide.zh_CN.md new file mode 100644 index 00000000..65d9dd28 --- /dev/null +++ b/guide.zh_CN.md @@ -0,0 +1,170 @@ +# 使用指南 + +## 安装 + +### 直接通过 ` +``` + +也可以在 URL 中指定具体的版本号,例如: + +```html + +``` + +#### 仅引入录制部分 + +rrweb 代码分为录制和回放两部分,大多数时候用户在被录制的应用中只需要引入录制部分代码,同样可以通过 CDN 安装: + +```html + +``` + +### 通过 npm 引入 + +```shell +npm install --save rrweb +``` + +rrweb 同时提供 commonJS 和 ES modules 两种格式的打包文件,易于和常见的打包工具配合使用。 + +## 快速开始 + +### 录制 + +如果通过 ` +``` + +或者通过 npm 安装: + +```shell +npm install --save rrweb-player +``` + +##### 使用 + +```js +new rrwebPlayer({ + target: document.body, // 可以自定义 DOM 元素 + data: { + events, + }, +}); +``` + +## REPL 工具 + +在不安装 rrweb 的情况下,也可以通过使用 REPL 工具试用 rrweb 录制 web 应用。 + +运行 `npm run 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,测试工具就会将刚刚的操作进行回放,用于验证录制是否成功。 + +回放时命令行中将出现以下提示信息: + +``` +Enter 'y' to persistently store these recorded events: +``` + +此时可以再次在命令行中输入 y,测试工具将把已录制的内容存入一个静态 HTML 文件中,并提示存放位置: + +``` +Saved at PATH_TO_YOUR_REPO/temp/replay_2018_11_23T07_53_30.html +``` + +该文件默认使用最新 bundle 的 rrweb 代码,所以我们可以在修改代码后运行 `npm run bundle:browser`,之后刷新静态文件就可以查看最新代码对回放的影响并进行调试。