尧图网页设计 
Midscene.js 调试工具实战2 个工具搞定 AI 自动化操作的观察与录制【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene.js 做 AI 浏览器自动化时最难的部分往往不是写脚本而是看不见脚本正在干什么、出了错卡在哪一步。它的仓库里带了两个调试工具Playground 负责把远程设备的画面拉到浏览器里实时观察并下发指令Chrome 扩展负责在当前标签页本地录制操作、生成可运行的脚本。一个管「看」一个管「录」组合起来基本覆盖了调试日常。先选工具你要「看」还是「录」两个工具的分工很清晰按目标选就行对比角度PlaygroundChrome 扩展适合任务盯住 Android / iOS / 电脑 / 网页设备的执行过程把人在页面上的操作变成脚本操作位置浏览器里打开的独立页面当前 Chrome 标签页运行方式起一个本地服务器客户端连过去扩展直接跑在浏览器内无需额外服务主要产出实时画面 交互指令录好的会话 导出的脚本交互形态聊天式界面指令一条条发弹窗管理会话操作自动捕获一句话要观察别人的或自己脚本的执行过程选 Playground要把手工操作沉淀成脚本选扩展。让远程画面看得见一条命令拉起 Playground本章目标浏览器里出现远程设备的实时画面能直接发指令。最短路径两步npx midscene/playground服务器起来后在客户端目录里npm run dev启动开发服务器访问本地页面即可连上。界面是聊天式的左边看截图右边发指令设备执行到哪一步基本上一目了然。想自己控制服务端口、开关跨域可以直接看演示用的 demo/server.tslaunch里传port、enableCors两个参数就够用了。画面长时间不刷新时先用浏览器网络面板确认/screenshot接口有没有返回数据再考虑去改客户端轮询间隔。把操作录成脚本Chrome 扩展录制与导出本章目标手工在页面上点一遍产出一个能重复跑的脚本。构建扩展cd apps/chrome-extension pnpm run build在chrome://extensions/打开开发者模式用「加载已解压的扩展程序」选中构建产物目录。点扩展图标新建一次录制然后在当前页面正常操作——点击、输入都会被自动捕获无需额外配置。录完在会话里点导出选 YAML 给 Midscene.js 运行时用选 Playwright 直接进测试工程。两种格式的生成逻辑都在 apps/chrome-extension/src/extension/recorder/generators/ 下模板不满意时可以照着改。复杂交互拖拽、多步联动导出后最好手动过一遍再跑。让终端和浏览器联动Bridge 模式本章目标脚本执行到一半时终端和浏览器能互相接棒。在扩展弹窗里切到 Bridge 模式然后在终端执行midscene bridge两者通过 WebSocket 连上之后就可以脚本和手动操作混合着走。这个模式在调试「AI 走不通、人手动补两步再继续」的场景时特别顺手交互逻辑在 apps/chrome-extension/src/extension/bridge/ 里。出问题时对照这张表现象可能原因处理办法Playground 一直连不上本地服务没跑或端口被占确认midscene/playground进程还活着换个端口重启浏览器报 CORS 错服务默认拒绝跨域启动参数里开enableCors: true配置参考 apps/playground/demo/server.ts截图加载失败、画面空白/screenshot接口没返回有效 base64看网络面板响应内容先修服务端再调前端轮询内容脚本注入失败扩展没对当前页面激活在扩展管理页看日志刷新页面后重试录制无响应录制会话没真正启动检查「背景页 / service worker」日志重建一次会话三个习惯省掉后面一半的返工用例命名按「功能-场景-版本」来比如「登录-正常流程-v1」翻记录时不用猜。会话要短一个功能模块开一个独立会话别把注册、下单混在同一条里。定期导出验证通过的录制马上导出成 YAML 存到项目tests/目录只留在浏览器里等于没存。描述写全测试环境、前置条件、预期结果都填上三个月后你才认识它。改前先跑调整生成脚本时先小跑一遍确认没坏再批量替换。Playground 管观察、扩展管录制、Bridge 管联动三个动作串起来就是完整的调试闭环。细节和更多平台Android、iOS、桌面、HarmonyOS的接入方式建议直接翻 apps/site/docs/zh/ 下的官方文档。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Midscene.js 调试工具实战：2 个工具搞定 AI 自动化操作的观察与录制
Midscene.js 调试工具实战2 个工具搞定 AI 自动化操作的观察与录制【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene.js 做 AI 浏览器自动化时最难的部分往往不是写脚本而是看不见脚本正在干什么、出了错卡在哪一步。它的仓库里带了两个调试工具Playground 负责把远程设备的画面拉到浏览器里实时观察并下发指令Chrome 扩展负责在当前标签页本地录制操作、生成可运行的脚本。一个管「看」一个管「录」组合起来基本覆盖了调试日常。先选工具你要「看」还是「录」两个工具的分工很清晰按目标选就行对比角度PlaygroundChrome 扩展适合任务盯住 Android / iOS / 电脑 / 网页设备的执行过程把人在页面上的操作变成脚本操作位置浏览器里打开的独立页面当前 Chrome 标签页运行方式起一个本地服务器客户端连过去扩展直接跑在浏览器内无需额外服务主要产出实时画面 交互指令录好的会话 导出的脚本交互形态聊天式界面指令一条条发弹窗管理会话操作自动捕获一句话要观察别人的或自己脚本的执行过程选 Playground要把手工操作沉淀成脚本选扩展。让远程画面看得见一条命令拉起 Playground本章目标浏览器里出现远程设备的实时画面能直接发指令。最短路径两步npx midscene/playground服务器起来后在客户端目录里npm run dev启动开发服务器访问本地页面即可连上。界面是聊天式的左边看截图右边发指令设备执行到哪一步基本上一目了然。想自己控制服务端口、开关跨域可以直接看演示用的 demo/server.tslaunch里传port、enableCors两个参数就够用了。画面长时间不刷新时先用浏览器网络面板确认/screenshot接口有没有返回数据再考虑去改客户端轮询间隔。把操作录成脚本Chrome 扩展录制与导出本章目标手工在页面上点一遍产出一个能重复跑的脚本。构建扩展cd apps/chrome-extension pnpm run build在chrome://extensions/打开开发者模式用「加载已解压的扩展程序」选中构建产物目录。点扩展图标新建一次录制然后在当前页面正常操作——点击、输入都会被自动捕获无需额外配置。录完在会话里点导出选 YAML 给 Midscene.js 运行时用选 Playwright 直接进测试工程。两种格式的生成逻辑都在 apps/chrome-extension/src/extension/recorder/generators/ 下模板不满意时可以照着改。复杂交互拖拽、多步联动导出后最好手动过一遍再跑。让终端和浏览器联动Bridge 模式本章目标脚本执行到一半时终端和浏览器能互相接棒。在扩展弹窗里切到 Bridge 模式然后在终端执行midscene bridge两者通过 WebSocket 连上之后就可以脚本和手动操作混合着走。这个模式在调试「AI 走不通、人手动补两步再继续」的场景时特别顺手交互逻辑在 apps/chrome-extension/src/extension/bridge/ 里。出问题时对照这张表现象可能原因处理办法Playground 一直连不上本地服务没跑或端口被占确认midscene/playground进程还活着换个端口重启浏览器报 CORS 错服务默认拒绝跨域启动参数里开enableCors: true配置参考 apps/playground/demo/server.ts截图加载失败、画面空白/screenshot接口没返回有效 base64看网络面板响应内容先修服务端再调前端轮询内容脚本注入失败扩展没对当前页面激活在扩展管理页看日志刷新页面后重试录制无响应录制会话没真正启动检查「背景页 / service worker」日志重建一次会话三个习惯省掉后面一半的返工用例命名按「功能-场景-版本」来比如「登录-正常流程-v1」翻记录时不用猜。会话要短一个功能模块开一个独立会话别把注册、下单混在同一条里。定期导出验证通过的录制马上导出成 YAML 存到项目tests/目录只留在浏览器里等于没存。描述写全测试环境、前置条件、预期结果都填上三个月后你才认识它。改前先跑调整生成脚本时先小跑一遍确认没坏再批量替换。Playground 管观察、扩展管录制、Bridge 管联动三个动作串起来就是完整的调试闭环。细节和更多平台Android、iOS、桌面、HarmonyOS的接入方式建议直接翻 apps/site/docs/zh/ 下的官方文档。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考