# 模块 5：Browser Preview 与 Browser Use

<div class="mt-6 text-sm">

浏览器能力分成两层：人在 IDE 里看效果，AI 驱动浏览器完成验证。

</div>

<div class="grid grid-cols-2 gap-6 mt-8 text-sm">
<div class="p-4 rounded-xl bg-blue-500/10 border border-blue-500/30">
<div class="font-bold mb-2">Browser Preview</div>

- IDE 内预览页面
- 快速看前端效果
- 减少窗口切换
- 服务于视觉反馈
</div>
<div class="p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/30">
<div class="font-bold mb-2">Browser Use</div>

- AI 点击、输入、跳转
- 表单填写与流程验证
- 自动截图与回归检查
- 服务于任务验收
</div>
</div>

<!--
Browser Preview 和 Browser Use 要分开讲。
Preview 解决人看页面的问题。
Browser Use 解决 AI 操作页面和验证结果的问题。
前端研发里，这两层能力都会进入标准工作流。
-->

---

# 浏览器驱动的技术路线

<div class="mt-5 text-sm">

| 路线 | 特点 | 适合场景 |
|---|---|---|
| Playwright 脚本 | 稳定、可复现、工程化强 | 自动测试与回归 |
| Agent Browser | 专用环境、集成度高 | 复杂网页任务 |
| 指针模拟 | 接近真人操作 | 视觉任务与临时验证 |

</div>

<!--
浏览器驱动还在快速演进。
Playwright 工程化强，适合稳定测试。
专用 Agent Browser 集成度高，适合复杂任务。
指针模拟更接近真人操作，适合临时验证和视觉任务。
课堂里关注能力边界即可。
-->

---

# 从浏览器到设备模拟

<div class="mt-6 text-sm">

同样的驱动理念可以迁移到更多环境：手机模拟器、桌面应用、IoT 设备、终端和内部系统。

</div>

<div class="grid grid-cols-4 gap-3 mt-8 text-sm">
<div class="p-3 rounded-xl bg-blue-500/10 border border-blue-500/30 text-center">网页</div>
<div class="p-3 rounded-xl bg-emerald-500/10 border border-emerald-500/30 text-center">移动端</div>
<div class="p-3 rounded-xl bg-amber-500/10 border border-amber-500/30 text-center">桌面端</div>
<div class="p-3 rounded-xl bg-purple-500/10 border border-purple-500/30 text-center">IoT</div>
</div>

<!--
这页回扣 MCP 和 CLI 思维。
只要目标环境能被脚本、接口或本地服务驱动，Agent 就可以接入。
浏览器只是最先成熟的场景之一。
-->

---

# 代码库索引：两种路线

<div class="grid grid-cols-2 gap-6 mt-6 text-sm">
<div class="p-4 rounded-xl bg-blue-500/10 border border-blue-500/30">
<div class="font-bold mb-2">向量化索引</div>

- 语义搜索能力强
- 适合大仓库概念查找
- 需要关注索引更新
</div>
<div class="p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/30">
<div class="font-bold mb-2">关键词搜索</div>

- 实时性强
- 结果可解释
- 适合定位文件、函数、配置
</div>
</div>

<!--
向量化索引和关键词搜索各有位置。
向量搜索适合语义层面的发现。
关键词搜索适合精确定位，尤其代码实时变化时很可靠。
课堂里可以提醒学员：让 AI 给结论时，最好要求它回到文件、函数和调用点。
-->

---

# 代码智能管理方向

<div class="mt-6 text-sm">

未来的关键能力是跨文件类型理解同一份业务逻辑。

</div>

<div class="mt-6 text-sm">

| 文件类型 | 需要理解的内容 |
|---|---|
| `.vue` | template、script、style、路由和状态 |
| `.java` | Controller、Service、权限注解、事务 |
| `.sql` | 表结构、字段含义、约束关系 |
| `.yaml` | 环境配置、开关、外部依赖 |

</div>

<!--
代码索引的下一步是智能管理。
比如一个 Vue 文件里同时有模板、脚本和样式，一个业务功能横跨前端、接口、数据库和配置。
AI 工具要从文件后缀继续深入到功能边界。
-->

---

# 文档格式：MD 优先

<div class="mt-6 text-sm">

Markdown 是 AI 时代的一等文档格式：结构清楚、轻量、易读写、易版本管理。

</div>

<div class="grid grid-cols-3 gap-4 mt-8 text-sm">
<div class="p-3 rounded-xl bg-blue-500/10 border border-blue-500/30 text-center">结构化</div>
<div class="p-3 rounded-xl bg-emerald-500/10 border border-emerald-500/30 text-center">可 diff</div>
<div class="p-3 rounded-xl bg-amber-500/10 border border-amber-500/30 text-center">可转换</div>
</div>

<!--
Markdown 很适合 AI 读写。
它轻量、结构清晰、版本管理友好。
企业里可以把 AI 生成的核心内容先放在 Markdown，再转换成 Word、PDF、网页或知识库格式。
-->

---

# 水合与脱水

<div class="mt-6 text-sm">

| 动作 | 说明 |
|---|---|
| 脱水 | 从 Word、PDF、PPT 中抽出结构、模板、样式要求 |
| 生成 | 让 AI 用 Markdown 组织正文内容 |
| 水合 | 把 Markdown 内容注入模板，输出目标格式 |

</div>

<div class="mt-4 p-3 rounded-xl bg-emerald-500/10 border border-emerald-500/30 text-sm">
推荐流程：AI 用 Markdown 思考和生产，最后一步做格式转换。
</div>

<!--
水合和脱水是处理复杂文档格式的实用思路。
先把格式拆成模板，再让 AI 生成结构化内容，最后注入模板。
这比直接让 AI 在复杂格式里自由编辑更稳定。
-->

---

# 课堂产出：前端验证清单

<div class="mt-5 text-sm">

| 检查项 | 验收方式 |
|---|---|
| 页面能打开 | Browser Preview 或本地浏览器访问 |
| 主流程可操作 | Browser Use 点击、输入、提交 |
| 视觉无明显错位 | 截图检查关键视口 |
| 代码结论可追溯 | 标注文件、函数、选择器、接口 |

</div>

<!--
这个练习把浏览器能力落到前端交付验收。
学员要理解：AI 改完前端之后，浏览器验证会成为标准动作。
-->