165

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

我试过了：

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

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

有什么方法可以强制 Chrome 始终重新加载所有 css 更改并重新加载 .css 文件？

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

4

24 回答 24

238

强制 chrome 重新加载 css 和 js：

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

操作系统：⌘</kbd> + SHIFT + R

如@PaulSlocum 在评论中所述更新（并且许多已确认）

原答案：

Chrome 改变了行为。Ctrl+R会做的。

在 OS X 上：⌘</kbd> + R

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

于 2013-05-06T16:48:42.353 回答
159

有更复杂的解决方案，但一个非常简单的解决方案就是将随机查询字符串添加到您的 CSS 包含中。

如src="/css/styles.css?v={random number/string}"

如果您使用 php 或其他服务器端语言，您可以使用time(). 所以它会是styles.css?v=<?=time();?>

这样，查询字符串每次都是新的。就像我说的那样，有更复杂的解决方案更具动态性，但在测试目的中，这种方法是顶级的（IMO）。

于 2013-03-22T04:28:54.233 回答
151

[阅读下面的更新]

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

更新：现在这个设置已经被移动了。它可以在“网络”选项卡中找到，它是一个标有“禁用缓存”的复选框。 在此处输入图像描述

于 2014-02-10T04:53:24.420 回答
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" />

您需要/需要在head您正在调试的页面的标签或您的网站的head标签 master page中插入此代码

这将不允许浏览器缓存文件，最终文件不会存储在浏览器临时文件中，所以没有缓存，所以不需要重新加载:)

我相信这会做:)

于 2013-03-22T04:28:51.313 回答
8

就我而言，在 Chrome DevTools 设置中，仅设置“禁用缓存（DevTools 打开时）”不起作用，它需要检查源代码中列出的“启用 CSS 源映射”和“自动重新加载生成的 CSS”组，以使此缓存问题消失。

于 2014-10-02T02:34:50.547 回答
6

按SHIFT+ F5。

它适用于我的 Chrome 版本 54。

于 2016-11-23T21:22:19.767 回答
6

我在这里遇到了同样的问题！但我敢肯定，我的分辨率比上面所有的例子都好，就这样做，

  1. 按 F12 调出 Chrome 开发者控制台
  2. 右键单击浏览器顶部的重新加载按钮，然后选择“清空缓存和硬重新加载”。

就是这样！

于 2017-01-29T14:21:12.433 回答
5

使用 macOS，我可以强制 Chrome 重新加载 CSS 文件

⌘</kbd> + SHIFT + R

在这里的评论中发现了这个答案，但它值得更多的曝光。

于 2017-03-27T18:45:42.793 回答
4

我正在使用Edge版本 81.0.416.64（官方版本）（64 位）及其基于 Chromium 开源项目的版本。

按F12进入开发工具。
单击网络选项卡
检查禁用缓存

在此处输入图像描述

于 2020-03-19T20:28:20.590 回答
3

当前版本的 Chrome (55.x) 不会在您重新加载页面 (Command + R) 时重新加载所有资源 - 这对于调试 .css 文件没有用处。

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

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

于 2017-01-15T15:55:14.763 回答
2

我知道这是一个老问题，但如果有人仍在寻找如何重新加载单个外部 css/js 文件，那么现在在 Chrome 中最简单的方法是：

  1. 转到DevTools中的网络选项卡
  2. 右键单击资源并选择Replay XHR以重复请求

确保选择禁用缓存选项以强制重新加载。

于 2015-10-19T16:01:27.850 回答
2

对于 macOS 铬：

  1. 开放开发者工具cmd++alti
  2. 点击开发者工具右上角的三个点
  3. 点击设置
  4. 向下滚动到Network
  5. 启用Disable cache (while DevTools is open)看截图： 在此处输入图像描述
于 2016-11-01T15:23:39.513 回答
1

为什么需要刷新整个页面？只需刷新css文件而不重新加载页面。例如，当您必须等待来自 DB 的长时间响应时，它非常有用。从数据库中获取数据并填充页面后，编辑您的 css 文件并在 Chrome（或 Firefox）中重新加载它们。为此，您需要安装CSS Reloader 扩展。Firefox 版本也可用。

于 2014-06-10T09:48:47.403 回答
1

您可以将此脚本复制粘贴到 Chrome 控制台中，它会强制您的 CSS 脚本每 3 秒重新加载一次。有时我发现它在改进 CSS 样式时很有用。

var nodes = document.querySelectorAll('link');
[].forEach.call(nodes, function (node) {
    node.href += '?___ref=0';
});
var i = 0;
setInterval(function () {
    i++;

    [].forEach.call(nodes, function (node) {
        node.href = node.href.replace(/\?\_\_\_ref=[0-9]+/, '?___ref=' + i);
    });
    console.log('refreshed: ' + i);
},3000);
于 2015-08-13T11:06:31.430 回答
1

