Midscene.js 调试工具实战指南从实时截图监控到录制回放的两条路径【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene调试浏览器自动化脚本时最难的是看清 AI 到底做了什么。Midscene.js 调试工具套件分两块远程的 Playground 和浏览器里的 Chrome 扩展一个负责实时截图监控一个负责录制出脚本。这篇文章把两者的上手操作讲清楚。快速上手Playground 服务器与 Chrome 扩展分别跑起来一条命令启动 Playground 服务器npx midscene/playground服务器默认在http://localhost:8080启动带 WebSocket 通道做实时通信。再启动前端客户端cd apps/playground npm install npm run dev浏览器访问http://localhost:3000就能打开 Playground 界面构建配置在 apps/playground/rsbuild.config.ts。开发模式加载 Chrome 扩展cd apps/chrome-extension pnpm run build然后打开chrome://extensions/打开开发者模式点加载已解压的扩展程序选择apps/chrome-extension/dist目录。权限和组件声明都在 static/manifest.json 里出问题时可以翻一遍。分工与选型什么场景用哪个调试工具两个工具的执行模式和存储方式不同按你的场景挑你要做的事选它原因远程盯着 AI 在设备/浏览器上的动作Playground客户端-服务器架构远程执行实时截图回传边操作页面边攒脚本Chrome 扩展本地执行直接捕获当前标签页的交互想复用已登录状态脚本和人工操作交替进行Chrome 扩展 Bridge 模式连接的是你自己的桌面 Chrome历史记录需要跨重启保留Playground会话写入 localStorage持久化按功能组织录制、导出成可执行脚本Chrome 扩展会话级存储支持 YAML / Playwright 导出一句话看远端选 Playground产脚本选扩展。场景实操远程盯屏与实时截图监控打开 Playground 后截图监控由 ScreenshotViewer 组件完成界面显示设备名称、最后更新时间和一个刷新按钮默认每 5 秒轮询一次拉取新截图也能点按钮手动刷新。组件会做三件事——检测服务器连接状态、校验截图数据格式、把错误翻译成看得懂的提示。服务器离线时屏幕区会显示占位提示而不是白屏。会话管理不需要你操心所有交互记录自动存进 localStorage关掉浏览器再打开历史还在。想调整存储策略改 apps/playground/src/App.tsx 里的localStorageProvider配置即可。服务器不在默认地址在初始化PlaygroundSDK时把serverUrl指向你的服务器比如http://your-custom-server:port客户端就会连过去。场景实操从录制到脚本导出的完整流程录制入口在扩展里按时间线走三步。1. 开始录制点扩展图标打开弹出窗口点 New Recording 创建一个新会话。之后你在页面上正常操作扩展会自动捕获交互事件记录列表由 RecordList 组件维护核心模块都在 apps/chrome-extension/src/extension/ 目录下。2. 导出脚本录完点导出两种格式二选一——YAML 格式给 Midscene.js 运行时用Playwright 格式可以直接丢进 Playwright 测试。生成逻辑在apps/chrome-extension/src/extension/recorder/generators/目录想改输出样式可以从这里扩展模板。Bridge 模式终端 浏览器混合控制Bridge 模式让本地脚本直接接管你的桌面 Chrome适合脚本走主流程、人工补关键步骤的混合操作。配合方式在扩展弹出窗口中点 Bridge Mode在终端运行midscene bridge扩展通过 WebSocket 与本地终端建立连接脚本发出的指令作用在你真实的浏览器里核心实现在 apps/chrome-extension/src/extension/bridge/index.tsx。排错速查现象 → 原因 → 处理️ 遇到卡点先对表现象原因处理Playground 连不上、屏幕空白服务器进程没在跑回终端确认midscene/playground进程还活着前端请求被浏览器拦截服务器没开跨域参考 apps/playground/demo/server.ts 里的 CORS 设置修改服务器配置截图一直加载不出来/screenshot接口没返回正确的 base64 数据打开浏览器控制台看网络请求逐个确认返回值扩展内容脚本注入失败manifest 权限不足检查 static/manifest.json 的权限配置点录制没反应扩展没在当前页面激活确认当前页面的扩展状态到扩展管理页背景页查日志导出脚本时报错录制的事件序列不完整核对录制内容复杂交互可能要手动调整生成的脚本提效清单几条省时间的习惯⚡ 这些小事坚持下来调试成本会降得很明显按功能建会话每个功能模块一个独立会话命名用[功能]-[场景]-[版本]比如登录-正常流程-v1描述里写清测试环境、前置条件和预期结果。定期导出重要用例导出为 YAML 存进项目的tests/目录别只留在扩展的会话存储里。Playground 侧调试用 React DevTools 看组件状态网络面板盯 WebSocket 帧觉得 5 秒轮询太慢直接在 ScreenshotViewer 组件里调间隔。扩展的三个调试入口弹出窗口右键检查扩展管理页点 service worker 链接页面 DevTools 的 Sources 面板找 Content scripts。继续深入Playground 管看得清Chrome 扩展管产得出两者配合基本覆盖了浏览器自动化脚本调试的常用诉求。想接着看高级特性官方文档在 apps/site/docs/zh/ 目录。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Midscene.js 调试工具实战指南：从实时截图监控到录制回放的两条路径
Midscene.js 调试工具实战指南从实时截图监控到录制回放的两条路径【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene调试浏览器自动化脚本时最难的是看清 AI 到底做了什么。Midscene.js 调试工具套件分两块远程的 Playground 和浏览器里的 Chrome 扩展一个负责实时截图监控一个负责录制出脚本。这篇文章把两者的上手操作讲清楚。快速上手Playground 服务器与 Chrome 扩展分别跑起来一条命令启动 Playground 服务器npx midscene/playground服务器默认在http://localhost:8080启动带 WebSocket 通道做实时通信。再启动前端客户端cd apps/playground npm install npm run dev浏览器访问http://localhost:3000就能打开 Playground 界面构建配置在 apps/playground/rsbuild.config.ts。开发模式加载 Chrome 扩展cd apps/chrome-extension pnpm run build然后打开chrome://extensions/打开开发者模式点加载已解压的扩展程序选择apps/chrome-extension/dist目录。权限和组件声明都在 static/manifest.json 里出问题时可以翻一遍。分工与选型什么场景用哪个调试工具两个工具的执行模式和存储方式不同按你的场景挑你要做的事选它原因远程盯着 AI 在设备/浏览器上的动作Playground客户端-服务器架构远程执行实时截图回传边操作页面边攒脚本Chrome 扩展本地执行直接捕获当前标签页的交互想复用已登录状态脚本和人工操作交替进行Chrome 扩展 Bridge 模式连接的是你自己的桌面 Chrome历史记录需要跨重启保留Playground会话写入 localStorage持久化按功能组织录制、导出成可执行脚本Chrome 扩展会话级存储支持 YAML / Playwright 导出一句话看远端选 Playground产脚本选扩展。场景实操远程盯屏与实时截图监控打开 Playground 后截图监控由 ScreenshotViewer 组件完成界面显示设备名称、最后更新时间和一个刷新按钮默认每 5 秒轮询一次拉取新截图也能点按钮手动刷新。组件会做三件事——检测服务器连接状态、校验截图数据格式、把错误翻译成看得懂的提示。服务器离线时屏幕区会显示占位提示而不是白屏。会话管理不需要你操心所有交互记录自动存进 localStorage关掉浏览器再打开历史还在。想调整存储策略改 apps/playground/src/App.tsx 里的localStorageProvider配置即可。服务器不在默认地址在初始化PlaygroundSDK时把serverUrl指向你的服务器比如http://your-custom-server:port客户端就会连过去。场景实操从录制到脚本导出的完整流程录制入口在扩展里按时间线走三步。1. 开始录制点扩展图标打开弹出窗口点 New Recording 创建一个新会话。之后你在页面上正常操作扩展会自动捕获交互事件记录列表由 RecordList 组件维护核心模块都在 apps/chrome-extension/src/extension/ 目录下。2. 导出脚本录完点导出两种格式二选一——YAML 格式给 Midscene.js 运行时用Playwright 格式可以直接丢进 Playwright 测试。生成逻辑在apps/chrome-extension/src/extension/recorder/generators/目录想改输出样式可以从这里扩展模板。Bridge 模式终端 浏览器混合控制Bridge 模式让本地脚本直接接管你的桌面 Chrome适合脚本走主流程、人工补关键步骤的混合操作。配合方式在扩展弹出窗口中点 Bridge Mode在终端运行midscene bridge扩展通过 WebSocket 与本地终端建立连接脚本发出的指令作用在你真实的浏览器里核心实现在 apps/chrome-extension/src/extension/bridge/index.tsx。排错速查现象 → 原因 → 处理️ 遇到卡点先对表现象原因处理Playground 连不上、屏幕空白服务器进程没在跑回终端确认midscene/playground进程还活着前端请求被浏览器拦截服务器没开跨域参考 apps/playground/demo/server.ts 里的 CORS 设置修改服务器配置截图一直加载不出来/screenshot接口没返回正确的 base64 数据打开浏览器控制台看网络请求逐个确认返回值扩展内容脚本注入失败manifest 权限不足检查 static/manifest.json 的权限配置点录制没反应扩展没在当前页面激活确认当前页面的扩展状态到扩展管理页背景页查日志导出脚本时报错录制的事件序列不完整核对录制内容复杂交互可能要手动调整生成的脚本提效清单几条省时间的习惯⚡ 这些小事坚持下来调试成本会降得很明显按功能建会话每个功能模块一个独立会话命名用[功能]-[场景]-[版本]比如登录-正常流程-v1描述里写清测试环境、前置条件和预期结果。定期导出重要用例导出为 YAML 存进项目的tests/目录别只留在扩展的会话存储里。Playground 侧调试用 React DevTools 看组件状态网络面板盯 WebSocket 帧觉得 5 秒轮询太慢直接在 ScreenshotViewer 组件里调间隔。扩展的三个调试入口弹出窗口右键检查扩展管理页点 service worker 链接页面 DevTools 的 Sources 面板找 Content scripts。继续深入Playground 管看得清Chrome 扩展管产得出两者配合基本覆盖了浏览器自动化脚本调试的常用诉求。想接着看高级特性官方文档在 apps/site/docs/zh/ 目录。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考