replay-mcp

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Overview

概述

This document provides an overview of the tools available when using Replay MCP and how to use these tools to investigate recordings.

Replay MCP is used to inspect the contents of https://replay.io recordings. These recordings perfectly capture everything that happened when a browser visited an app or other web page. You can explore and investigate the app's behavior as if you are a detective with a time machine.

Any question about the app behaved can be answered precisely using data from the recording. The most important thing to remember when using Replay MCP to investigate a recording is to not jump to conclusions:

Frame your task in the form of a question that you need to answer.
Use exploratory tools to identify things that happened in the recording related to the question.
Use explanatory tools to understand why those things happened.
Form a hypothesis and identify data you gathered which justifies that hypothesis.
Explain the answer referring to the data supporting your conclusion.

本文档介绍了使用 Replay MCP 时可用的工具，以及如何使用这些工具分析录制内容。

Replay MCP 用于检查 https://replay.io 的录制内容。这些录制会完整捕获浏览器访问应用或其他网页时发生的所有情况。你可以像拥有时光机的侦探一样，探索和分析应用的行为。

关于应用行为的任何问题，都可以通过录制中的数据得到精准解答。使用 Replay MCP 分析录制内容时，最重要的一点是不要急于下结论：

将你的任务转化为需要解答的问题。
使用探索性工具识别录制中与该问题相关的事件。
使用解释性工具理解这些事件发生的原因。
形成假设，并找出支持该假设的已收集数据。
结合支持结论的数据解释答案。

Terms

术语

The recording is essentially a gigantic database containing everything that happened while the app executed. A couple terms are useful for understanding this database:

Point: A specific point in the execution of the app. There is a unique point created for every time a JS statement executes or any other interesting event with potential side effects on the app's state.
Element: A reference for a particular DOM element that is independent of any particular point. Each DOM element has a lifetime for some portion of the recording.

录制本质上是一个庞大的数据库，包含应用运行期间发生的所有事件。以下几个术语有助于理解这个数据库：

点（Point）：应用执行过程中的特定时刻。每次 JS 语句执行或任何其他可能对应用状态产生副作用的重要事件发生时，都会创建一个唯一的点。
元素（Element）：特定 DOM 元素的引用，与任何特定点无关。每个 DOM 元素在录制的某段时间范围内存在。

Exploratory Tools

探索性工具

Exploratory tools are used to discover what happened in the recording and when.

探索性工具用于发现录制中发生了什么以及发生的时间。

Errors

错误

Error tools identify major errors that occurred in the app which may cause it to break.

UncaughtException: An exception was thrown and not caught by anything.
ReactException: An exception was thrown while rendering a React component, causing the tree to unmount.

错误工具可识别应用中发生的可能导致崩溃的重大错误。

UncaughtException：抛出了异常但未被任何代码捕获。
ReactException：渲染 React 组件时抛出异常，导致组件树卸载。

Timeline

时间线

Timeline tools describe sequences of events for what happened across the recording.

Timeline: Combines data from other timeline tools to show interesting events in order.
ConsoleMessages: Shows all messages logged to the console.
LocalStorage: Shows all accesses made to local storage.
NetworkRequest: Shows all network requests made, or details about a specific request.
ReactRenders: Shows all React renders and the rendered components.

时间线工具描述了录制中事件的发生顺序。

Timeline：整合其他时间线工具的数据，按顺序显示重要事件。
ConsoleMessages：显示所有记录到控制台的消息。
LocalStorage：显示所有对本地存储的访问操作。
NetworkRequest：显示所有发起的网络请求，或特定请求的详细信息。
ReactRenders：显示所有 React 渲染操作及渲染的组件。

Sources

源代码

Source tools get information about the JS sources in the app and what code executed. When showing source code in these and other tools, hit counts are shown for each line. A blank value is used for lines that have no breakpoints.

ListSources: Find source files by name.
ReadSource: Read the contents of a source and show what code executed.
SearchSources: Search the contents of all sources for a pattern and show what code executed.

源代码工具可获取应用中 JS 源代码的信息以及执行的代码。在这些工具和其他工具中显示源代码时，会显示每一行的执行次数。无断点的行显示为空值。

ListSources：按名称查找源文件。
ReadSource：读取源文件内容并显示执行的代码。
SearchSources：在所有源文件内容中搜索指定模式，并显示执行的代码。

Explanatory Tools

解释性工具

Explanatory tools are used to understand why particular things happened in the recording.

解释性工具用于理解录制中特定事件发生的原因。

Dependencies

依赖关系

Dependency tools track happens-before relationships between events in the recording. This is useful to understand why particular events happened or didn't happen.

GetStack: Show the on stack frames at a point.
ControlDependency: Describe the events in a recording that triggered execution of a point.

依赖关系工具跟踪录制中事件之间的“发生在前”关系。这有助于理解特定事件发生或未发生的原因。

GetStack：显示某个点的调用栈帧。
ControlDependency：描述录制中触发某个点执行的事件。

Details

详情

Detail tools show additional details about the app's state at particular points.

DescribePoint: Describe a point's location and variable values.
InspectElement: Describe a DOM element's details.
ReactComponents: Describe the React component tree at a point.
Logpoint: Show the points and values of an expression every time a statement executed.
Evaluate: Evaluate an expression at a particular point.

详情工具显示特定时刻应用状态的额外信息。

DescribePoint：描述某个点的位置和变量值。
InspectElement：描述某个 DOM 元素的详细信息。
ReactComponents：描述某个点的 React 组件树。
Logpoint：显示每次语句执行时表达式对应的点和值。
Evaluate：在特定点计算表达式的值。

Tips

提示

When understanding JS behavior it is a good idea to find code relevant to the question being answered, see whether that code executed at all, and get details about the times when it executed. The Logpoint tool is extremely useful for this: see the value of the same expression whenever a statement executed, look for anything unexpected, and continue investigating from there.

When understanding the timing around a particular event (e.g. why it happened later than desired), find a point in the recording associated with the event and use the ControlDependency tool to explore the events that had to happen first and any associated delays.

在分析 JS 行为时，建议先找到与问题相关的代码，查看该代码是否执行，并获取其执行时刻的详细信息。Logpoint 工具在此方面极为有用：查看每次语句执行时同一表达式的值，寻找异常情况，然后从该点继续分析。

当分析特定事件的时间问题（例如，为何比预期晚发生）时，找到录制中与该事件相关的点，然后使用 ControlDependency 工具探索必须先发生的事件以及任何相关延迟。