我最近在写一些 Agora 的 RTC/ RTM 应用的教程，在开发 Demo 过程中，发现调试 Agora 的应用比较复杂，其实可以有一些辅助工具来帮助开发者更好的开发这些应用。
核心诉求
可以更加简单的调试 Agora SDK 当中的 Event
形态
- 独立的 Vue Componet / React Component
- 基于浏览器的 DevTools
基本功能
- 支持触发事件（应该是一列 按钮，用户点击后，就会触发对应的事件）
- 支持发送信息（应该是一个文本框 + 一个提交按钮）
- 支持设定 Template
- 支持查看频道内已有信息（最好还可以有筛选，这样方便只看自己关注的信息）
- 支持查看 Client、Track等基本信息（如当前人数、当前用户列表等等）
为什么一定是独立的 Client？
在实际开发时，业务的逻辑和实际使用到的功能可能是需要多个步骤才能触达的。此外，根据应用的特性，还可能会有浏览器锁定、设备锁定等业务能力。这些能力虽然与 Agora 无关，但会影响调试时的难度，因此，有一个单独的 Client 可以用来调试 Agora 是一个不错的选择。
为什么最好是 Component / Devtools ？
在实际的开发过程中，我们可能会用到 Agora 的 Token 机制，借助这个机制，我们可以对我们的音频/视频 Channel 设定准入门槛，降低成本。但相应的，调试起来比较麻烦。
如果是 Component / Devtools ，可以通过传入 Props / 环境变量来完成 AppID 和 Token 的设定，降低调试的成本。