我通过这个简单的技巧解决了。

<script type="text/javascript">
  var style = 'assets/css/style.css?'+Math.random();;
</script>

<script type="text/javascript">
  document.write('<link href="'+style+'" rel="stylesheet">');
</script>
于 2016-10-22T06:10:51.553 回答
1

还是个问题。

使用“..css?something=random-value”之类的参数不会改变我的客户支持体验。只有名称更改有效。

文件重命名的另一种方法。我在 IIS 中使用 URL 重写。有时 Helicon 的 Isapi 重写。

添加新规则。

+ Name: lame-chrome-fix.
+ Pattern: styles/(\w+)_(\d+)
+ Rewrite URL: /{R:1}.css

注意：我保留使用小写来将名称与随机数分开。可以是别的什么。

例子：

<link href="/styles/template_<% 
Response.Write( System.DateTime.UtcNow.ToString("ddmmyyhhmmss")); %>" 
type="text/css" />

（没有样式文件夹，它只是模式的名称部分）

输出代码为：

<link href="/styles/template_285316115328" 
rel="stylesheet" type="text/css">

重定向为：

（R:1 = 模板）

/模板.css

只是解释很长。

于 2016-12-28T15:01:46.570 回答
1

一种选择是将您的工作目录添加到您的 Chrome“工作区”，这允许 Chrome 将本地文件映射到页面上的文件。然后它将检测本地文件中的更改，并实时更新页面。

这可以从 Devtools 的“Sources”选项卡中完成：

在此处输入图像描述

单击文件浏览器侧边栏中的“文件系统”选项卡，然后单击 + 加号按钮以“将文件夹添加到工作区” - 屏幕顶部将提示您允许或拒绝本地文件访问：

在此处输入图像描述

一旦允许，该文件夹将出现在左侧的“文件系统”选项卡中。Chrome 现在将尝试将文件系统选项卡中的每个文件与页面中的文件相关联。有时您需要重新加载页面一次才能正常运行。

完成此操作后，Chrome 应该可以轻松获取本地更改，实际上在许多情况下您甚至不需要重新加载即可获取更改，并且您可以直接从 Devtools 对本地文件进行编辑（这非常有用对于 CSS，当您切换样式选项卡中的复选框时，它甚至会注释掉 CSS 行）。

有关 Chrome 中的工作区的更多信息。

于 2020-12-07T20:28:24.037 回答
0

刚刚遇到这个问题，一个运行 Chrome（在 Mac 上）的人突然停止加载 CSS 文件。CMD + R 根本不起作用。我不喜欢上面强制在生产系统上永久重新加载的建议。

起作用的是在 HTML 文件中更改 CSS 文件的名称（当然还有重命名 CSS 文件）。这迫使 Chrome 去获取最新的 CSS 文件。

于 2015-06-05T01:24:57.173 回答
0

如果您使用的是 Sublime Text 3，则使用构建系统打开文件会打开最新版本，并提供一种方便的方式来加载它，通过 [CTRL + B] 设置在 chrome 中打开文件的构建系统：

  1. 转到“工具”

  2. 将鼠标悬停在“构建系统”上。在弹出的列表底部，单击“新建构建系统...”

  3. 在新的构建系统文件中输入：

    {"cmd": [ "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe", "$file"]}

**假设上述第一组引号中的路径是您计算机上chrome所在的路径，如果不是简单地找到chrome的位置并将第一组引号中的路径替换为路径电脑上的铬。

于 2015-11-28T02:22:09.613 回答
0

实现目标的最简单方法是在 chrome中打开一个新的隐身窗口或在 Firefox中打开一个私人窗口，默认情况下，不会缓存。

您可以将其用于开发目的，这样您就不必在项目中注入一些随机缓存阻止代码。

如果您使用的是 IE，那么上帝会帮助您！

于 2016-11-02T12:37:05.673 回答
0

Ctrl+F5

Shift+F5

两者都工作

于 2017-07-24T19:49:24.030 回答
0

Safari 11.0 macOS SIERRA 10.12.6 上最简单的方法：从 Origin 重新加载页面，您可以使用帮助查找它在菜单中的位置，也可以使用快捷键选项（alt）+ command + R。

于 2017-10-29T12:15:31.680 回答
-1

Chrome/firefox/safari/IE将通过这些快捷方式重新加载整个页面

Ctrl+ R (或) Ctrl+F5

希望它可以帮助你！

于 2014-09-02T09:46:29.653 回答
-1

如果您使用 SiteGround 作为您的托管公司，并且其他解决方案均无效，请尝试以下操作：

在 cPanel 中，转到“站点改进工具”并单击“SuperCacher”。在下一页上，单击“刷新缓存”按钮。

于 2017-08-30T18:09:51.703 回答