学习路线 / 05 用 AI 编程工具做网页 / 第 2 篇
Station 05 · Article 2/2

看懂报错：把红字交给 AI 的正确方式

故意拼错一个字母：只贴报错得到通用建议，照它的修复换来新报错，指出可疑那一行才一句话修好。

GUSTS.AI 编辑部2026.10.19约 4 分钟读完难度 入门含 真实运行 记录#网页#报错#追问

网页一片空白时，答案几乎总在浏览器的「控制台」里，一行红字。这篇我们故意在菜谱网站里改错一个字母，看看把报错交给 AI 会怎样。结果：只贴报错，它给了一堆通用建议；贴上代码，它诊断错了，照它的「修复」换来一个新报错；把可疑的那一行指给它，一句话修好。

实测：本地 qwen2.5:3b（3B 小模型，Ollama，temperature 0，seed 42），2026-10-19 运行；输出原样贴出，未修改。　报错为 Chrome 实际产生的原文。

01 · Console红字在哪里看

在网页上按 F12（Mac 是 ⌥ ⌘ I），打开「开发者工具」，切到 Console（控制台）。红色的那行就是报错。不用看懂，整行复制就行。

02 · The bug我们故意制造的一个错

把 app.js 第 43 行的 getElementById('recipes') 改成了 getElementById('recipe')，少一个 s。打开网页：

出错后的页面
页面只剩标题，菜谱全没了
控制台原文Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')

大白话：代码想往一个「不存在的东西」里放内容。为什么不存在？因为它找的名字（recipe）和页面上的名字（recipes）对不上。

03 · Error only只贴报错

「网页打不开了，报错：……，怎么办？」 · AI 原样输出（节选）
这个错误信息表明你正在尝试设置一个 `null` 对象的 `innerHTML` 属性。通常，这可能是由于以下几种情况之一：

1. **DOM元素不存在**：你可能尝试访问一个不存在的元素。
2. **元素被错误地初始化为 `null`**：可能是由于错误的初始化或逻辑错误导致的。
3. **异步加载问题**：如果你的代码在异步加载的元素上尝试设置 `innerHTML`，可能会遇到这个问题。

为了解决这个问题，你可以按照以下步骤进行排查和修复：

### 1. 检查元素是否存在
确保你尝试设置 `innerHTML` 的元素确实存在于 DOM 中。你可以使用 `document.getElementById` 或 `document.querySelector` 确认元素是否存在。

```javascr……（后面还有 3 段通用代码示例）

说的都没错，但全是通用排查清单，没有一句是关于你的代码的。它看不到代码，只能这样答。

04 · With code贴报错 + 代码

提示词（代码部分省略，实际贴了完整 app.js）
我的家庭菜谱网页一片空白，浏览器开发者工具的「控制台」里有一条红色报错：
Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
页面结构里放菜谱的容器是 <div id="recipes"></div>。下面是 app.js 的完整代码：
【这里贴完整 app.js】

请先用大白话（不懂编程的人也能懂）解释这条报错是什么意思，再告诉我具体要改哪一行、改成什么。不要重写整个文件。
它的诊断 · AI 原样输出（节选）
好的，我来解释一下这条报错是什么意思，然后告诉你应该改哪一行和改成什么。

### 报错解释
报错信息 `Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')` 表示在尝试设置一个 `null` 对象的 `innerHTML` 属性时出错了。这通常发生在你试图给一个不存在或尚未创建的元素设置内容时。

### 具体问题所在
在你的代码中，`renderRecipes` 函数中有一个关键步骤是清空旧数据并重新添加新的菜谱数据。你使用了 `recipesContainer.innerHTML = '';` 这行代码来清空旧数据。然而，`recipesContainer` 可能还没有被正确地创建或加载到页面上，因此它可能为 `null`。

### 修改建议
你需要确保在调用 `renderRecipes` 函数之前，`<div id="recipes"></div>` 已经存在于页面上。你可以通过在 `renderRecipes` 函数之前添加一个简单的检查来确保这一点。具体来说，你可以在 `renderRecipes` 函数之前添加以下代……

它说原因是容器「还没被创建或加载」——不对，容器一直都在，是名字拼错了。它没要求重写整个文件，却还是给了「完整代码」。

05 · Worse照着改，换了个新错

我们把它给的完整代码原样替换进去，打开：

新的控制台报错Uncaught ReferenceError: Cannot access 'recipes' before initialization

它在文件最前面加了「先检查再显示」的代码，可这时菜谱数据还没定义，于是报了新错。有意思的是，它的完整代码里其实悄悄把拼错的 recipe 改回了 recipes——它修好了真正的问题，却没意识到，还另外引入了一个错。

06 · Point指给它看：一句话修好

追问
我按你的完整代码替换后，页面还是空白，控制台变成了新的报错：Uncaught ReferenceError: Cannot access 'recipes' before initialization。另外请对比一下：我原来代码第 43 行写的是 getElementById('recipe')，HTML 里的 id 是 recipes。真正的原因是什么？只告诉我要改哪一行、改成什么，一两句话即可。
结果 · AI 原样输出
你原来的代码中 `getElementById('recipe')` 应改为 `getElementById('recipes')`，因为 HTML 中的 `id` 是 `recipes` 而不是 `recipe`。修改这一行即可。

正确，而且只改一行。当你能指出「这里和那里对不上」时，AI 的修复会又短又准。就算你看不懂代码，也可以试着要求它「把报错里提到的东西，和页面上的名字逐一对比」。

07 · Template报错求助模板

报错求助模板
我的网页【现象：空白 / 按钮没反应 / 显示不对】。
控制台报错原文：【整行粘贴】
我刚才改过的地方：【如果有】
相关代码：【粘贴出错的文件】
请先用大白话解释报错，再告诉我改哪一行、改成什么。不要重写整个文件。
（如果它的修复又带来新报错：把新报错贴回去，并说明你照它的代码改过。）

08 · Limits真实边界

· 这个 bug 是我们故意制造的，我们知道答案，所以能判断它对不对。真实情况下你不知道答案，更要每一步都打开网页验证。

· 只测了一种报错（找不到元素）。拼写错误、文件路径错、网络请求失败等其他常见报错本文没有覆盖。

09 · Next下一步

网页能用了，下一站讲怎么把它发到网上——以及发之前必须查的一件事。

这是「05 用 AI 编程工具做网页」的第 2/2 篇。实测原始记录随站点源码保存（src/runs.json）。