manual-frontend-debugging

name	manual-frontend-debugging
description	当浏览器界面问题更适合由用户手动复现，而不是由代理全程自动化时使用；此时代理应临时注入短日志，等待用户复现，再通过事件链和状态同步日志定位问题，而不是去做设计、实现或常规浏览操作。
homepage	https://github.com/GuoLuPM/skills

互动式前端调试

概览

这是一份只用于前端调试的技能。代理不再反复自动化点页面，而是改成由用户亲自复现，代理临时挂短日志，再根据采集到的事件链定位问题。

什么时候用

• 用户可以稳定或半稳定地复现问题。
• 复现依赖时机、悬停、焦点、局部刷新或状态同步。
• 浏览器自动化难以稳定复现，或者写自动化比让用户手动操作更慢。
• 你真正想知道的是“实际走了哪条分支”，而不是“页面长什么样”。

不适用

• 已经有稳定的自动化复现方式。
• 问题只在后端、终端，或根本不是浏览器界面问题。
• 任务只是常规浏览、截图、填表单。
• 任务是界面设计、视觉评审、页面实现或样式调整。

工作流程

1. 先定 1 到 3 个观察点，再讨论修复。
2. 只加临时运行时探针，不把调试日志永久写进仓库。
3. 把日志限制在一次点击链或一次手势链内。
4. 让用户按原路径复现一次，然后等待。
5. 按顺序读日志：入口 -> 分支 -> 状态写入 -> 刷新、关闭或退出。

打桩规则

• 优先用开发者工具、浏览器控制工具或脚本执行做运行时注入。
• 每条日志尽量保持单行、低噪音。
• 对高频的悬停或移动事件，只记计数或首尾样本。
• 只盯真正可能解释问题的几个函数边界。

推荐字段：

seq, fn, branch, point, boxIndex, candidateCount, selectedBoxIndex, hoverBoxIndex

协作话术

可以直接这样对用户说：

• “我已经挂好短日志了，你按原路径操作一次，完了告诉我。”
• “我现在只看这 3 个函数，你按刚才方式操作 2 到 3 次，然后给我信号。”
• “日志已经限到一次点击链，你现在可以开始了。”

读日志顺序

1. 这次操作有没有进入目标处理函数。
2. 关键参数是不是预期值。
3. 是哪个判断、兜底或分支把执行链带偏了。
4. 是哪次写入把状态写错了。
5. 后面是谁触发了错误的刷新、关闭或退出。

约束

• 不要把调试日志提交进仓库。
• 不要加大范围、无关的探针。
• 用户还没复现之前，不要先去重构实现。
• 这份技能只定义协作方式，不保证代理一定能接管当前浏览器会话。
• 定位完成后要移除或关闭临时探针。