Skip to content

SOP:Chrome DevTools 验证闭环

当 UI 改动必须经过真实交互、截图、DOM 状态和 console 输出来判断,而不是只靠读代码时,就用这份 SOP。

目标

把 UI 验证变成 agent 可以反复执行的交互闭环,直到这条用户旅程变干净。

核心闭环

  1. 选定目标页面或 app 实例。
  2. 清掉旧的 console 噪声。
  3. 记录 BEFORE 状态。
  4. 触发 UI 路径。
  5. 观察交互过程中的 runtime events。
  6. 记录 AFTER 状态。
  7. 修复问题,必要时重启 app。
  8. 反复重跑验证,直到这条旅程 clean。

必需输入

  • 稳定的启动命令
  • 可重复的 UI journey
  • 能抓 DOM、console 或截图的方式
  • 明确“什么算 clean”的规则

执行 SOP

  1. 把目标旅程写进 active plan。
  2. 用可观察行为定义成功:文本出现、按钮可点、错误消失、console 干净、请求成功。
  3. 交互前先拍初始状态。
  4. 一次只触发一条路径。
  5. 记录 runtime event、DOM 变化和可见输出。
  6. 如果失败,只修最小负责层,然后重启。
  7. 重跑同一路径,对比 BEFORE/AFTER 证据。

Clean 标准

  • 目标可见状态已经出现
  • 没有意外错误
  • console 噪声已理解或清理
  • 重跑同一路径结果一致

需要同步更新的仓库工件

  • 当前 active execution plan
  • 如果它变成黄金旅程,更新 docs/RELIABILITY.md
  • 如果可见行为改变了,更新 product spec