停止Chrome缓存我的JS文件

136

我将对我的JS文件进行更改，但是在浏览器中并不会真正更改，我每次都必须重命名文件，以便重新加载文件。是否可以添加某种.htaccess命令或使其停止缓存的某些内容？

它甚至在缓存我的html页面的硬核。我需要重新打开整个浏览器以查看更改。可能是服务器问题吗？

javascript  caching  google-chrome 
— 你好_麦吉
source
在您的网络服务器中启用ETag标头是否会导致Chrome缓存但更改后可以正确检索文件的新副本？
— Developer Webs

Answers:

200

您可以点击设置图标的右上角...| 更多工具| 开发人员工具 | 网络 | 禁用缓存（打开DevTools时）

对于Windows，这是在Mac上F12或CTRL + SHIFT + I同时CMD + SHIFT + I打开DevTools的时间。

Chrome Update 2018年9月的新路径：

点击设置图标右上角...| 设置 | 首选项 | 开发人员工具 | 网络 | 禁用缓存（打开DevTools时）

— 马丁·汉
source
4
chrome导致无法缓存的主要失败原因...即使页面被标记为“没有缓存...”。哦，至少这可行，用户可能会受苦，但至少我可以开发
— Robert Noack 2014年
4
请注意，“设置”不再位于右下角！单击三个点菜单右上方去设置。
— yizzlez '16
4
位置是：右上角| “ ...” | 设置| 首选项| 网络| “禁用缓存”（打开DevTools时）。
— atom88
1
这是非常糟糕的做法！！！不，您不应该使用临时的hack ....您应该为所有用户提供永久解决方案。最好的方法是在src末尾使用随机查询字符串。src =“ someJs.js？someRandomStringCreatedByInlineJsOrServerRenderedCode”使其每次都具有新版本。一个好的随机字符串是获取今天的日期/时间并将其扔在那里。您可能必须将其转换为字符串，因为它可能是日期对象。这是选择的答案，并且如此强烈地支持，真的很不好。
1
从Chrome 61.0.3163.100开始，该选项现在似乎位于“更多工具/网络条件”下。“开发人员工具”选项不再存在。
— Ilia Koulikov '17
61

一种更快的方法是右键单击地址栏旁边的刷新图标，然后选择“ 清空缓存和硬重装”

只要确保Chrome的开发工具已打开即可。（按F12键）...顺便说一下，此技巧仅适用于Windows，Ubuntu和Mac OS的Chrome浏览器

— 妮可河
source
2
仅供参考，我尝试了所有这些方法，但绝对没有任何效果。在我的机器上（Mountain Lion的默认设置），F12显示仪表板。
— Aubrey Goodman 2013年
2
比接受的答案好多了？您可以正常地重新加载接受的答案。
— SSH
不，你不能。至少我做不到。没有一个答案对我有用，仍然弹出一个警报，该警报已在我的本地js文件中删除，但仍在chrome中的缓存js文件中。
— BurakKarakuş15年
1
为我工作。确保dev-tools已打开，否则右键单击将不会显示菜单。
— Venryx
我看到了该选项，但就我而言，脚本没有刷新。
— Ilia Koulikov '17
12

添加类似于script.js?a=[random Number]PHP生成的随机数的东西。

您是否尝试过expire = 0，pragma“ no-cache”和“ cache-control = NO-CACHE”？（我不知道他们对脚本的看法）。

— EGO唱片
source
2
我偶然发现了这个问题，正在浏览答案。这是一个糟糕的主意，因为：1）在每次请求时生成随机数将导致浏览器在每次访问时重新下载文件。您需要一个构建时间值，以便浏览器仅在您对该站点进行更改时才重新生成该值。由于PHP是在运行时解释的，因此您可能需要在部署时执行。和2）生成随机数表示有时（随着时间的推移，概率会增加），浏览器会随机生成一些旧的缓存副本。如果必须在请求时间执行操作，请使用时间戳记！
— JakeRobb
我正在执行此操作，并使用了内部版本号，并在标头缓存值上设置了适当的超时（1天）
— Worthy7 '18
11

