# 灵感： Agora RTC/RTM 调试工具

- Link: https://www.ixiqin.com/2022/05/22/inspiration-agora-rtc-rtm-debugging-tools/
- Published: 2022-05-22T23:38:02+08:00
- Author: 白宦成

文章目录

 [Toggle](https://www.ixiqin.com/2022/05/22/inspiration-agora-rtc-rtm-debugging-tools/#)

 * [核心诉求](https://www.ixiqin.com/2022/05/22/inspiration-agora-rtc-rtm-debugging-tools/#%e6%a0%b8%e5%bf%83%e8%af%89%e6%b1%82)
 * [形态](https://www.ixiqin.com/2022/05/22/inspiration-agora-rtc-rtm-debugging-tools/#%e5%bd%a2%e6%80%81)
 * [基本功能](https://www.ixiqin.com/2022/05/22/inspiration-agora-rtc-rtm-debugging-tools/#%e5%9f%ba%e6%9c%ac%e5%8a%9f%e8%83%bd)
 * [为什么一定是独立的 Client？](https://www.ixiqin.com/2022/05/22/inspiration-agora-rtc-rtm-debugging-tools/#%e4%b8%ba%e4%bb%80%e4%b9%88%e4%b8%80%e5%ae%9a%e6%98%af%e7%8b%ac%e7%ab%8b%e7%9a%84_client%ef%bc%9f)
 * [为什么最好是 Component / Devtools ？](https://www.ixiqin.com/2022/05/22/inspiration-agora-rtc-rtm-debugging-tools/#%e4%b8%ba%e4%bb%80%e4%b9%88%e6%9c%80%e5%a5%bd%e6%98%af_component_devtools_%ef%bc%9f)

我最近在写一些 Agora 的 RTC/ RTM 应用的教程，在开发 Demo 过程中，发现调试 Agora 
的应用比较复杂，其实可以有一些辅助工具来帮助开发者更好的开发这些应用。

## 核心诉求

可以更加简单的调试 Agora SDK 当中的 Event

## 形态

 1. 独立的 Vue Componet / React Component
 2. 基于浏览器的 DevTools

## 基本功能

 * 支持触发事件（应该是一列 按钮，用户点击后，就会触发对应的事件）
 * 支持发送信息（应该是一个文本框 + 一个提交按钮）
    - 支持设定 Template
 * 支持查看频道内已有信息（最好还可以有筛选，这样方便只看自己关注的信息）
 * 支持查看 Client、Track等基本信息（如当前人数、当前用户列表等等）

## 为什么一定是独立的 Client？

在实际开发时，业务的逻辑和实际使用到的功能可能是需要多个步骤才能触达的。此外，根据
应用的特性，还可能会有浏览器锁定、设备锁定等业务能力。这些能力虽然与 Agora 无关，
但会影响调试时的难度，因此，有一个单独的 Client 可以用来调试 Agora 是一个不错的选择。

## 为什么最好是 Component / Devtools ？

在实际的开发过程中，我们可能会用到 Agora 的 Token 机制，借助这个机制，我们可以对
我们的音频/视频 Channel 设定准入门槛，降低成本。但相应的，调试起来比较麻烦。

如果是 Component / Devtools ，可以通过传入 Props / 环境变量来完成 AppID 和 Token
的设定，降低调试的成本。