为什么谷歌浏览器不重新加载我的脚本?

7
所以,我有一个名为“engine”的脚本,在经过许多头痛和(徒劳的)调试之后,我发现GC根本没有重新加载它!
这是我在网页中包含它的方式(在<head>元素内部):
<script type="text/javascript" src="engine.js"></script>

当我在脚本的开头放置10个console.log("asdf");时,就好像它们不存在一样。当我去GC控制台的“资源”选项卡中查看时,我发现对该脚本没有任何更改被应用!请帮忙?在结尾处增加+ "?" + new Date()是否有用?

5
应该从缓存加载,解决方法是按下 Ctrl + F5。 - Okan Kocyigit
1
我觉得这看起来像是一个缓存问题。 - raz3r
是的,另一个问题是我的页面无法重新加载。我不知道为什么,它突然停止了重新加载。我按下“F5”键,网站图标变成了一个小圆圈,但是什么也没有发生。没有错误提示,而且重新加载需要一些时间。 - corazza
2
你已经尝试过其他浏览器以确保它是GC特定的问题,而不是拼写错误(或其他什么)了吗? - Luke
咳咳!在Firefox中重新加载可以工作了!但问题仍然存在:为什么我不能在GC中重新加载它呢? - corazza
哦,Firefox里似乎一切正常,我可能会坚持使用它... - corazza
5个回答

28

在Chrome,Firefox和IE中通用的解决方案是通过Ctrl+Shift+Del清除缓存(在Mac上是+Shift+)。

Chrome解决方案#1

  1. 打开开发者工具(F12++i,或右键单击→检查)。
  2. 选择网络选项卡并选中禁用缓存复选框。

Chrome disable cache - Network tab

  1. 重新加载页面。

❗️注意:只有在开发工具窗口打开时,缓存才会被禁用。

Chrome解决方案#2

只有在未使用#1时才有意义。

  1. 打开开发者工具。
  2. 单击右下角的设置齿轮图标。
  3. 在弹出的对话框中,在网络子菜单下选中禁用缓存复选框:从现在开始,当开发工具窗口打开时将跳过缓存。当关闭开发工具窗口时,缓存将正常工作。

Chrome disable cache in devtools settings

Chrome解决方案#3:清空缓存+强制刷新

  1. 打开开发者工具(否则下一步菜单将不显示)。
  2. 点击并按住刷新按钮,然后从下拉菜单中选择清空缓存并强制刷新

Chrome Hard Refresh and Cache Reset

修改javascript代码

一种跨浏览器的解决方案是在你的服务器端代码中附加一个随机生成的版本字符串作为查询参数,即调用你的脚本:

<script type="text/javascript" src="myscript.js?ver=12345"></script>

这个技巧将强制浏览器在ver参数值变化时重新加载脚本。如果你使用ajax请求,则可以在URL后面追加"?ver=" + new Date().getTime()

注意:完成调试后不要忘记删除参数,因为在生产环境中你很可能想要脚本被缓存。然而,在每次新构建时生成一个新的时间戳是一种常见的做法——这可以在生产中使用,并且将确保在新部署后客户端始终获取更新的脚本。


与上述所有解决方案不同的是,即使在客户端和服务器之间有某种缓存(例如redis、memcached、varnish)或CDN(例如akamai、cloudflare、cloudfront等),这种解决方案也能够工作。


读者们:请将最喜欢的 Chrome 解决方案选为被接受的答案。 - Leandro Bardelli
这太疯狂了!为什么“在生产环境中,你最有可能希望脚本被缓存”?它们就像任何其他资源一样。不询问服务器缓存副本是否是最新的,似乎就像一个大漏洞! - Daniel
@Daniel:你可以通过设置“Cache-Control”、“If-None-Match”和“If-Modified-Since”来对缓存资源的过期时间进行细粒度控制,这样对于仍然有效的缓存资源的请求将返回304未修改(https://httpstatuses.com/304)。 - ccpizza

1

我也遇到了这个问题;CTRL+F5或SHIFT+F5从未奏效...唯一有效的方法是打开你的开发者工具(按F12),然后右键单击地址栏旁边的刷新图标,选择"硬刷新"或"清空缓存并强制刷新"


1

可能脚本已被缓存,因此从缓存中加载旧版本。如果您想确保获取新版本,可以强制浏览器重新加载,清除浏览器缓存,或更改脚本名称,或在文件名末尾添加不同的查询参数。


6
你可以前往Chrome DevTools并点击设置 - 然后你就可以选择“禁用缓存”,这对开发模式很有帮助。目前只有Chrome Canary版本支持该功能。 - Ido Green
@IdoGreen 偶尔在Chrome 18、19和20中,Ctrl+F5并不能真正清除缓存,但这个技巧非常有效!谢谢! - arboc7

0
在最新的Chrome稳定版中,日期为2016年10月21日。
打开开发者工具(F12或右键单击>检查或地址栏右上角的垂直省略号图标>更多工具>开发者工具)。
点击开发者工具导航栏右上角的垂直省略号图标>设置。
在首选项部分找到网络>禁用缓存。

0

正如我在评论中所说,我猜测这是一个缓存问题,按下CTRL+F5应该足够了。如果不行,可以尝试按下CTRL+SHIFT+CANC并清除浏览数据。然而有时候是服务器存在某种缓存问题,我之所以这么说是因为在使用IBM WebSphere时,我经常遇到无法通过简单的F5刷新浏览器来解决的缓存问题。我只能等待我的Web服务器自行“刷新”。


我想我需要开一个新的问题,因为出现了一个更大的问题...正如我在评论中所说的那样,我无法重新加载页面! - corazza

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接