AI 编程中的浏览器缓存陷阱：一次真实的踩坑经历

问题背景

在使用 AI 辅助开发一个 RAG 知识库问答系统时，我遇到了一个让人困惑的问题：

搜索 “机器人料架取放料异常” 时，明明已经精确匹配到了正确的知识条目（该条目没有图片），但页面上却显示了不相关的图片。

排查过程

第一步：确认数据层面没问题

首先检查知识库数据，确认 “机器人料架取放料异常” 这条记录确实没有 images 字段：

{
  "id": 18,
  "alarm_code": "",
  "alarm_message": "机器人料架取放料异常",
  "solution": "1. 当机器在料架取料时...",
  "category": "故障处理",
  "severity": "中"
  // 注意：没有 images 字段
}

第二步：定位前端代码问题

检查前端 displayRAGAnswer 函数，发现了问题代码：

// 问题代码：如果第一条没有图片，就从 allResults 获取
if (allImages.length === 0 && allResults && allResults.length > 0) {
    const topResult = allResults[0];
    if (topResult.images && topResult.images.length > 0) {
        topResult.images.forEach(imgPath => {
            allImages.push(imgPath);
        });
    }
}

这个"回退逻辑"是错误的：当第一条结果没有图片时，不应该从其他结果获取图片，否则会显示不相关的内容。

第三步：修复代码

修复方案很简单 - 移除这个错误的回退逻辑：

// 修复后：只从第一条结果获取图片，没有就不显示
if (references && references.length > 0) {
    const topResult = references[0];
    if (topResult.images && Array.isArray(topResult.images) && topResult.images.length > 0) {
        topResult.images.forEach(imgPath => {
            if (imgPath) allImages.push(imgPath);
        });
    }
}
// 不再从 allResults 回退获取图片

第四步：验证修复…问题依旧！

代码修改完成后，刷新页面测试，图片依然显示！

这时候陷入了困惑：

• 代码确实改了 ✅
• 逻辑确实正确了 ✅
• 但行为没有变化 ❌

第五步：怀疑浏览器缓存

关键排查动作：使用 grep 搜索确认代码修改确实保存了：

# 搜索是否还有从 allResults[0] 获取图片的代码
grep "allResults\[0\]" static/script.js
# 结果：No matches found

这证明代码文件确实已经修改，但浏览器还在执行旧代码。

第六步：强制刷新解决问题

执行 Ctrl + Shift + R（强制刷新，跳过缓存），问题解决！

为什么 AI 编程容易踩这个坑？

1. AI 只能看到代码，看不到运行时状态

AI 助手可以：

• 读取和修改代码文件 ✅
• 检查 linter 错误 ✅
• 搜索代码内容 ✅

AI 助手不能：

• 看到浏览器正在执行的是哪个版本的代码 ❌
• 自动帮你清除浏览器缓存 ❌
• 感知前端的运行时状态 ❌

2. 修改立即生效的假象

在传统开发中，我们习惯了 “保存即生效”。但 Web 前端开发有特殊性：

文件类型	修改后是否立即生效
Python/后端代码	需要重启服务器
HTML	通常立即生效
CSS	可能被缓存
JavaScript	经常被浏览器缓存

3. 静态资源缓存策略

浏览器为了性能会积极缓存静态资源（JS、CSS、图片等）。常见场景：

• 强缓存：浏览器直接使用本地缓存，不发请求
• 协商缓存：浏览器发请求确认资源是否更新
• Service Worker 缓存：PWA 应用的离线缓存

如何避免和排查缓存问题

预防措施

1. 开发时禁用缓存

在 Chrome DevTools 中勾选 Disable cache（仅在 DevTools 打开时生效）：

F12 → Network 标签 → 勾选 "Disable cache"

2. 文件名加 hash

构建工具（如 Webpack、Vite）自动给文件名加 hash：

<!-- 每次内容变化，hash 变化，浏览器会请求新文件 -->
<script src="script.a1b2c3d4.js"></script>

3. Flask 开发模式禁用缓存

app = Flask(__name__)
app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 0  # 开发时禁用缓存

排查步骤

当 AI 修改代码后行为没变化时，按以下顺序检查：

1. 确认文件是否保存
   └─ 使用 grep/搜索工具确认修改内容存在

2. 强制刷新浏览器
   └─ Windows: Ctrl + Shift + R
   └─ Mac: Cmd + Shift + R

3. 清除浏览器缓存
   └─ DevTools → Application → Clear storage

4. 重启后端服务器
   └─ 某些框架需要重启才能生效

5. 检查是否有 CDN 或代理缓存
   └─ 生产环境可能有额外的缓存层

这次排查的关键点

回顾这次问题的排查过程，发现是缓存问题的关键动作是：

用搜索工具验证代码文件确实已修改，但浏览器行为没变

# 这一步是关键！证明文件已改，问题在运行时
grep "allResults\[0\]" static/script.js
# No matches found → 文件确实改了
# 但浏览器还显示旧行为 → 一定是缓存问题

这就是 AI 编程的一个典型场景：AI 只能操作代码文件，无法感知浏览器的运行时状态。当 AI 说"我已经修改了代码"，它说的是事实，但这不代表浏览器正在执行新代码。

总结

问题	解决方案
代码改了但行为没变	强制刷新 Ctrl+Shift+R
不确定文件是否保存	用搜索工具验证文件内容
开发时频繁遇到缓存问题	DevTools 勾选 Disable cache
生产环境缓存问题	使用文件名 hash 策略

核心经验：当 AI 修改前端代码后问题没解决，先别怀疑 AI 改错了，先强制刷新试试。

---

本文基于真实开发经历整理，希望能帮助其他使用 AI 辅助编程的开发者避坑。