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 ツールを使って、先に発生する必要があったイベントと、それに伴う遅延を調べてください。