15 · Webview 实时预览

Builder 模式的杀手级体验——代码写出来就立刻能看到跑起来的样子。

01 Webview 是什么

Webview 是 Builder 模式的右侧预览面板。当 AI 在 Builder 模式下生成和修改代码时，右侧的 Webview 窗口会实时渲染你的应用——就像浏览器开发者工具里的设备模拟器，但完全嵌在 IDE 里。

你可以点击页面上的按钮、输入表单、导航页面——它是真实运行的，不是静态截图。这让你在 AI 写代码的同时就能看到效果，不切换窗口、不手动刷新。

02 Webview 的工作方式

Builder 生成/修改代码
    ↓
文件自动保存
    ↓
dev server 热重载（HMR）
    ↓
Webview 自动刷新显示最新效果
    ↓
你在 Webview 里交互、发现要调整的地方
    ↓
在 Builder 输入框描述修改 → 循环

支持的前端框架

03 Webview 的交互能力

Webview 不只是”显示”，它还能交互：

设备模拟

Webview 内置了常见设备尺寸：

• iPhone SE / iPhone 14 Pro
• iPad / iPad Pro
• MacBook / Desktop

选择对应设备后，Webview 按该设备的视口渲染，方便做响应式检查。

04 Webview + 多模态：设计稿驱动的开发

Webview 和 Builder 的多模态输入结合，产生了一个高效的开发模式：

你拖入 Figma 设计稿截图
    ↓
Builder 根据截图生成代码
    ↓
Webview 实时显示效果
    ↓
你对比设计稿 vs 实际效果
    ↓
在 Builder 中描述差异："按钮圆角再大一点"、"这个颜色往深调"
    ↓
AI 修改 → Webview 刷新 → 再对比
    ↓
直到和设计稿一致

这种工作流让设计到代码的转化从”设计师截图 → 开发看着截图手写代码”变成了”截图拖进去 → AI 写 → 你微调”。

05 Webview 的调试能力

内置 DevTools

Webview 工具栏有 DevTools 按钮，点击打开类似 Chrome DevTools 的面板：

• Console：查看 console.log 输出和错误
• Elements：检查 DOM 结构和 CSS
• Network：查看网络请求
• Application：查看 localStorage / sessionStorage

错误反馈

当 Builder 的代码有运行时错误时，Webview 会在预览区显示红色错误提示。你可以把错误信息直接”添加到对话”——点错误弹窗的按钮，错误信息和堆栈追踪会自动粘贴到 Builder 输入框，让 AI 针对性地修复。

06 Webview 的局限性

07 小结

下一篇：16 Git 工作流 —— Trae + Git：AI 帮你管理版本，但 push 的钥匙永远在你手里。