在网站开发中禁用 Chrome 缓存

技术背景

在网站开发过程中，浏览器缓存可能会导致开发者无法及时看到代码更改后的效果，影响开发效率。因此，需要禁用 Chrome 浏览器的缓存来确保每次刷新页面时都能获取最新的资源。

实现步骤

使用 Chrome DevTools 禁用缓存

1. 打开 DevTools：
   • 右键点击页面，选择 Inspect Element。
   • 使用快捷键：
     • F12
     • Control + Shift + i（Windows/Linux）
     • Command + Shift + i（Mac）
2. 点击工具栏中的 Network 打开网络面板。
3. 勾选顶部的 Disable cache 复选框。

使用刷新菜单选项

在 DevTools 打开的情况下，长按刷新按钮，会显示一个菜单，选择 Hard Reload 或 Empty Cache and Hard Reload。也可以使用快捷键：

• Command + Shift + R（Mac）
• Control + Shift + R（Windows/Linux）

使用 Chrome 扩展程序

• Classic Cache Killer：安装该扩展后，每次页面加载时都会清除缓存。
• Clear Cache：安装后可设置自动清除缓存并自动重新加载活动标签页，还能设置键盘快捷键。

修改注册表或快捷方式属性

修改注册表

1. 打开注册表（开始 -> 命令 -> Regedit）。
2. 搜索 HKEY_CLASSES_ROOT\ChromeHTML\shell\open\command。
3. 将 ...chrom.exe" 后面的部分修改为：–disable-application-cache –media-cache-size=1 –disk-cache-size=1 — "%1"。

修改快捷方式属性

1. 右键点击 Chrome 图标，选择 “Properties”。
2. 在路径后面添加：–disk-cache-size=1。

使用隐身模式

按下 Ctrl + Shift + N 进入隐身模式，该模式下缓存默认被禁用。

核心代码

书签脚本

创建一个新的书签，将以下代码粘贴到 URL 中，点击书签可使页面重新加载并添加时间戳以绕过缓存。

javascript:(function(){var idx = location.href.indexOf('?');var d = new Date();var str = location.href.substr(0,idx) + '?version=' + d.getTime();location.href=str; void 0;})();

PHP 代码

在 PHP 页面开头添加以下代码，为资源请求 URL 添加随机参数以防止缓存。

//dev versioning - stop caching
$rand = rand(1, 99999999);

在加载资源时，将随机值追加到请求 URL 后面：

echo $rand;

清除 PWA 缓存

// 列出缓存键名
self.caches.keys().then(keys => { keys.forEach(key => console.log(key)) })
// 删除指定缓存键
self.caches.delete('my-site-cache')
// 注销注册的 Service Worker
navigator.serviceWorker.getRegistrations()
  .then(registrations => {
    registrations.forEach(registration => {
      registration.unregister()
    }) 
  })

最佳实践

• 如果只需要临时禁用缓存，使用 DevTools 的 Disable cache 选项是最简单的方法。
• 如果需要长期禁用特定网站的缓存，可以使用如 Cache Disabler 这样的扩展程序。
• 对于特定资源（如 JS、CSS 文件）的缓存禁用，可以使用 Requestly 扩展添加随机查询参数。

常见问题

• 禁用缓存后仍有部分资源未更新：可能是因为代码中显式设置了缓存属性，如 jQuery 的 AJAX 请求中 cache 属性设置为 true，需要将其改为 false。
• 修改注册表或快捷方式属性后 Chrome 无法正常启动：检查修改的内容是否正确，确保路径和参数的格式无误。
• 使用扩展程序时出现问题：尝试重新安装扩展程序，或者查看扩展程序的官方文档和社区论坛获取帮助。