学完这一课，你能：
- 把“不能用”改写成可复现的现象
- 根据错误位置判断先检查哪一层
- 一次只改一个因素并验证修复
技术排错实操 · 12 章保存按钮失效：从现象到根因的四步排错
4 分 17 秒 · 中文字幕现场查看 Network 里的 400 报错，对照 title 与 name，完成一行修复和回归验证。查看章节与完整脚本
1. 先记录现象，不要立刻解释原因
模糊描述
“网站坏了，按钮没用。”
可复现描述
“Windows 电脑的 Chrome 中，打开首页后点击保存，按钮变灰，但列表没有新增内容；刷新后仍没有。控制台出现红色错误。”
现象是你能观察到的事实，原因是尚待验证的解释。把两者分开，才能避免 AI 或自己顺着错误假设越走越远。
2. 用六步闭环定位问题
- 稳定复现写清环境、前置条件、操作步骤、预期结果和实际结果。
- 收集原始证据复制完整错误、状态码、日志时间和相关截图，不只截最后一句。
- 判断问题层级输入、前端、网络、后端还是数据？先找第一个与预期不同的位置。
- 缩小范围用最小数据、最少步骤和最小代码复现，排除不相关部分。
- 一次只改一项改完立刻重复原步骤，否则不知道是哪次修改起作用。
- 验证并防止复发确认原问题消失、其他功能没坏，并记录原因和验证方法。
3. 看到这些现象，先检查哪里
| 现象 | 先看证据 | 常见方向 |
|---|---|---|
| 页面完全打不开 | 地址、网络请求、状态码 | 域名、服务、路径或网络 |
| 样式不对但内容存在 | CSS 请求、缓存、选择器 | 资源加载或样式覆盖 |
| 点击没有反应 | 浏览器控制台、事件日志 | 前端脚本或输入条件 |
| 请求返回 4xx | 请求地址、参数、身份信息 | 请求不符合接口要求 |
| 请求返回 5xx | 服务端日志、异常堆栈 | 后端处理或数据依赖 |
请根据以下证据帮助我定位，不要先给修改代码：
环境：____
操作步骤：____
预期结果：____
实际结果：____
完整错误：____
我已经验证：____
请先提出 3 个最可能的层级，并为每个层级给出一个不会破坏数据的检查方法。
环境：____
操作步骤：____
预期结果：____
实际结果：____
完整错误：____
我已经验证：____
请先提出 3 个最可能的层级，并为每个层级给出一个不会破坏数据的检查方法。
动手练习 · 18 分钟
制造并修复一个可控错误
- 复制上一课项目目录，保留原版本。
- 把
index.html中一个闭合标签故意改错，然后刷新页面。 - 记录现象，打开开发者工具查看页面结构或控制台。
- 只恢复这一处修改，再次刷新验证。
- 写下“原因、证据、修改、验证”四行复盘。