logo标签列表

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

cssvisual-studiogoogle-chromecaching
182

我目前正在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） 在命令行参数框中输入-无痕浏览
  3. 使用Chrome开发人员工具，单击“齿轮”图标，选中“禁用缓存”。

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

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

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

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个回答
2

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

  1. 进入DevTools的网络选项卡
  2. 右键点击资源并选择重放XHR以重复请求

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

2

对于macOS的Chrome浏览器：

  1. 打开开发者工具 cmd+alt+i
  2. 在开发者工具中点击右上角的三个点
  3. 选择“设置”
  4. 往下滚动到“网络”
  5. 启用“禁用缓存（仅在DevTools打开时）”，如下图所示: enter image description here
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>
1
为什么需要刷新整个页面？只需刷新CSS文件而不重新加载页面即可。当您需要等待来自数据库的长时间响应时，这非常有帮助。一旦您从数据库获取数据并填充页面，然后编辑CSS文件并在Chrome（或Firefox中）重新加载它们。要做到这一点，您需要安装 CSS Reloader扩展程序。Firefox版本也可用。
1
一种选择是将您的工作目录添加到Chrome“工作区”，使Chrome能够将本地文件映射到页面上的文件。然后，它将检测本地文件中的更改，并实时更新页面。
可以通过Devtools的“Sources”选项卡完成此操作：

enter image description here

在文件浏览器侧边栏中点击“文件系统”选项卡，然后点击“添加文件夹到工作区”的加号按钮 - 你将会看到一个横幅提示框，询问是否允许或拒绝本地文件访问。

enter image description here

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

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

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

建议设置“禁用缓存”标志或“Command + Shift + R” - 在我的情况下不起作用，但@zeel的答案起作用了。谢谢！ - undefined
1
你可以将此脚本复制粘贴到Chrome控制台中，它会每3秒强制重新加载CSS样式表。有时候我觉得这很有用，当我在改进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);
1

问题仍存在。

使用参数如 "..css?something=random-value" 对我的客户支持体验没有任何改变。只有更改名称有效。

对于文件重命名的另一种方法是使用IIS中的URL重写或者Helicon的Isapi Rewrite。

添加新规则。

+ 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

仅有的长篇解释如下：

0
0
只是遇到一个问题，其中一个在Mac上运行Chrome的人突然停止加载CSS文件。CMD + R根本不起作用。我不喜欢上面的建议，强制在生产系统上进行永久重新加载。
有效的方法是在HTML文件中更改CSS文件的名称（当然还要重命名CSS文件）。这迫使Chrome获取最新的CSS文件。
0
最简单的实现你的目标的方法是在 Chrome 中打开一个新的隐身窗口，或者在 Firefox 中打开一个私密窗口，这些默认情况下不会缓存。
您可以将此用于开发目的，以便您无需在项目中注入任何随意防缓存代码。
如果您正在使用 IE，则上帝保佑你！
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接