关于 replay-mcp
Replay MCP 是用于调查 https://replay.io 浏览器录制内容的工具集。开发者可通过时间线、已执行源码、错误和状态详情追踪应用行为，并依据录制证据得出结论。
主要功能
- 01查看错误与事件时间线
- 02检查控制台、存储和网络活动
- 03查找并阅读已执行源码
- 04追踪事件依赖关系与调用栈
- 05检查执行点变量值和 DOM 元素
适用场景
- 01调查浏览器应用故障原因
- 02追踪事件发生的原因与时机
- 03确认相关代码是否执行
MCP 相关
Replay MCP 提供用于探索和解释 https://replay.io 录制数据的工具。MCP 客户端可检查时间线、源码、依赖关系、错误和应用状态。
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/replay-mcp确认已加载。
详细介绍
概览
本文档概述了使用 Replay MCP 时可用的工具，以及如何使用这些工具调查录制内容。
Replay MCP 用于检查 https://replay.io 录制内容。这些录制内容会完整捕获浏览器访问应用或其他网页时发生的一切。你可以像一位拥有时光机的侦探一样，探索和调查应用的行为。
关于应用行为的任何问题，都可以使用录制数据精确解答。使用 Replay MCP 调查录制内容时，最重要的是不要贸然下结论：
- 将任务设定为一个需要回答的问题。
- 使用探索工具，找出录制中与该问题相关的事件。
- 使用解释工具，了解这些事件为何发生。
- 提出假设，并找出你收集到的、能够支持该假设的数据。
- 依据支持结论的数据，解释答案。
术语
录制内容本质上是一个庞大的数据库，包含了应用运行期间发生的一切。了解这个数据库时，有几个术语很有用：
-
点：应用执行过程中的一个特定位置。每次执行 JS 语句，或发生任何其他可能影响应用状态的有趣事件时，都会创建一个唯一的点。
-
元素：对特定 DOM 元素的引用，与任何特定点无关。每个 DOM 元素在录制内容中的一段时间内都具有生命周期。
探索工具
探索工具用于发现录制内容中发生了什么，以及何时发生。
错误
错误工具用于识别应用中可能导致其崩溃的严重错误。
- UncaughtException：抛出了异常，且没有任何代码捕获该异常。
- ReactException：渲染 React 组件时抛出了异常，导致组件树卸载。
时间线
时间线工具描述录制内容中事件发生的顺序。
- Timeline：整合其他时间线工具的数据，按顺序显示有趣的事件。
- ConsoleMessages：显示记录到控制台的所有消息。
- LocalStorage：显示对本地存储的所有访问。
- NetworkRequest：显示发出的所有网络请求，或特定请求的详细信息。
- ReactRenders：显示所有 React 渲染及渲染出的组件。
源码
源码工具用于获取应用中 JS 源码的信息，以及代码的执行情况。 在这些工具及其他工具显示源码时，每一行都会显示命中次数。 没有断点的行会显示为空值。
- ListSources：按名称查找源文件。
- ReadSource：读取源文件内容，并显示执行过的代码。
- SearchSources：在所有源码内容中搜索某个模式，并显示执行过的代码。
解释工具
解释工具用于了解录制内容中特定事件发生的原因。
依赖关系
依赖关系工具用于追踪录制内容中事件之间的先发生关系。 这有助于了解特定事件为何发生或未发生。
- GetStack：显示某个点的调用栈帧。
- ControlDependency：描述录制内容中触发某个点执行的事件。
详细信息
详细信息工具用于显示特定点上应用状态的更多信息。
- DescribePoint：描述某个点的位置和变量值。
- InspectElement：描述 DOM 元素的详细信息。
- ReactComponents：描述某个点上的 React 组件树。
- Logpoint：每次执行语句时，显示表达式对应的点和值。
- Evaluate：在特定点上计算表达式。
提示
要理解 JS 的行为，最好先找到与问题相关的代码，确认这段代码是否实际执行过，并了解它执行时的详细情况。 Logpoint 工具对此非常有用：查看每次执行某条语句时同一表达式的值，寻找任何异常之处，然后继续调查。
要了解某个特定事件的时间安排（例如，为什么它发生得比预期晚），请在录制内容中找到与该事件相关的时间点，并使用 ControlDependency 工具探索必须先发生的事件及相关延迟。