如何强制Chrome的脚本调试器重新加载JavaScript?

268

我非常喜欢在Chrome调试器中编辑JavaScript代码,但是,我发现从服务器重新获取JavaScript代码有时会出现问题。

有时候我只需关闭调试器并重新加载框架即可解决问题-但其他时候(我无法确定在什么情况下会出现这种情况),我必须清除我的临时Internet缓存。 有时我发誓我必须完全关闭Chrome,然后清除缓存,最后加载页面,才能让调试器显示最新的脚本。

(注意:Web服务器不会缓存脚本)

我想知道是否有一种快速简便的方法告诉调试器使其无效化所有JavaScript代码,并在重新加载页面时重新获取所有代码?


1
有时候我甚至不得不重新启动IIS Express才能使事情正确地重新加载。 - Chris O
我今天遇到了这样的问题,尝试了这里所有的建议并提交了一个错误报告。目前我完全不知道为什么我不能再在我的文件中设置断点了。我只能在页面视图而不是工作区视图中设置它们。 - netskink
16个回答

353

在开发脚本时,尝试禁用Chrome缓存。

当您重新加载页面时,JavaScript应该会被刷新。


Chrome circa 2011

打开设置 禁用缓存


Chrome circa 2018

打开设置 禁用缓存

您也可以在网络选项卡中访问它:

网络选项卡


8
这是否始终适用,还是仅在调试器打开时适用? - PilotBob
8
只有开启开发者工具时。 - Karolis
14
我一直使用那个设定,但现在突然间被卡在一个特定的文件上了。有人找到解决方案了吗? - IronicMuffin
6
这让我的生命又增加了几年。我尝试了CMD+SHIFT+R,但没有起作用。谢谢。 - Kevin Zych
7
对于最近才来参考这个问题的人,请注意设置菜单在开发者工具的三个垂直点菜单中。在那里,您可以勾选禁用缓存的框。 - Scott C Wilson
显示剩余9条评论

145

在此输入图像描述

上面显示的上下文菜单可以通过在打开Chrome Dev Tools时,在“重新加载”按钮上右键单击/按住

清空缓存并强制刷新对我来说效果最好。

另一个优点:此选项保留所有其他打开的标签页和网站数据,仅重新加载并清除当前页面。


5
这个方法很有用,特别是因为很容易解释。我曾遇到一个客户在他的网站上看不到修改后的内容的问题。按F12键,然后右键单击重新加载按钮,选择“清空缓存并强制重新加载”。我完成了,多亏了这个评论 :-) - Gull_Code
这是最好的 Chrome 功能 :) ,随时可以使用。 - Bishoy Hanna
1
谢谢!我一直在尝试弄清楚为什么“重新加载”按钮有时会给我一个菜单,有时却没有。 - iconoclast
1
我在重新加载JavaScript文件时,使用Ctrl+Shift+R没有遇到任何问题,但这并不能带回在HTML文件中提供的更新内容。清空缓存和强制刷新对此有帮助。 - S. Baggy
最好的方法是使用此空缓存并进行硬刷新。 - hoogw
哇!谁会知道,所有这些年,原来一直有这个选项。(很抱歉这是个无意义的评论,但我不得不说。) - Nicholas Petersen

39
您可以通过以下步骤清除特定文件:
  1. 打开开发者工具
  2. 点击“Sources”选项卡
  3. 找到您的脚本/图片/文件
  4. 检查右侧面板以查看您的文件是否已更新

如果没有更新:

  1. 在左侧面板中右键单击资源,然后选择“在新标签页中打开链接”
  2. 使用上述方法强制刷新资源。 (请参见@Bishoy Hanna的示例)

如果您有在框架中的资源且CTRL + F5无法强制刷新它们,则此功能非常方便。


1
按下CTRL + F5 = 清除缓存并刷新当前页面。 - STEEL
我没有资源选项卡。 - Mike W
@MikeW 它已被重命名为Sources - 我已更新答案。 - Steve Tauber

12

Shift+F5会快速清除缓存。


21
抱歉,Ctrl-F5 似乎不起作用。旧的 JavaScript 文件仍然留在调试器中。 - Chris Fewtrell

11

以下是 DevTools 的快捷方式:

  1. F12 打开 Chrome DevTools
  2. F1 打开 DevTools 设置
  3. 按照下图所示勾选 在打开 DevTools 时禁用缓存

输入图片描述

注意: 根据 Dimi 的评论进行了更新。它们通常会将其移动,所以如果您注意到更改,请告诉我或更新帖子。


9

对于谷歌浏览器,清除缓存的快捷键不是Ctrl+F5,而是Shift+F5!这个快捷键适用于我的电脑。


为什么?我不明白那和注释有什么区别。最有用的问题将会在帖子顶部显示。 - RPDeshaies
3
提问者在任何时候都没有提到 Ctrl-F5,因此根据定义,您的回答不是对提问者所问问题的回答,而是一个 评论,是对其他人回答的更正,应该作为这样处理。 - Edward A

3
在Windows系统中,使用Ctrl+Shift+r可以强制重新加载Chrome浏览器中的脚本。

2
Chrome 调试器似乎会将源文件加载到内存中,并且不会因为浏览器缓存更新而释放它们,即它有自己的缓存,与浏览器缓存不同步。至少在使用源映射文件(调试 TypeScript 源代码)时是这种情况。成功刷新浏览器缓存并通过直接浏览源文件验证后,您会下载更新的文件,但只要您在调试器中重新打开文件,它就会继续返回旧文件,无论普通浏览器缓存的版本如何。确实非常恼人。
我认为这是 Chrome 的一个 bug。我使用的版本是 Version 46.0.2490.71 m。
唯一有用的方法是重启 Chrome(关闭所有 Chrome 浏览器)。

2
如果您在开发者工具中对JavaScript进行本地更改,需要确保在重新加载页面之前关闭这些更改。
在“Sources”选项卡中,打开您的脚本,在脚本中单击右键,然后从上下文菜单中选择“本地修改”选项。这将显示您已保存修改的脚本列表。如果您在该窗口中看到它,开发者工具将始终保留您的本地副本而不是从服务器刷新。单击“还原”按钮,然后再次刷新,您应该会得到新鲜的副本。

1

Chrome浏览器

在Chrome浏览器中,右键单击重新加载按钮,然后点击“清空缓存并进行硬刷新”


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