Xinbao
5.6 KiB
5.6 KiB
模块 5：Browser Preview 与 Browser Use
浏览器能力分成两层：人在 IDE 里看效果，AI 驱动浏览器完成验证。
Browser Preview
- IDE 内预览页面
- 快速看前端效果
- 减少窗口切换
- 服务于视觉反馈
Browser Use
- AI 点击、输入、跳转
- 表单填写与流程验证
- 自动截图与回归检查
- 服务于任务验收
浏览器驱动的技术路线
| 路线 | 特点 | 适合场景 |
|---|---|---|
| Playwright 脚本 | 稳定、可复现、工程化强 | 自动测试与回归 |
| Agent Browser | 专用环境、集成度高 | 复杂网页任务 |
| 指针模拟 | 接近真人操作 | 视觉任务与临时验证 |
从浏览器到设备模拟
同样的驱动理念可以迁移到更多环境：手机模拟器、桌面应用、IoT 设备、终端和内部系统。
网页
移动端
桌面端
IoT
代码库索引：两种路线
向量化索引
- 语义搜索能力强
- 适合大仓库概念查找
- 需要关注索引更新
关键词搜索
- 实时性强
- 结果可解释
- 适合定位文件、函数、配置
代码智能管理方向
未来的关键能力是跨文件类型理解同一份业务逻辑。
| 文件类型 | 需要理解的内容 |
|---|---|
.vue |
template、script、style、路由和状态 |
.java |
Controller、Service、权限注解、事务 |
.sql |
表结构、字段含义、约束关系 |
.yaml |
环境配置、开关、外部依赖 |
文档格式：MD 优先
Markdown 是 AI 时代的一等文档格式：结构清楚、轻量、易读写、易版本管理。
结构化
可 diff
可转换
水合与脱水
| 动作 | 说明 |
|---|---|
| 脱水 | 从 Word、PDF、PPT 中抽出结构、模板、样式要求 |
| 生成 | 让 AI 用 Markdown 组织正文内容 |
| 水合 | 把 Markdown 内容注入模板，输出目标格式 |
推荐流程：AI 用 Markdown 思考和生产，最后一步做格式转换。
课堂产出：前端验证清单
| 检查项 | 验收方式 |
|---|---|
| 页面能打开 | Browser Preview 或本地浏览器访问 |
| 主流程可操作 | Browser Use 点击、输入、提交 |
| 视觉无明显错位 | 截图检查关键视口 |
| 代码结论可追溯 | 标注文件、函数、选择器、接口 |