tgoop.com/cosine_front_end/2969
Create:
Last Update:
Last Update:
#优质博文 #调试 #前端 #React #CSS
少有的讲述「在 vibe coding 中如何调试问题」的文章～当然也适合正常的 bugfix。
How to Fix Any Bug
AI 摘要：本文通过作者在开发一个 web 应用中遇到的「滚动失效」 bug，讲述调试问题的系统过程。核心思想是：编写可复现 (repro) 案例、不断缩小问题、保持 bug 的持续存在以保证分析方向正确，并通过持续简化最终发现真实原因——旧版 React Router 的 ScrollRestoration 组件在重验证过程中不当恢复滚动位置。文章强调调试纪律与“有根递归”(well-founded recursion) 的类比：每一步都要确保前进、缩小问题范围，而不是随意跳转、依赖猜测。
[以下是方便搜索索引的大纲 (AI 生成)，请读原文]
1. 问题起点：不可解释的滚动抖动
• 在应用中添加服务器请求后按钮滚动出现抖动。
• 初步怀疑 React Router 数据重载或 React 重渲染机制，但理论上不应造成影响。
2. Step 0：别急着修——没有 repro 一切无从谈起
• Claude 被要求修 bug，多次尝试“修复”但都无验证性。
• 没有可重现测试 (repro) 等于盲目调试，AI 与人类在此常犯同样错误。
3. Step 1：建立可靠的 repro
• 一个 repro 需要明确定义操作步骤、预期结果、实际表现。
• 若复现概率不高，需移除不确定因素（如模拟网络）。
• AI 无法直观识别“滚动抖动”，需重新定义可量化的 repro。
4. Step 2：缩小 repro
• 替换为测量滚动位置前后差值的量化 repro。
• 验证策略：当注释掉网络调用时行为回归正常，说明新的 repro 合理。
• 确保新的 repro 仍能表现“正向结果”，避免偏离原始问题。
5. Step 3：剥去无关部分
• 通过循环：复现 bug → 删除一部分代码 → 验证仍复现 → 提交变更。
• 若删除后 bug 消失，回滚并缩小删除范围。
• Claude 犯误：过早进入假设与实验，导致丢失“仍复现”前提。
• “调试有根性”类比：如同 well-founded recursion，确保每次简化是真正向终点推进，而非原地打转。
6. Step 4：定位根因
• 继续按步骤简化后，确认问题出现在包含 React Router 的布局结构中。
• 发现旧版 ScrollRestoration 在动作 (action) 触发重验证时被误调用，导致对正在进行的 scrollIntoView 干扰。
• 更新或移除旧逻辑即可修复。
7. 方法论总结
• bug 调试的精髓是“跟踪与约简”：始终保持一个仍可复现的最小案例。
• 当推测与理论全部无效时，逐步删减代码仍是通用、可靠的终极方法。
• 旧版依赖和运行环境不一致也可能制造隐藏问题。
author Dan Abramov
BY cosine - 前端人の日常频道
Share with your friend now:
tgoop.com/cosine_front_end/2969