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

Posted 2023-02-19

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

【英文标题】：How to force Chrome browser to reload .css file while debugging in Visual Studio?

【发布时间】：2013-03-11 20:09:26

【问题描述】：

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

我试过了：

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

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

有没有办法强制 Chrome 总是重新加载所有 css 更改并重新加载 .css 文件？

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

【问题讨论】：

f12 -> 网络 -> 右键 -> 清除浏览器缓存（我不喜欢，所以我用 firefox 和 firebug）

我也试过了。它似乎不起作用。

您是否尝试在所有卑微的右键单击和单击后刷新它？

是的。我还对我的 .aspx 文件进行了更改。它获取了更改和内联 css 更改，而不是 .css 文件中的更改。

在同一个网络选项卡上，您可能会看到 .css 文件的条目 - 我不知道 asp，所以我不能确定，但​​在我的 python 烧瓶开发服务器缓存条目上状态码是 304，而重新下载的文件有 200。检查您的状态码并请求时间，看看它是否是服务器端的问题。

【参考方案1】：

强制 chrome 重新加载 css 和 js：

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

OS X：⌘ + SHIFT + R

如 @PaulSlocum 在 cmets 中所述已更新（许多已确认）

---

原答案：

Chrome 改变了行为。 Ctrl + R 就可以了。

在 OS X 上：⌘ + R

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

【讨论】：

在这里我像疯了一样按了CTRL+F5...谢谢。

另一个尝试的技巧：code-pal.com/quick-tip-clear-cache-hard-refresh-on-chrome

@duyn9uyen 好点！看起来他们正在再次改变行为。这是添加到 chrome windows 版本的，在 mac 上尚不可用。

Ctrl + R 也适用于 Firefox。感谢您将我从 Random Url 和其他事情中解脱出来。

CTRL+R 对我不起作用，但 CTRL+SHIFT+R 可以

【参考方案2】：

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

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

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

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

【讨论】：

只是不要在生产环境中使用它，否则您将失去 css 的缓存功能。这是一件好事。

如果您使用的是单页应用程序，由于版本已更改，您需要告诉应用程序重新加载 CSS 怎么办？

@NathanC.Tresch 您在版本更改时更改版本，而不是执行每次更改的随机/时间字符串。最好的方法是使用 css 文件本身的校验和。

你能为初学者澄清这个答案吗？您究竟会如何“只添加一个随机查询字符串”？初学者也希望能够看到他们工作中的变化，而我们大多数人都不知道这意味着什么，也不知道如何寻找答案。

@randy 我给出了一个使用 php 的示例，在该示例中，您将当前时间戳呈现为查询参数。您可以研究如何使用后端使用的任何语言来做类似的事情。你也可以通过 grunt/gulp 构建步骤来做到这一点，如果你可以使用的话。

【参考方案3】：

[阅读下面的更新]

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

---

更新：现在此设置已被移动。它可以在“网络”选项卡中找到，它是一个标有“禁用缓存”的复选框。

【讨论】：

这是最好的解决方案恕我直言：您不必乱用自己的代码来为您的 css url 提供随机值。

优秀的答案！...像魅力一样工作！

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

这已在较新版本的 Chrome 中移动：转到“网络”选项卡并检查标题中的“禁用缓存”。

Ctrl+Shift+R 和 Shift+F5 方法对我不起作用——猜测 Chrome 最近发生了一些变化。这种方法仍然很有效。 @JasonClemens：“禁用缓存”选项位于“网络”选项卡和“设置”中。

【参考方案4】：

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

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

<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 标记中

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

我相信这会做:)

【讨论】：

这应该是公认的答案。 @anson 的解决方案对我来说不起作用。

【参考方案5】：

在我的情况下，在 Chrome DevTools 设置中，只设置“禁用缓存（当 DevTools 打开时）”不起作用，它需要检查“启用 CSS 源映射”和“自动重新加载生成的 CSS”，它们是列在源组中，以消除此缓存问题。

【参考方案6】：

按 SHIFT+F5。

它适用于我的 Chrome 版本 54。

【讨论】：

谢谢。尽管 ctrl-r 是该线程上的流行答案，但只有 shift-f5 对我有用（Chromium 55）。

【参考方案7】：

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

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

就是这样！

【讨论】：

改变生活！

【参考方案8】：

在 macOS 中，我可以强制 Chrome 重新加载 CSS 文件

⌘ + SHIFT + R

在 cmets here 中发现了这个答案，但它值得更多曝光。

【参考方案9】：

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

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

【参考方案10】：

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

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

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

【参考方案11】：

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

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

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

【参考方案12】：

对于 macOS Chrome：

打开开发者工具cmd+alt+i 点击开发者工具右上角的三个点 点击设置 向下滚动到Network 启用Disable cache (while DevTools is open) 见截图：

【参考方案13】：

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

【参考方案14】：

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

【参考方案15】：

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

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

【参考方案16】：

仍然是一个问题。

使用“..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 = 模板）

/template.css

只有解释很长。

【参考方案17】：

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

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

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

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

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

More information on Workspaces in Chrome.

【参考方案18】：

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

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

【参考方案19】：

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

转到“工具”

将鼠标悬停在“构建系统”上。在弹出的列表底部，点击“New Build System...”

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

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

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

【参考方案20】：

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

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

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

【参考方案21】：

Ctrl + F5

Shift + F5

两者都有效

【参考方案22】：

Safari 11.0 macOS SIERRA 10.12.6 上最简单的方法： Reload Page From Origin，你可以使用帮助来查找它在菜单中的位置，也可以使用快捷键 option(alt) + command + R。

【参考方案23】：

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

Ctrl + R (OR) Ctrl kbd> + F5

希望对你有帮助！

【参考方案24】：

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

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

【讨论】：

这个答案与 Visual Studio 和 Chrome 浏览器无关。此外，这个问题是在 4 年 前提出的，并且已经有了一个公认的解决方案。请尽量避免通过提供答案来将问题“颠倒”到顶部，除非该问题尚未标记为已解决，或者您找到了针对该问题的新的和改进的解决方案。查看writing great answers 上的文档，了解有关如何让您的答案发挥作用的一些提示：)

嗨黑曜石。我很抱歉。这是我第一次在这里发帖。我长期努力地寻找解决这个问题的方法。接受的答案对我不起作用。当我确实找到了解决方案（通过我自己的研究）时，我想通过帮助遇到这个问题的任何其他人来“付出代价”——即使它已经四岁了。我不知道为什么我在这里的行为会引起一记耳光，因为这对我来说似乎是合法的。尽管如此，我一定会在未来小心谨慎（真的 - 我并不是以一种刻薄的方式）。谢谢-唐。