实时预览的关键不是打开一个浏览器，而是确认服务、端口、路由和数据环境都正确，再把可见结果与控制台、网络证据结合。
开始前先准备什么
先从 package.json、README 或框架配置找到真实启动命令和默认端口，不要假设所有项目都用 npm run dev。
还要明确目标路由、所需后端、测试账号和种子数据。先记录启动前已占用的端口，确认环境变量指向本地或测试服务，不含生产写入权限。Cursor Browser 的 Cookie、Local Storage 和 IndexedDB 会按工作区保留，因此打开页面后要先核对当前登录身份。
准备一份可观察的验收清单，例如“页面标题出现、点击保存只发送一次请求、成功提示可见、控制台没有新增错误”。只写“看看页面是否正常”会让检查停留在截图层面。
实际操作步骤
在 Cursor 终端启动开发服务，记录实际本地 URL 和进程退出方式。
- 启动唯一服务：在 Cursor 终端启动开发服务，记录实际本地 URL、端口、进程退出方式和启动日志。Browser 会尝试识别已运行的开发服务，但仍要以终端实际输出为准，避免重复启动。
- 打开准确状态：在 Browser 中打开准确路由；需要登录时只使用测试账号。刷新后确认测试数据和身份没有串到其他工作区。
- 执行一条关键路径：让 Agent 检查目标元素，按顺序点击或输入测试值。每个会写数据的动作都要先说明，默认审批模式下逐项审查。
- 结合三类证据：同时看页面截图、控制台和网络请求。一个页面“能看到”不代表接口成功；一个 200 响应也不代表页面正确呈现。
- 做回归检查：修改完成后刷新页面并直接打开深层路由，测试返回、重载和窄屏；最后运行生产构建和相关测试。
可复制的预览检查指令
@Browser 请验证本地页面 /settings/profile，只使用测试账号。
1. 先报告当前 URL、可见标题和登录身份，不要提交表单；
2. 输入演示昵称 Test User，但点击保存前停下；
3. 经我确认后保存，检查请求方法、状态码和响应，不输出 Cookie 或令牌；
4. 刷新页面，确认昵称仍显示；
5. 汇总控制台新增错误、失败请求和未验证项。这段输入把读操作与写操作分开，适合第一次建立预览闭环。预期结果应包含可见状态、一次明确网络请求、刷新后的持久化结果以及日志摘要。若后端未启动、测试账号无权限或页面连接生产环境，应在提交前停止。
怎样验证结果
验证结果至少包含可见页面、关键交互、控制台无新增错误、失败请求已解释，以及构建或测试通过。
建议按“页面、交互、网络、代码”四层签收：截图证明页面状态；键盘和点击证明交互可达；网络记录证明请求次数与响应符合预期；diff、构建和测试证明代码层没有明显回归。对深层路由直接刷新一次，可发现只在前端跳转时正常、服务端回退配置缺失的问题。
常见错误
- 端口被占用时先确认进程归属。
- 不要允许 Browser 向生产表单提交测试数据。
- 开发模式正常仍要跑生产构建。
适用边界
本地预览不等于生产环境验证；鉴权、缓存、域名和后端数据可能不同。
Browser 能读取控制台和网络流量，也能保留工作区会话，因此权限应从严设置。默认逐项批准适合陌生页面；只对可信且无副作用的动作设置允许列表。不要在不受信任的网站或代码上开启自动运行，也不要把生产表单、支付流程或删除操作当普通预览任务。
相关问答
Browser 会保留登录状态吗？
工作区浏览器可能保留 Cookie；因此要使用隔离测试账号并留意当前环境。
页面空白先改代码吗？
先看终端构建错误、控制台和网络请求，再决定是代码还是环境问题。
资料与适用范围
本文根据 2026 年 10 月 1 日核验的 官方资料 1、官方资料 2 整理。示例流程未在你的设备、账号或仓库中实测，界面、方案、权限和项目命令应以当前环境为准。
Ai菜鸟网。发布者：AI小管家，转载请注明出处：https://www.alyyhw.com/32619.html
