如何在Visual Studio调试时强制Chrome浏览器重新加载.css文件？

Question

如何在Visual Studio调试时强制Chrome浏览器重新加载.css文件？

182

我目前正在Visual Studio 2012（调试模式）中编辑一个.css文件。我正在使用Chrome浏览器。当我在Visual Studio中更改应用程序的.css文件并保存时，刷新页面将不会加载我的.css文件中更新的更改。我认为.css文件仍处于缓存状态。

我已经尝试过：

CTRL / F5
在Visual Studio 2012中，转到项目属性，Web选项卡选择在开始操作部分中启动外部程序粘贴或浏览到Google Chrome的路径（我的是C：\ Users \ xxx \ AppData \ Local \ Google \ Chrome \ Application \ chrome.exe）在命令行参数框中输入-无痕浏览
使用Chrome开发人员工具，单击“齿轮”图标，选中“禁用缓存”。

除非我手动停止调试（关闭Chrome），重新启动应用程序（在调试中），否则似乎没有任何作用。

是否有办法强制Chrome始终重新加载所有CSS更改并重新加载.css文件？

更新：
1.当我刷新时，.aspx文件中的内联样式更改会被检测到。但.css文件中的更改不会。 2.这是一个ASP.NET MVC4应用程序，所以我点击一个超链接，它执行GET。这样做，我没有看到对样式表的新请求。但是点击F5，.css文件将重新加载，并且状态代码（在网络选项卡上）为200。

- duyn9uyen

4

f12 -> 网络 -> 右键点击 -> 清除浏览器缓存（我不喜欢它，所以我使用带有Firebug的Firefox）。 - thkang

我也刚试了一下，似乎不起作用。 - duyn9uyen

在同一个网络选项卡中，您可能会看到您的.css文件的条目 - 我不懂asp，所以我不能确定，但在我的Python Flask开发服务器上，缓存条目的状态代码为304，而重新下载的文件则为200。检查您的状态代码和请求时间，以查看是否存在服务器端问题。 - thkang

奇怪，我在NetBeans / Linux和Chrome上没有类似的问题。每当我更改CSS时，它总是重新加载。 - Bryan Ruiz

我创建了一个插件，可以完全处理您的使用情况（当CSS发生更改时强制刷新）：https://chrome.google.com/webstore/detail/live-reload/jcejoncdonagmfohjcdgohnmecaipidc - Blaise

显示剩余2条评论

26个回答

165

有更复杂的解决方案，但一个非常简单易行的方法就是在CSS引用中添加一个随机查询字符串。

比如：src="/css/styles.css?v={随机数字/字符串}"

如果您正在使用PHP或另一种服务器端语言，可以使用time()自动实现此操作。代码会变成styles.css?v=<?=time();?>

这样，查询字符串将每次都是新的。像我说的，还有更复杂的解决方案更加动态，但在测试目的下，这个方法是首选(在我看来)。

- anson

17

不要在生产环境中使用这个，否则会失去CSS缓存的功能，而这是好事情。 - Bart Calixto

3

如果你正在使用单页应用程序并且需要告诉应用程序重新加载CSS，因为版本已更改，该怎么办？ - Nathan C. Tresch

11

@NathanC.Tresch，当版本更改时，您应该更改版本号而不是随机或时间字符串，因为它们每次都会更改。最好的方法是使用CSS文件本身的校验和。 - Bart Calixto

1

我们使用当前的构建号，例如src="/css/styles.css?v=@buildNumber来自动更新新版本的字符串。 - Rasmus0607

我在PHP中使用这个src="/css/styles.css?v=<?=filemtime('css/styles.css');?>"，它设置了文件的最后修改日期和时间。 - undefined

显示剩余4条评论

154

[查看下面的更新]

我发现最简单的方法是在Chrome DevTools设置中。点击DevTools右上角的齿轮图标（或最近版本中的3个垂直点）打开“设置”对话框。在那里，勾选“在DevTools开启时禁用缓存”的复选框。

更新：现在这个设置已经移动了。它可以在“网络”选项卡中找到，是一个名为“禁用缓存”的复选框。

- Deepak Joy Cheenath

17

在我看来，这是最好的解决方案：您无需在自己的代码中瞎搞就可以为CSS URL提供随机值。 - Guillaume

2

非常好的答案！运行得像魔法一样！ - Ani

1

我也发现这个是最好的解决方案。 - Joe Huang

4

在较新版本的Chrome中，此功能已移动：前往网络选项卡并在标题中勾选“禁用缓存”。 - Jason Clemens

@Amos 在 Chrome 63（截至今天的最新版本）上，CTRL+SHIFT+R（Mac 上的 CMD+SHIFT+R）仍然可以使用。 - Deepak Joy Cheenath

显示剩余2条评论

11

你正在处理浏览器缓存问题。

在页面本身中禁用缓存。这将不会在浏览器/缓存中保存页面的支持文件。

<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1990 12:00:00 GMT" />

您需要将此代码插入到您正在调试的页面的标签中，或将其插入到您网站的主页的标签中。

这样做将禁止浏览器缓存文件，最终文件将不会存储在浏览器的临时文件中，因此不会有缓存，因此不需要重新加载 :)

我相信这样就可以了 :)

- MarmiK

1

这应该是被接受的答案。@anson的解决方案对我来说不起作用。 - Pierrick Martellière

8

在我的情况下，在Chrome DevTools设置中，仅设置“在DevTools打开时禁用缓存”不起作用，需要勾选“启用CSS源映射”和“自动重新加载生成的CSS”，这些都列在源组中，才能解决此缓存问题。

- gustavH

7

我曾经也遇到过同样的问题！但是我相信，我的解决方案比以上所有示例都要好，只需要这样做：

按F12键打开Chrome开发者控制台
右键单击浏览器顶部的重新加载按钮，然后选择“清除缓存并强制重新加载”。

就是这样了！

- Optimaz ID

改变生活！ - kofifus

6

我使用的是基于Chromium开源项目的Edge版本81.0.416.64（官方构建）（64位）。

按下F12键进入开发者工具。
点击网络选项卡。
勾选禁用缓存。

- Chris Catignani

6

按下SHIFT+F5。

在Chrome 54版本中，它可以正常工作。

- user2580062

谢谢。尽管在这个帖子中Ctrl-r是普遍的答案，但只有Shift-f5适用于我（Chromium 55）。 - user2662680

5

通过以下方式，我可以在macOS中强制Chrome重新加载CSS文件：

⌘ + SHIFT + R

在这里找到了这个答案，它被埋在评论中（链接），但它应该得到更多的关注。

- Alex

3

当前版本的Chrome（55.x）在您重新加载页面（Command + R）时不会重新加载所有资源，对于调试.css文件并不有用。

如果您只想调试.html、.php、.etc文件，则Command + R可以很好地工作，并且速度更快，因为它使用本地/缓存资源（.css、.js）。手动删除浏览器缓存以进行每个调试迭代是不方便的。

Mac（键盘快捷键 / Chrome）强制重新加载.css文件的过程： Command + Shift + R

- Logic Industry

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bart Calixto · Accepted Answer

强制 Chrome 重新加载 CSS 和 JS：

Windows 选项 1：CTRL + SHIFT + R
Windows 选项 2：SHIFT + F5

OS X： ⌘ + SHIFT + R

根据 @PaulSlocum 在评论中提到的更新（并已得到多次确认）

原始回答：

Chrome 更改了行为。使用 Ctrl + R 来重新加载。

在 OS X 上： ⌘ + R

如果您在重新加载 CSS/JS 文件时遇到问题，请在重新加载之前打开检查器 (CTRL + SHIFT + C)。