用 AI 编程工具做网页

从单文件走向小项目：让 AI 规划结构、看懂报错、每一轮都自己测。

区域 用 AI 做东西难度入门用时 约 60 分钟（读 20 + 做 40）工具 任意聊天 AI更新 2026.10.19

01 · Pain你可能卡在这里

网页内容一多，一个文件改得乱七八糟。

AI 说「已经改好了」，打开一看还是老样子。

页面一片空白，不知道问题出在哪。

东西一做大，问题就从「做不出来」变成「改不动、改坏了」。我们实测：让 AI 规划成三个文件后，加一道菜真的只改一处；但 4 轮修改里，它两次说改好了却没改好。故意制造一个拼写错误，只贴报错它给通用建议，贴上代码它诊断错了，指出可疑那一行才一句话修好。

这一站练的是：先定结构，每轮自己测，出错时把红字和代码一起交给它，并指出你怀疑的地方。

一个由 3 个文件组成的小网站（菜谱、书单、家庭相册目录任选）：

① 内容放在一份数据里，加一条只改一处　② 至少经历一次「控制台报错 → 交给 AI → 修好」　③ 记下 AI 哪一次说改了其实没改

结构规划得好，加菜只改一处；但 4 轮修改里两次「说改了没改」，一次越修越糟。

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

中文讲解怎么打开开发者工具、控制台和元素面板各是干什么的。看报错前先读这一篇。

常见报错逐条解释，包括本站遇到的 TypeError、ReferenceError。可以和 AI 的解释对照着看。

Chrome 官方的控制台使用说明：怎么看报错、怎么筛选、怎么定位到代码行。

以上链接核实于 2026-10-19，均可正常打开；GUSTS.AI 与这些网站无关联。更多见 AI 学习与交流 · 16 站。

Q1　网页一片空白，第一步该看哪里？

按 F12 打开开发者工具，看 Console（控制台）里的红色报错，整行复制下来。

Q2　只把报错发给 AI，为什么常常得不到有用的答案？

它看不到你的代码，只能给通用排查清单。要同时贴上相关代码，并说明你改过什么。

Q3　AI 说「已经改好了」，你该怎么做？

自己打开测试，包括刚才本来正常的功能。本站实测里它两次声称改好了却没改好。

下一站「06 · 发布与跟进新动态」：发布前先查隐私，发布后用每周 30 分钟跟上真正重要的变化。