用途:在修改 apps/app/(Chrome 扩展)代码后,启动开发环境并通过 CDP 可视化验证 BrowserOS 应用扩展 UI,包括新标签页左侧栏与右侧面板聊天界面,确认新组件渲染、视图导航、布局样式以及按钮、输入框、表单等交互元素。
前提:需安装 Go(brew install go),BrowserOS.app 须位于 /Applications/BrowserOS.app/,并需存在 scripts/dev/inspect-ui.ts 工具。
主要能力:inspect-ui.ts 提供 targets、snapshot、screenshot、click、fill、press_key、scroll、hover、select_option、wait_for、eval、open-sidepanel 等命令,目标用 URL 子串(如 sidepanel、app.html)或索引指定。snapshot 输出可访问性树与元素 ID,适合结构性检查;screenshot 用于布局、配色等视觉确认。
使用方式:先运行 bun run dev:watch -- --new 启动开发环境,该命令会构建 Go 工具、选择随机端口、创建新浏览器配置、构建 controller-ext、运行 GraphQL codegen、以 WXT HMR 启动代理扩展并等待 CDP 就绪。随后从输出中提取 CDP 端口并设置 export BROWSEROS_CDP_PORT=<port>,等待 CDP ready 与 HTTP server listening。用 targets 发现目标,用 eval 设置 window.location.hash 导航(如 #/home、#/settings、#/scheduled-tasks、#/onboarding),用 open-sidepanel 打开右侧面板,再按 snapshot→识别 ID→click/fill/press_key→snapshot 的循环验证。
限制与注意:每次导航或 HMR 后元素 ID 会变化,必须重新 snapshot;新配置默认停留在 onboarding 页,需先导航到 #/home;侧边栏初始为禁用;wait_for 最长等待 10 秒;端口随机需从输出提取。官方资料未提供收费、价格、平台覆盖或效果承诺等信息。