第 7 课 出错了怎么办：新手排错急救包

本课定位

启蒙营不怕出错，就怕一出错就慌。学生要学会先看现象、再猜原因、再让 Codex 帮忙修。

学习目标

• 能把错误现象说清楚
• 知道先检查哪 3 件事
• 修好后会再验证一次

本课会用到的技术与方法

• 报错描述
• 分步排查
• 验证修复

课前准备

• 准备一个之前做过的页面
• 找出里面最可能出错的地方

60 分钟课堂流程

环节	讲授安排
0-10 分钟	用 按钮不亮、文字不见、页面错位的三种常见问题 做导入，先让学员看见这节课要做出来的效果。
10-20 分钟	讲清本课的关键词、规则和做法，先把任务说清楚。
20-35 分钟	讲师示范一轮，用 Codex 做出第一版，再解释为什么这样安排页面。
35-50 分钟	学员跟做并替换成自己的内容，讲师巡回答疑。
50-60 分钟	现场展示、快速点评、布置课后任务。

核心讲授点

• “按钮没反应”就是现象，“一定是代码坏了”只是猜测。
• 排错时一次只改一个点，最稳。
• 修好以后再点一次、看一次、讲一次，才能算真的修好。

本课完整素材

常见错误示例

问题 1：按钮点击后没有任何变化
问题 2：深色背景里，文字看不见
问题 3：投屏时内容跑到屏幕外面

可直接复制给 Codex 的提示词

提示词 1：先做第一版

我是一名中学生，现在想做 一个能直接在浏览器里运行的网页作品。
主题是：按钮不亮、文字不见、页面错位的三种常见问题

请直接把第一版做出来，页面里一定要有：
- 错误现象说明
- 排查顺序
- 修复后检查项
- 适合新手的修改提示语

这次要用到的内容如下：
常见错误示例：
问题 1：按钮点击后没有任何变化
问题 2：深色背景里，文字看不见
问题 3：投屏时内容跑到屏幕外面

整体感觉希望是：清爽、字大、适合课堂展示。
请把文件拆清楚，方便我继续改。

提示词 2：把互动做完整

我是一名中学生，我已经有了第一版页面，现在想把互动和课堂节奏补完整。
请帮我继续完善 按钮不亮、文字不见、页面错位的三种常见问题，重点把下面这些效果补上：
- 错误现象说明
- 排查顺序
- 修复后检查项
- 适合新手的修改提示语

这节内容的素材还是这些：
常见错误示例：
问题 1：按钮点击后没有任何变化
问题 2：深色背景里，文字看不见
问题 3：投屏时内容跑到屏幕外面

我更在意的是：学生一眼能看懂、按钮明显、操作顺序清楚。

提示词 3：上课或展示前再打磨

我是一名中学生，我准备把 按钮不亮、文字不见、页面错位的三种常见问题 用在展示或课堂讲解里。
请帮我再检查一遍这个网页，重点把文字、颜色、按钮大小、页面顺序和提示语调顺一点。

课件里一定不能漏掉这些内容：
- 错误现象说明
- 排查顺序
- 修复后检查项
- 适合新手的修改提示语

参考内容：
常见错误示例：
问题 1：按钮点击后没有任何变化
问题 2：深色背景里，文字看不见
问题 3：投屏时内容跑到屏幕外面

我希望最后拿到的是一版看起来完整、讲起来顺手的成品。

本课产出

• 完成 按钮不亮、文字不见、页面错位的三种常见问题 的课堂成品
• 完成 按钮不亮、文字不见、页面错位的三种常见问题 的第一版并能现场演示

课后任务

• 给自己的作品做一次排错记录
• 写下“我先看了什么、改了什么、最后怎样了”
• 把排错经验讲给同组同学听

讲师提醒

• 先保住本课最小成品，再决定要不要继续加效果。
• 遇到错误时先描述现象，不要急着乱改。
• 提醒学员边做边记录自己改了什么。

下一课衔接

下一节进入 第 8 课 模块展示：我的第一批作品，把这节课的成果继续推进成更完整的作品或流程。