主题
浏览器实测怎么看
「代码写完了」不算完——它自己打开浏览器、自己点一遍、自己截图,证据摆在您面前才算数。本页讲实测证据怎么看、您自己怎么上手试。
它的实测:不是嘴上说说
界面类改动交付时,您会看到真实浏览器截图——不是渲染示意图,是它真启动了页面、真操作了拍下来的:
| 您看到的 | 背后发生的 |
|---|---|
| 页面截图(不同状态) | 无头浏览器打开页面,逐状态截屏 |
| 操作过程截图(点开的弹窗 / 提交后的列表) | 它模拟点击、填表、提交,逐步截图 |
| 控制台报错(如有) | 它读浏览器控制台,有错先自己修 |
| 布局数据(如「三档视口无横向溢出」) | 它量了页面尺寸,量化确认不破版 |
text
您说:把登录页做好
它交付:代码 + 「已实测」的证据包——
登录页初始态截图 / 报错提示态截图 / 登录成功跳转截图
(每张都标了它是怎么操作出来的)您自己怎么看:三条路
| 路 | 怎么走 | 适合 |
|---|---|---|
| 让它跑给您看 | 「把这个页面跑起来给我地址」→ 它启动服务、给出 http://localhost:xxxx | 最常用——地址在您浏览器里打开,随便点 |
| 看它给的截图 | 交付消息里的截图点开看大图 | 快速验收,不用动手 |
| 内嵌预览 | HTML 文件在编辑器里打开即有预览 | 单页面文件(原型、演示页) |
✅ 看到什么算成功
它给的本地地址,您浏览器里打得开、点得动、数据对——这就是实测通过。打不开直接把现象告诉它(这本身就是高质量的 Bug 报告)。
实测发现问题时
页面不对、点不动、数据错——把现象原样丢回去:
text
我打开了你给的地址,购物车页面商品图片全裂了,
控制台报一堆 404。它复现 → 修复 → 重新实测 → 新截图——闭环到您认可为止。您不用会调试,会描述现象就行(写法见怎么向 AI 提需求 的 Bug 模板)。
多场景验证:一次看全
发布前或重大改版,让它做场景矩阵验证:
text
上线前把主要流程都实测一遍:
访客 → 浏览商品 → 加购物车 → 结算;
已登录用户 → 下单 → 查订单 → 退款。
每个流程截图,出一张结论表。它逐场景操作、逐张截图、汇总一张「场景 × 结果」结论表——比您手动点一遍快,且过程证据齐全。
手机页面怎么看
移动端页面的实测同理——它按手机视口(390×844 之类)打开页面截图;真机效果见移动项目从创建到真机,那里讲了怎么装到手机上试。
实测的边界(说实话)
- 实测跑在无头浏览器里(Chrome 内核)——与您日常浏览器几乎一致,但个别「只在你机器上」的问题(插件、字体、老版本)要以您本机为准
- 需要真实后端数据 / 第三方支付的流程,实测用演示数据——上真环境前您还得走一遍真实链路
- 实测不替代单元测试——逻辑正确性靠测试,看得见的体验靠实测,两层各管各的
常见卡点
| 现象 | 怎么办 |
|---|---|
| 它说「实测通过」但您打开不对 | 您的环境与它的一致性有差——把您看到的现象(截图更好)发回去 |
| 本地地址别人打不开 | 那是您机器上的本地服务——给同事看需要部署或「让 AI 起个局域网可访问的模式」 |
| 想要特定浏览器验证 | 主要是 Chrome 内核;特殊兼容(如国产浏览器)以真实环境为准,让它针对性说明 |
| 截图太小看不清 | 点开看大图;或说「这张截大图给我」重新截 |
延伸阅读
- 让 AI 改代码:实测嵌在改码循环里
- 跑测试与看报告:逻辑层的验证怎么看
- 提交与推送代码:实测通过后的入库动作
- 移动项目从创建到真机:真机验证的完整走法
