第 07 章 · 实战 Part 3

当事情出错时

你早晚会卡住——页面白屏、改了变更糟、Codex 一直绕圈子。这一章给你一套"卡住时的标准操作流程",让你不慌、不放弃,总能把事情拽回正轨。

本章学完后你会拥有 一套“先描述、再定位、再小修、最后保存”的排障流程。以后看到报错,你不需要慌,只需要把现象交代清楚。

7.1 描述"现象",不要"猜测"

新手遇到 bug 时,最常见的错误是猜原因。

比如你说:“应该是 CSS 坏了。”这就是猜。Codex 可能会顺着你的猜测去修 CSS,结果真正坏的是 HTML 少了一个标签。

更好的说法是描述现象:

报 bug 四件套
我遇到一个问题,请先帮我定位,不要直接大改。 我做了什么:[描述你的操作] 我期待看到:[预期结果] 实际发生:[真实现象] 报错信息:[粘贴终端或浏览器里的红字,没有就写“没有看到报错”]
“做了 / 期待 / 实际 / 报错”是最稳的排障格式。

7.2 看着丑但说不出哪里丑:对比描述法

设计问题经常不是“坏了”,而是“怪”。怪在哪里,你又说不出来。

这时用对比描述法:

我希望它像 A 那样,但它现在更像 B。请先分析差距,不要直接改。

比如:

让 Codex 先分析差距,你确认它理解对了,再让它改。这样比“改好看点”靠谱得多。

7.3 改完更糟了:Git 一键回退

如果你按第 05 章做过 Git 提交,那恭喜你,你有保存点。改坏了不是世界末日。

先别急着让 Codex继续修。先问它现在改了什么:

回退前先盘点
刚才改完效果更糟了。请先列出当前未提交的改动涉及哪些文件、每个文件改了什么。先不要撤回,等我确认。
先盘点,再决定是局部撤回还是全部撤回。

如果确认不要了,再说:

撤回未提交改动
请撤回当前未提交的改动,恢复到上一次 Git 提交的状态。撤回前再次列出会被影响的文件,让我确认。
“上一次 Git 提交”就是上一个保存点。

7.4 Codex 一直绕圈子怎么办

Codex 有时会陷入循环:修 A 坏 B,修 B 又坏 A;或者连续几次都理解错。

这时不要继续催“再试试”。换策略:

  1. 让它停下来总结:现在尝试过什么,为什么失败。
  2. 缩小范围:只修一个文件、一个按钮、一个报错。
  3. 换证据:给截图、终端输出、浏览器控制台信息。
  4. 开新会话:用总结作为新开场。
打断循环
我们好像在同一个问题上绕圈了。请停止继续修改,先总结: 1. 你尝试过哪些方案 2. 每个方案为什么没解决 3. 现在最可能的根因是什么 4. 下一步最小验证动作是什么
让它进入“复盘模式”,不要继续机械修改。

7.5 不知道下一步做什么

有时你不是卡在 bug,而是不知道下一步该优化什么。这个时候,让 Codex 给选项,不要让它直接替你决定。

让 Codex 给选择题
基于当前项目状态,请给我 3 个下一步选项。每个选项请说明: 1. 能带来什么价值 2. 预计复杂度 3. 风险 4. 你推荐哪个 先不要动手。
你缺的往往不是执行力,而是不知道有哪些选项。

7.6 常见踩坑全集(实战篇)

常见踩坑
页面白屏
现象
浏览器打开后什么都没有。
常见原因
HTML 标签没闭合、脚本报错、文件路径写错。
怎么说
“页面白屏。请检查 HTML 结构、浏览器控制台错误和资源路径,先列出原因再修。”
CSS 不生效
现象
你明明让它改了样式,刷新后看起来还是旧的。
常见原因
浏览器缓存、CSS 文件没引用、选择器写错、改错文件。
怎么说
“请确认当前页面实际加载的是哪个 CSS 文件,并检查我刚才改的样式是否命中了元素。”
表单不能提交
现象
点击提交没有反应,或者数据没有发出去。
常见原因
纯静态页面没有后端,按钮只是样子;或者 action / JavaScript 没写。
怎么说
“请判断这个表单现在只是前端样式,还是真的能提交。不要接后端,先告诉我最简单的收集方式。”
移动端横向滚动
现象
手机上页面可以左右滑,某个元素撑出屏幕。
常见原因
固定宽度、长链接、表格、图片或按钮没有响应式约束。
怎么说
“请以 390px 宽度检查哪个元素造成横向滚动,只修那个元素,不要整体重写布局。”
动手试试
做一次“无害排障演练”

找一个你已经能打开的网站项目,让 Codex 只读检查潜在问题,不要让它修改。

排障演练提示词
请只读检查当前项目,找出 5 个最可能影响上线质量的问题。按“现象 / 风险 / 建议修复方式”列出。不要改文件。
先练“发现问题”,再练“修问题”。
完成标志:你拿到一份问题清单,并能选出最想先修的一项。
你已经会了 用现象代替猜测,用对比描述设计问题,用 Git 保存点回退,并在 Codex 绕圈时及时切换到复盘模式。