为什么Google Chrome不会重新加载我的脚本?

cor*_*zza 7 html javascript google-chrome

所以,我有一个名为"引擎"的脚本,经过多次打嗝和(徒劳)调试后,我发现GC根本就没有重新加载它!

这是我将其包含在网页(<head>元素内)中的方式:

<script type="text/javascript" src="engine.js"></script>
Run Code Online (Sandbox Code Playgroud)

console.log("asdf");在脚本开头放置10时,就好像它们不存在一样.当我进入GC控制台的"资源"选项卡时,我发现没有对该脚本进行任何更改!HLEP?+ "?" + new Date()最后会有帮助吗?

ccp*_*zza 26

适用于Chrome,Firefox和IE的通用解决方案是通过Ctrl+ Shift+ Del(在Mac + Shift+上)清理缓存.

Chrome解决方案#1

  1. 打开开发人员工具(F12+ + i,或右键单击→ 检查).
  2. 选择Network选项卡,然后勾选Disable cache复选框.

Chrome停用缓存 - 网络标签

  1. 重新加载页面.

❗️ 注意:只有在devtools窗口打开时才会禁用缓存.

Chrome解决方案#2

只有在不使用#1时才有意义.

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

Chrome会在devtools设置中禁用缓存

Chrome解决方案#3:空缓存+硬重新加载

  1. 打开开发人员工具(否则下一步中的菜单将不会显示).
  2. 单击并按住" 刷新"按钮,然后从下拉列表中选择" 空缓存"和"硬重新加载".

Chrome硬刷新和缓存重置

修改javascript代码

可用于调试的与浏览器无关的解决方案是在服务器端代码中附加随机生成的版本字符串作为查询参数,即将脚本调用为:

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

此参数将强制浏览器在ver参数值更改时重新加载脚本.如果您发出ajax请求,则可以附加"?ver=" + new Date().getTime()到您的URL.

注意:不要忘记删除当您完成调试,因为在生产中你最有可能的参数希望被缓存的脚本.通常的做法是在每个新构建上生成一个新的时间戳 - 这可以在生产中使用,并确保在新部署之后客户端将始终获得更新的脚本.


与上述所有解决方案不同,即使您在客户端和服务器之间进行某种缓存(例如redis,memcached,varnish)或CDN(例如akamai),这个解决方案也能正常工作.