代码出问题是编程的一部分，不是你的失败。专业程序员每天花大量时间在调试上。对你来说，好消息是：你可以让 AI 帮你调试。

调试三步法

第一步：别慌，把事情说清楚

当你看到页面不对——点了按钮没反应、文字重叠、颜色奇怪——先别急着乱改。停下来，用一句话描述你看到的和你期望的。

"我点了添加按钮，但什么都没有发生。期望是添加的待办事项出现在列表里。"

"页面在手机上打开时，按钮小得点不到。期望是按钮在手机上也容易点。"

如果你看到了红色的报错信息（在浏览器里按 F12 打开开发者工具能看到），把红色文字也复制下来。

第二步：把问题描述（+报错信息+代码）扔给 AI

我有一个问题：

（描述你看到的异常）

下面是浏览器控制台的报错信息：
（粘贴红色报错文字）

下面是当前代码：
（粘贴完整代码）

请帮我诊断问题并修复。

第三步：试试 AI 的修复，不行再发回去

AI 会给出修复后的代码。替换保存，刷新浏览器。如果修好了，收工。如果没修好或有新问题，把新状态再次描述给 AI。

常见问题速查

以下是你作为新手最容易遇到的几个问题，以及给 AI 的标准话术：

添加按钮点不动

问题：点了添加按钮没有反应。浏览器控制台报错：Uncaught TypeError: ... is not a function。下面是代码：（粘贴代码）。请修复。

页面打开是空白

问题：.html 文件双击打开后页面完全空白，什么都看不到。下面是代码。请帮我检查是不是 HTML 结构不完整。

样式全乱了

问题：页面打开了但样式是乱的——所有东西靠左，没有颜色，字体很大。下面是代码。请帮我检查 CSS 部分是否有问题。

中文显示为乱码

问题：页面上的中文显示为乱码（方块或问号）。请修复字符编码问题。

数据刷新后丢失

问题：添加的待办事项在刷新页面后消失了。确认代码里有 localStorage 但似乎没生效。下面是代码，请修复。

浏览器开发者工具——你的第二双眼睛

作为一个不写代码的人，你不需要精通浏览器开发者工具。但你只需要会做一件事：看报错。

打开方式：

• Windows：在网页上按 F12
• Mac：按 Cmd + Option + I

打开后会弹出一个面板，点上面的 Console（控制台） 标签。如果页面有问题，这里大概率会有红色的报错文字。

把红色文字复制给 AI，它能直接定位问题。

你不需要理解报错文字的意思——那是 AI 的工作。你只管复制粘贴。

不要让 AI 猜——给它足够的信息

新手最常见的错误：描述太模糊。

模糊 = AI 瞎猜 = 浪费时间。清晰 = AI 精准修复 = 一分钟解决。

当 AI 的修复引入新问题

这种事经常发生：你让 AI 修 A，它修好了 A 但搞坏了 B。

处理方式：

1. 找到最后一次"一切正常"的代码版本（这就是为什么第 8 章让你用版本编号保存）
2. 把那个版本发给 AI
3. 说："下面这版代码 A 功能正常但 B 有问题。请只修复 B，不要改动其他任何东西。"

关键词："不要改动其他任何东西"。这句话很有用。

本章小结