一些想法：

  1. 当您在Chrome中刷新页面时，请执行CTRL + F5进行完全刷新。
  2. 即使将过期设置为0，它仍将在会话期间进行缓存。您必须关闭然后重新打开浏览器。
  3. 确保将文件保存在服务器上时，时间戳记正在更新。Chrome首先会发出HEAD命令，而不是完整的GET，以查看是否需要再次下载完整的文件，然后服务器使用时间戳进行查看。

如果要禁用服务器上的缓存，可以执行以下操作：

Header set Expires "Thu, 19 Nov 1981 08:52:00 GM"
Header set Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0"
Header set Pragma "no-cache"

在.htaccess中

— 迈克·克里斯滕森
source
有了这个但是pre-check = 0，post-check = 0是对我来说有所不同的加法。
— TadLewis
7

快速步骤：

1）转到Chrome菜单->工具->开发人员工具，打开开发人员工具仪表板

2）点击右侧的设置图标（这是一个齿轮！）

3）选中“禁用缓存（打开DevTools时）”框

4）现在，当仪表板启动时，只需刷新一下，JS就不会被缓存！

— 栈G
source
1
但是，使用WebStorm进行调试无济于事。然后DevTools打开WebStrom无法附加调试器。
— 2014年
5

问题在于，Chrome需要must-revalidate在Cache-Control`标头中才能重新检查文件，以查看是否需要重新获取文件。

您始终可以按住SHIFT-F5键并强制Chrome刷新，但是如果要在服务器上解决此问题，请包含以下响应标头：

Cache-Control: must-revalidate

这会告诉Chrome浏览器检查服务器，并查看是否有更新的文件。如果有较新的文件，它将在响应中接收它。如果不是，它将收到304响应，并确保高速缓存中的响应是最新的。

如果您未设置此标头，则在没有任何其他设置会使文件无效的情况下，Chrome将永远不会与服务器核对是否有较新版本。

这是一篇博客文章，进一步讨论了这个问题。

— 敏捷Pro
source
1
我认为应该Cache-Control: must-revalidate代替Cache-Control: must-validate。我认为后者无效。
— 拉索洛蒙达
3

在对Web应用程序进行更新时，我将使用处理程序返回单个JS文件以避免对服务器造成重大影响，或者向其中添加一个小的查询字符串：

<script type="text/javascript" src="/mine/myscript?20111205"></script>
— 瑞安·特尼尔（Ryan Ternier）
source
2
：虽然这看起来像一个巧妙的做法，则可能会在他们找到一个查询字符串得到一些代理将不再缓存问题developers.google.com/speed/docs/best-practices/...
— 弗朗索瓦·布尔乔亚
2
那么，您应该怎么做呢？
— BlueSky'4
1 
<Files *>
Header set Cache-Control: "no-cache, private, pre-check=0, post-check=0, max-age=0"
Header set Expires: 0
Header set Pragma: no-cache
</Files>
— 阿尔法布拉沃
source
1

我知道这是一个“老”问题。但是缓存的麻烦从来没有。经过大量的试验和错误之后，我发现我们的网络托管提供商之一通过CPanel将此应用程序称为Cachewall。我只是单击“启用开发”模式，然后... 它立即停止了长期遭受的痛苦:)希望这对其他人有帮助... R

— 拉蒙·阿劳霍（Ramon Araujo）
source
0

当我浏览网站时（在具有真实域的托管公司服务器上），我得到了相同的css文件，但无法在chrome上获得更新的版本。在Firefox上浏览时，我能够获取文件的更新版本。这些答案都不适合我。我的机器上也有网站文件，并使用本地apache服务器使用localhost浏览站点。我关闭了我的apache服务器，并且能够获取更新的文件。我的本地apache服务器以某种方式弄乱了chrome缓存。希望这对某人有帮助，因为我很难解决此问题。

— 阿尔卑斯山汉克卢
source
0

  1. 打开开发人员工具

    • 要么F12
    • 或...-> More Tools->Developer Tools

  2. 请点击 Empty Cache and Hard Reload

    • 右键单击刷新图标（位于网址栏的左侧）
    • 或单击刷新图标并按住1秒钟
— 鑫
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.