Midscene.js 调试工具速通Playground 实时调试 Chrome 扩展录制回放完整指南【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene你写了一条自然语言指令AI 浏览器脚本在 headless 浏览器里点飞了目标你只能盯着终端日志猜它卡在哪一步——Midscene.js 调试工具就是为这个瞬间准备的Playground 负责让你实时看见 AI 每一步Chrome 扩展负责在你自己的浏览器里录制回放、把操作变成脚本。从 0 到第一张实时截图3 条命令先 clone 仓库装好依赖再跑起来git clone https://gitcode.com/GitHub_Trending/mid/midscene cd midscene pnpm install然后两条命令# 1. 终端 A启动 demo 服务器puppeteer 页面 Playground Server端口 5870 cd apps/playground npm run demo:server# 2. 终端 B启动 Playground 前端连上 5870 cd apps/playground SERVER_URLhttp://localhost:5870 npm run dev打开http://localhost:3000。界面左侧显示 Playground Server 连接状态和 UI 上下文截图右侧是当前页面实时画面。在 Prompt 框输入Click the search bar点 Run——直接看效果AI 的点击位置、页面变化、执行结果都在这一个页面上。为什么端口要手动指定demo 服务器起在 5870见apps/playground/demo/server.ts而 Playground Server 的默认端口是 5800不通过SERVER_URL指定前端会连默认地址状态栏一直显示离线。按你现在在做什么选工具Midscene.js 调试工具的两件东西分工很清楚按你手上的活对号入座你正在做的事用什么为什么是它验证一条自然语言指令的效果Playground实时截图 UI 上下文远程执行不用碰自己的浏览器调试跑飞的 AI 浏览器自动化脚本Playground逐步看 AI 每一步做了什么聊天式追加指令在自己浏览器的真实标签页复现问题Chrome 扩展本地执行登录态、Cookie 都在快速把操作步骤变成用例Chrome 扩展录制录一次AI 直接生成脚本脚本和手动操作混跑同一页面Bridge 模式扩展侧允许连接本地 SDK 接管标签页接力的典型路径用扩展录制产出脚本 → 脚本丢进 Playground 跑 → 跑飞的那步回到扩展里重录。Playground 客户端核心在packages/playground-app/src/服务器状态按 5 秒间隔轮询离线时整页显示占位提示。录一次操作直接导出 YAML 或 Playwright扩展侧边栏的 Recorder 面板点 New Recording 开始录制操作你的页面停止后点导出。产物有两种YAML喂给 Midscene.js 运行时保持自然语言风格适合继续用 AI 驱动Playwright直接进你现有的 Playwright 测试工程。两个生成器都在apps/chrome-extension/src/extension/recorder/generators/下。注意生成走 AI 模型扩展设置里的 In-Browser Model Config 要先配好复杂交互产出的断言建议手动校对一遍再入库。Bridge 混合执行脚本跑一半人接着跑有些页面脚本不好走验证码、二次验证Bridge 模式让你和 AI 操作同一个标签页扩展菜单选 Bridge Mode状态行出现 listening本地跑你的 Midscene SDK 脚本连接终端提示连接请求时点扩展里的 Allow Connection。脚本执行期间你随时可以手动接管状态行会如实记录 listening / closed 的切换。UI 实现在apps/chrome-extension/src/extension/bridge/index.tsx。截图不刷新、扩展没反应、导出报错的 30 秒排查按症状查每条只给最可能的原因和一条验证动作症状最可能的原因30 秒验证Playground 截图不刷新一直离线前端连的端口和服务器不一致看左侧 Playground Server 状态终端 A 确认输出started on port 5870前端用SERVER_URL指向同端口扩展点了没反应扩展没装成功或当前标签页没激活打开chrome://extensions/看 service worker 日志确认 manifest 的activeTab权限只在你主动打开的标签页生效apps/chrome-extension/static/manifest.json导出脚本报错模型配置缺失AI 生成失败看扩展设置 In-Browser Model Config 三项是否有值缺 API key 先补齐再重试Bridge 连着又断开本地脚本进程退出扩展状态行会打印 closed 时间戳脚本侧重连再点一次 Allow Connection更多配置项参考官方文档 apps/site/docs/zh/。明天开工就能做的 3 件事跑通 demo按3 条命令一节把npm run demo:servernpm run dev跑起来看到第一张实时截图。录一条真实用例扩展里录一遍你登录页的操作导出 YAML存进项目tests/目录。配好模型再玩 Bridge给扩展补上模型配置用 Bridge 模式让脚本和手动操作混跑一次登录页体会混合执行。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
