Skip to content

页面没变化怎么办?

这一课处理第一个本地项目里最常见的挫败:明明改了,页面没变化。

页面没变化通常是小问题,常见原因有:文件没保存、浏览器没刷新、打开了错误文件、AI 改了另一个文件、浏览器缓存影响、控制台有报错。

这一课让学员学会把“没变化”当成排查现场。学员会发现:很多看起来玄学的问题,其实都能用路径、文件、刷新、报错一步步查出来。

  • 让学员知道页面没变化的常见原因。
  • 让学员会检查保存、刷新和文件路径。
  • 让学员会把浏览器地址栏和项目文件结构交给 AI。
  • 让学员会按顺序排查,减少反复乱点。
  • 让学员完成一张页面排错检查表。
  • 建议时长:25 到 35 分钟。
  • 故意制造一次页面没变化。
  • 按检查表一步步排查。
  • 讲课时保持轻松,这一课很适合安抚新手。
  • 一定要展示浏览器地址栏路径。

可以这样开场:

“你会很快遇到一个现象:AI 明明改了文件,你也刷新了页面,可画面一点没动。先别急,这几乎是所有人都会遇到的本地网页小卡点。”

按顺序排查。

第一步:文件保存了吗?

“有些编辑器文件没保存,浏览器看到的还是旧内容。先看文件旁边有没有未保存提示,再手动保存一次。”

第二步:浏览器刷新了吗?

“改了文件以后,浏览器需要重新读取。先普通刷新,再尝试强制刷新。”

第三步:打开的是正确文件吗?

“看浏览器地址栏。它显示的路径,应该指向你项目里的 index.html。如果浏览器打开的是桌面上的另一个 index.html,你怎么刷新都不会看到新变化。”

第四步:AI 改的是正确文件吗?

“让 AI 说明它刚才改了哪些文件。对照文件区检查。如果 AI 改的是 style.css,但网页引用的是另一个 CSS 文件,样式也不会变化。”

第五步:文件引用路径对吗?

“HTML 里会引用 CSS 和 JS。文件名写错、路径写错,页面主体可能能打开,样式或互动却不生效。”

第六步:控制台有没有报错?

“如果 JavaScript 出错,页面可能停在旧状态。打开浏览器开发者工具,看控制台有没有红字。新手不用马上读懂红字,先复制给 AI。”

给 AI 的表达:

页面修改后没有变化。
浏览器当前打开的路径是:
AI 刚才修改的文件是:
项目文件结构是:
我已经刷新过:
请按保存、路径、文件引用、缓存、控制台报错的顺序帮我排查。

如果能复制控制台报错,再补:

这是浏览器控制台的红字:
请告诉我它和页面没变化有没有关系。

最后收束:

“页面没变化是在训练你找真实现场。找到真实现场,AI 才能继续帮你。你不是在和电脑赌气,你是在做侦探。”

  1. 准备两个相似的 index.html。
  2. 故意修改其中一个,浏览器打开另一个。
  3. 刷新后展示页面没变化。
  4. 检查文件是否保存。
  5. 检查浏览器地址栏路径。
  6. 让 AI 对比“打开路径”和“修改文件”。
  7. 打开正确文件,刷新看到变化。
  8. 再制造一次 CSS 文件名不一致的问题。
  9. 让 AI 检查 HTML 引用路径。
  10. 把排查过程写进日志。
  • 文件已保存。
  • 浏览器已刷新。
  • 浏览器路径指向正确文件。
  • AI 修改的是正确文件。
  • CSS / JS 引用路径正确。
  • 控制台没有关键报错。
  • 已把浏览器路径和文件结构交给 AI。

给学员一段“页面没变化”的示例,让他们按检查表判断最可能原因。

然后让他们在自己的项目里检查一次:

  • 浏览器路径。
  • 项目文件路径。
  • CSS 文件名。
  • AI 刚才修改的文件。

练习完成后,让学员用一句话描述真实原因。

  • 学员只反复刷新:先看路径。
  • 学员不知道地址栏代表什么:解释它显示当前打开的文件。
  • AI 不知道浏览器打开哪个文件:把地址栏路径复制给 AI。
  • 学员害怕控制台:只看有没有红字,先不读细节。
  • 学员把缓存当玄学:先按检查表排查,缓存放在后面。

完成一次页面排错记录:

  • 出现的问题。
  • 浏览器路径。
  • AI 修改的文件。
  • 最终原因。
  • 解决动作。
  • 下次优先检查什么。

补充要求:

  • 把记录放进 logs 文件夹。
  • 让 AI 帮你把排查过程整理成 5 行日志。
  • 第 1 页:标题“页面没变化,先找真实现场”
  • 第 2 页:保存了吗
  • 第 3 页:刷新了吗
  • 第 4 页:打开对文件了吗
  • 第 5 页:AI 改对文件了吗
  • 第 6 页:引用路径对吗
  • 第 7 页:控制台有没有报错
  • 第 8 页:排错检查表