DevRecorder

DevRecorderとは？

DevRecorderは、UIで起きた動作と一緒にデバッグ情報を記録するための開発者向け画面レコーダーです。コンソールログ、ネットワークリクエスト、ナビゲーションイベントを同期したタイムライン付きの動画を記録し、バグが発生した瞬間を正確に確認できます。

レコーダーはリクエスト/レスポンスの詳細（ヘッダー、ペイロード、レスポンスボディを含む）も取得し、マイク音声を追加して再現手順を説明することも可能です。共有リンクでチームに完全なコンテキストを共有できるように設計されています。

フレーム同期のデバッグタイムライン: ログ、ネットワーク、ルート/ナビゲーションの変更が動画フレームに紐づけられ、録画内の任意のタイミングに直接移動できます。
詳細を保持したコンソール取得: コンソールログ、警告、エラーをスタックトレースや引数ペイロード付きで記録し、DevToolsと同等の表示を実現します。
DevTools同等のネットワーク取得: ヘッダー、ペイロード、レスポンスボディ、タイミング情報を含む完全なネットワークリクエストをDevToolsと同等の精度で取得します。
ナビゲーションとルート変更の追跡: SPAや従来のページ遷移のナビゲーションイベントを記録し、ユーザーがたどった経路を反映します。
マイクナレーション対応: 録画中にマイク音声を追加して、画面を離れずに状況を説明できます。
共有リンク出力（ログイン不要で閲覧可能）: 同期されたデバッグデータ付きの動画をチームメンバーが開けるURLを生成します。
MCP経由のAIアシスタント連携: MCPで接続することで、AIアシスタントが録画コンテキスト（動画、ログ、ネットワーク）にアクセスできます。Cursorへのドラッグなどのワークフローも記載されています。

拡張機能をインストール: ChromeウェブストアからDevRecorder Chrome拡張機能を追加します。
録画を開始: 録画ボタンをクリックし、取得したい問題を再現します。
必要な範囲を録画: ウィンドウを選択するか領域を指定して、画面の該当部分のみを録画します。
取得内容を確認: 再現中にDevRecorderがコンソール出力、ネットワークアクティビティ、ナビゲーションイベントを自動で記録します（マイクナレーション有効時は音声も含みます）。
レビュー用に共有: 共有オプションでURLを生成し、チームが同期されたデバッグコンテキストを確認できるようにします。
（任意）AIツールへコンテキストを送信: MCPで接続し、対応するAIツールが録画内容を利用できるようにします。

クライアントサイドエラーの再現: JavaScript/TypeErrorの流れをトリガーしながら録画し、エラーがコンソールに出力された正確なフレームに移動します。
リクエスト/レスポンスの不整合のデバッグ: 失敗したAPIコール（ステータス、ペイロード、ヘッダー、レスポンスボディを含む）をキャプチャし、動画内のUI状態やタイミングと関連付けます。
SPAルート遷移の追跡: ナビゲーション後にバグが発生した場合（例: 商品ページ→カート→チェックアウト）、ナビゲーションイベントで実際の遷移経路を確認します。
ナレーション付きバグレポートの作成: 再現手順を音声で説明しながら録画し、レビュアーが根拠となるログやネットワークアクティビティと一緒に確認できるようにします。
AI支援分析の準備: MCPで接続したAIアシスタントに録画コンテキストを提供し、動画とデバッグデータを参照できるようにします。

チームメンバーは共有リンクを開くだけでログイン不要で閲覧できます。

同期されたコンソールログ（スタックトレースと引数を含む）、ネットワークリクエスト（ヘッダー、ペイロード、レスポンスボディ、タイミングを含む）、ナビゲーションイベントをキャプチャし、マイクナレーションを追加できます。

はい。ウィンドウを選択するか領域を指定して、選択した部分のみをキャプチャできます。

MCPで接続することで、AIアシスタントが録画コンテキスト（動画、ログ、ネットワーク）にアクセスできます。Cursorへのドラッグを例として挙げています。

ChromeウェブストアからDevRecorder拡張機能を追加するよう案内されています。

DevToolsのパフォーマンス・ネットワーク・コンソール記録ワークフロー: Chrome DevToolsに標準搭載されており、トレースやネットワーク詳細の取得に特化していますが、フレーム同期された単一の動画タイムラインではなく、手動でのエクスポートと相関付けが必要です。
注釈付きの汎用画面録画ツール: チュートリアルやバグ再現用の動画を記録できますが、コンソールやネットワークデータを動画に自動同期させる機能はありません。
セッションを収集するバグ報告ツール（セッションリプレイなど）: ユーザー操作のタイムラインやネットワーク情報を取得できますが、通常はDevToolsのようなコンソール・ネットワークのフレーム同期記録ではなく、ユーザー操作の記録に重点が置かれています。