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

强制 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)。

---

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

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

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

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

---

[阅读下面的更新]

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

https://i.stack.imgur.com/JxsDD.png

---

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

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

<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 标记中，或者您的网站的 master page 的 head 标记中

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

我相信这会做:)

---

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

---

按 SHIFT+F5。

它适用于我的 Chrome 版本 54。

---

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

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

就是这样！

---

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

⌘ + SHIFT + R

发现此答案隐藏在评论 here 中，但值得更多曝光。

---

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

https://i.stack.imgur.com/Zjaih.jpg

---

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

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

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

---

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

转到 DevTools 中的 Network 选项卡 右键单击资源并选择 Replay XHR 以重复请求

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

---

对于 macOS 铬：

打开开发者工具 cmd+alt+i 点击开发者工具右上角的三个点 点击设置 向下滚动到网络 启用 禁用缓存（DevTools 打开时）看截图：

---

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

---

您可以将此脚本复制粘贴到 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);

---

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

<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>

---

还是个问题。

使用“..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

只是解释很长。

---

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

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

---

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

转到“工具” 将鼠标悬停在“构建系统”上。在弹出的列表底部，单击“New Build System...” 在新的构建系统文件中键入：{"cmd": ["C:\\Program Files (x86)\\Google\\Chrome\ \Application\\chrome.exe", "$file"]}

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

---

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

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

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

---

Ctrl + F5

Shift + F5

两者都工作

---

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

---

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

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

https://i.stack.imgur.com/M4ruu.png

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

https://i.stack.imgur.com/ZZQoU.png

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

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

More information on Workspaces in Chrome.

---

按住 Ctrl 并单击重新加载按钮。或者，按住 Ctrl 并按 F5。只需按 F12 打开 Chrome 开发工具。打开 chrome 开发工具后，只需右键单击刷新按钮，就会下拉菜单。

---

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

Ctrl + R（或）Ctrl + F5

希望它可以帮助你！

---

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

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

---