概要说明
Web 预览会通过当前 SSH 连接转发开发服务端口,并在 Redock 中打开页面。预览与运行 dev server、Coding Agent 的终端保持在同一个工作流中。
你可以在同一设备上来回完成实现指令和视觉验证,缩短响应式布局、文案、表单和交互状态的反馈循环。
适用场景
- 预览 Agent 在远程 Host 上启动的 Vite、Next.js、Astro、Rails、Django 或其他 dev server。
- 代码修改后立即验证布局、字体、颜色、图片、表单和导航是否符合预期。
- 直接在控制 Agent 的 iPhone 或 iPad 上检查真实移动端断点和触控体验。
- 检查加载、空状态、错误状态以及不依赖 Hover 的触控交互,再给出下一轮修改指令。
- 通过 SSH 工作流访问私有开发端口,避免为了临时预览把 dev server 直接暴露到公网。
闭环完成 Agent 修改与页面验证
让 Agent 修改组件后,直接打开转发的 dev server 查看结果,再带着具体观察回到终端提出修正。整个“实现—预览—反馈”循环都可以在同一个移动工作流中完成。
在真实移动视口检查响应式体验
直接验证断点、触控目标、吸顶元素、输入框聚焦、横向溢出和安全区域,而不是只依赖桌面浏览器模拟手机尺寸。
覆盖正常页面之外的状态
检查加载、空数据、表单校验、权限不足、网络错误和超长内容状态,让下一条 Prompt 能引用已经观察到的具体问题,而不是笼统要求“优化页面”。
使用流程
- 在远程 Host 上启动开发服务器。
- 通过当前连接转发服务端口。
- 打开 Web 预览检查改动,再回到终端给出反馈。
使用建议
让开发服务器监听框架允许的地址,并确认端口正确。检查完成后,及时停止不再使用的服务和端口转发。