DevRecorder

DevRecorder 是什么？

DevRecorder 是一款专为开发者打造的屏幕录制工具，能在捕捉界面操作的同时记录调试上下文。它会生成一段视频，并同步时间轴上的控制台日志、网络请求和导航事件，让你直接定位到 Bug 发生的精确时刻。

录制器还会捕获请求/响应详情（包括请求头、负载和响应体），并支持在复现过程中添加麦克风音频。它旨在帮助团队通过可分享链接传递包含完整上下文的 Bug 报告。

核心功能

• 帧同步调试时间轴：日志、网络和路由/导航变更与视频帧对齐，可直接拖动到录制中的任意时刻。
• 控制台捕获（保留完整细节）：记录控制台日志、警告和错误，包含完整堆栈跟踪和参数负载，与 DevTools 显示内容一致。
• 网络捕获（接近 DevTools 精度）：捕获完整网络请求，包括请求头、负载、响应体和时间信息，与 DevTools 显示内容相当。
• 导航与路由变更跟踪：记录 SPA 和传统页面流程的导航事件，使录制内容反映用户实际路径。
• 麦克风旁白支持：可在录制过程中添加麦克风音频，无需离开录制器即可说明当前情况。
• 可分享链接输出（无需登录即可查看）：生成 URL，团队成员可直接打开查看同步后的调试数据。
• 通过 MCP 提供 AI 助手上下文：可通过 MCP 连接，让 AI 助手访问录制上下文（视频、日志和网络）。页面特别提及将录制拖入 Cursor 的工作流。

如何使用 DevRecorder

1. 安装扩展：从 Chrome 网上应用店添加 DevRecorder Chrome 扩展。
2. 开始录制：点击录制按钮，然后复现要捕获的问题。
3. 录制所需内容：可选择窗口或绘制区域，仅包含屏幕相关部分。
4. 验证捕获：复现过程中，DevRecorder 会自动捕获控制台输出、网络活动和导航事件（若启用麦克风旁白则一并记录）。
5. 分享以供评审：使用分享选项生成可分享 URL，团队可查看同步后的调试上下文。
6. （可选）发送上下文至 AI 工具：通过 MCP 连接，支持的 AI 工具即可使用录制内容。

使用场景

• 复现客户端错误：在触发 JavaScript/TypeError 流程时录制，然后拖动到控制台输出中错误出现的精确帧。
• 调试请求/响应不匹配：捕获失败的 API 调用（包括状态、负载、请求头和响应体），并与视频中显示的 UI 状态和时间关联。
• 跟踪 SPA 路由跳转：当 Bug 在导航后出现（例如从商品页到购物车再到结账），可使用导航事件确认用户实际路由路径。
• 撰写带旁白的 Bug 报告：录制并口述复现步骤，评审者可在看到底层日志和网络活动的同时理解复现逻辑。
• 准备 AI 辅助分析：将录制上下文提供给通过 MCP 连接的 AI 助手，使其能参考视频中发生的事件及录制的调试数据。

常见问题

DevRecorder 分享录制是否需要登录？

页面说明团队查看者可通过可分享链接打开，无需登录。

DevRecorder 录制时会捕获哪些内容？

它会同步捕获控制台日志（包括堆栈跟踪和参数）、网络请求（包括请求头、负载、响应体和时间信息）和导航事件，并可包含麦克风旁白。

我可以只录制屏幕的一部分吗？

可以。页面描述了选择窗口或绘制区域，仅捕获选定区域。

AI 助手如何从 DevRecorder 获取上下文？

网站说明可通过 MCP 连接，让 AI 助手访问录制上下文（视频、日志和网络）。页面还以将录制拖入 Cursor 为例说明工作流。

页面提及的浏览器设置是什么？

安装指引为从 Chrome 网上应用店添加 DevRecorder 扩展。

替代方案

• DevTools 性能/网络/控制台录制流程：内置于 Chrome DevTools，专注于捕获跟踪和网络详情；通常需要手动导出和关联，而非单一帧同步视频时间轴。
• 带标注的通用屏幕录制工具：用于教程或问题复现的视频录制工具可搭配单独的日志导出，但无法自动将控制台和网络数据同步到视频。
• 收集会话的错误报告工具（如会话回放）：会话回放产品捕获用户交互时间轴，有时包含网络详情；重点通常在于用户交互，而非 DevTools 式的控制台/网络捕获与帧锁定关联。