Replay.io DevTools 使用指南

Replay.io DevTools 使用指南

devtools Replay.io DevTools 项目地址: https://gitcode.com/gh_mirrors/devtools1/devtools

1. 项目介绍

Replay.io DevTools 是一个基于 React 的应用程序，它构建在 Replay 协议之上，用于记录和回放软件的运行过程。这款工具的目的是让调试过程变得像查看打印语句一样简单，同时比使用断点暂停更为强大。此外，它还支持协作调试。

2. 项目快速启动

在开始之前，请确保您已经安装了 Node.js 和 Yarn。

环境变量设置

首先，将 .env.sample 文件复制为 .env 并设置所需的环境变量。

cp .env.sample .env

安装依赖

使用 Yarn 安装项目依赖。

nvm use
yarn install

运行开发服务器

运行以下命令来启动开发服务器。

yarn dev:local

此时，DevTools 将在本地的 localhost:8080 上可用。

3. 应用案例和最佳实践

本地开发

要本地运行 DevTools 和 Dashboard 项目，可以按照以下步骤操作：

• 运行 DevTools (本项目)

yarn dev:local

• 运行 Dashboard

pnpm dev:local

此时，Dashboard 将在 localhost:8080 上可用，但不会加载录制。为了测试两个应用的端到端交互，请使用 localhost:8081。

集成生产环境

若要与生产环境的 Dashboard 项目一起运行 DevTools，可以使用以下命令：

yarn dev:prod

这时，DevTools 将在 localhost:8080 上可用，并将代理任何库或身份验证请求到 Dashboard 项目的生产部署。

4. 典型生态项目

Replay.io DevTools 项目是一个开源项目，它鼓励社区贡献和协作。项目使用 TypeScript、CSS 和 JavaScript 等技术构建，并且欢迎贡献者通过阅读贡献指南并检查 "good first issues" 来参与项目。

项目的典型生态项目可能包括：

• Replay 浏览器：用于开始记录自己的回放。
• Dashboard 项目：与 DevTools 一起使用的用户界面，用于管理和查看回放。
• GraphQL 类型生成：用于 TypeScript 的类型定义，以便更好地与后端服务交互。

通过遵循上述指南，您可以快速上手并开始使用 Replay.io DevTools，以便更好地记录和回放软件的运行过程，进行有效的调试和协作。

devtools Replay.io DevTools 项目地址: https://gitcode.com/gh_mirrors/devtools1/devtools