如何临时禁用缓存或以某种方式刷新页面以查看更改？

目前还不清楚你指的是哪种“缓存”。有几种不同的方法可以让浏览器持久地缓存内容。Web存储是其中之一，缓存控制是另一个。

一些浏览器还具有缓存，与服务工作者一起使用，以创建提供离线支持的渐进式Web应用程序（PWA）。

清除PWA的缓存

self.caches.keys().then(keys => { keys.forEach(key => console.log(key)) })

要列出缓存键的名称，请运行：

self.caches.delete('my-site-cache')

按名称删除缓存密钥（即我的站点缓存）。然后刷新页面。

如果刷新后在控制台中看到任何与工作程序相关的错误，则可能还需要注销已注册的工作程序：

navigator.serviceWorker.getRegistrations()
  .then(registrations => {
    registrations.forEach(registration => {
      registration.unregister()
    }) 
  })

当问到这个问题时，Chrome不支持禁用缓存功能。但现在，您可以在Chrome开发工具的网络选项卡中找到“禁用缓存”功能。

禁用缓存的网络选项卡

您可以看到，所有资源（我已经过滤了JS资源）都是从网络中获取的，而不是从磁盘/内存缓存中加载的。

未选择禁用缓存

您可以看到，当我刷新页面但没有选择“禁用缓存”功能时，几乎所有资源都是从缓存加载的。

这对于本地web开发很好，但我想强调一些限制。如果到目前为止讨论的解决方案符合您的用例，您可以停止阅读这里的内容。

局限性

您必须保持DevTools打开并禁用缓存当您禁用缓存时，该选项卡中的所有资源都将禁用缓存。如果您只想禁用1-2个资源的缓存，则会使速度变慢，效率低下

使用Requestly Chrome扩展禁用特定资源（JS/CSS/Images等）的缓存

最近，我偶然发现https://dev.to/requestlyio/disable-caching-of-particular-js-css-file-2k82这帮助我理解了如何禁用特定资源的缓存。

这里的技巧是在每次发出请求时向资源添加一个随机值的查询参数。使用Requestly Query Param Rule，可以添加如下参数

URL Contains mywebsite.com/myresource.js
Add param cb rq_rand(4)

当发出请求时，rq_rand（4）被4位随机数替换。

请求查询参数规则以添加随机参数

添加规则后，不缓存JS/CSS文件

在这里，您可以看到“禁用缓存”没有被选中，并且由于URL中的随机参数（cb-将其作为缓存破坏器读取），资源仍然没有从缓存加载。

好的是，您不需要为实现这种行为而保持开发工具的开放性您可以将其永久打开，您的浏览体验也不会受到影响。

如何获取规则

这是一个链接，如果您已安装Requestly，则可以使用该链接浏览和下载规则-https://app.requestly.io/rules/#sharedList/1600501411585-禁用缓存堆栈流

免责声明：我构建了Requestly，但我认为这可能对很多web开发人员有帮助，因此在这里分享。

为了使用Chromium在VS代码中进行调试，我将--aggresive缓存丢弃的runtimeArgs添加到launch.json文件中。这消除了所有缓存。刷新时立即显示代码更改。

一般来说，“烦人”的缓存的问题在于框架：）。让我们来看看细节。大多数框架都在.htaccess（os equivalent）中使用去主动重定向所有请求到框架“索引”，

但它同时排除应用程序直接请求的文件和目录。

（例如，对于.htaccess，典型指令如下：

    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-l
    RewriteRule ^(.+)$ index.php?url=$1 [QSA,L]

)

因此，作为图形文件的所有.js、.css文件都不由框架“索引”处理。

这些文件通常在开发期间最常更改。

这就是为什么缓存控件取消激活不应该放在框架“索引”中的原因。

它应该放在.htaccess中。

F.e.用于开发过程：

  Header set Cache-Control "no-store, no-cache, must-revalidate"
  Header set Pragma "no-cache"

（或者对于连续的工作版本，请使用“Etag”指令-在HTTP参考中查看更多信息。注意，Etag不是用于开发的。

在.htaccess中，没有直接的方法生成用于ETag的随机数（或快速变化的序列，如日期UTC），因为-正如我之前提到的-这不是提供的）。

希望这有助于节省时间。

Chrome DevTools可以禁用缓存。

右键单击并选择Inspect Element以打开DevTools。或使用以下键盘快捷键之一：

第12页控制+Shift+i命令+Shift+i

单击工具栏中的网络以打开网络窗格。选中顶部的禁用缓存复选框。

请记住，正如@ChromiumDev的一条推文所述，此设置仅在开发工具打开时才处于活动状态。

请注意，这将导致重新加载所有资源。如果您希望仅对某些资源禁用缓存，则可以修改服务器随文件一起发送的HTTP标头。

如果您不想使用禁用缓存复选框，在DevTools打开的情况下长按刷新按钮将显示一个菜单，其中包含硬重新加载或空缓存和硬重新加载选项，这应该具有类似的效果。阅读选项之间的差异，了解要选择哪个选项。以下快捷方式可用：

Mac上的Command+Shift+RWindows或Linux上的Control+Shift+R

嘿，如果您的网站使用的是PHP，那么请在html页面的开头放置以下PHP代码片段：

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

现在，在脚本或链接元素中加载CSS或JS文件等资源的任何地方，都会在附加“？”后将生成的随机值附加到请求URL通过PHP连接到URI：

    echo $rand;

就是这样！无论哪种浏览器，都不会再缓存您的网站。

当然，在发布之前删除代码，或者简单地将$rand设置为空字符串以允许再次缓存。