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

我正在编辑。在 VisualStudio2012中的 css 文件(在调试模式下)。我用 Chrome 作为浏览器。当我更改应用程序的。在 VisualStudio 中保存 css 文件，刷新页面将不会加载更新后的更改。Css 档案。我觉得。Css 文件仍然缓存。

我试过了:

  1. CTRL/F5
  2. 在 Visual Studio 2012中, 转到项目属性，Web 选项卡 在“启动操作”部分中选择“启动外部程序” 粘贴或浏览到 Google Chrome 的路径(我的是 C: 用户 xxx AppData 本地 Google Chrome 应用 Chrome.exe) 在“命令行参数”框中放入-匿名
  3. 使用 Chrome 开发工具，点击“ Gear”图标，勾选“ Disable Cache”

似乎没有工作，除非我手动停止调试，(关闭 Chrome) ，重新启动应用程序(在调试中)。

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

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

259753 次浏览
小开

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

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

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

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

我相信这个可以:)

小开
最佳答案

还有更复杂的解决方案，但是一个非常简单的解决方案是向 CSS include 添加一个随机查询字符串。

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

如果您使用的是 php 或其他服务器端语言，则可以使用 time()自动完成此操作

这样，查询字符串每次都是新的。就像我说的，有更复杂的解决方案，更动态，但在测试的目的，这种方法是顶级(国际海事组织)。

小开

强制 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) 重新装弹。

小开

[阅读下面的更新]

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

更新: 现在该设置已被移动。它可以在“网络”选项卡中找到，它是一个标记为“禁用缓存”的复选框。 enter image description here

小开

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

小开

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

Ctrl + R(或) Ctrl + F5

希望对你有所帮助。

小开

在我的案例中，在 Chrome DevTools 设置中，仅仅设置“禁用缓存(当 DevTools 打开时)”不起作用，它需要检查“启用 CSS 源地图”和“自动重载生成的 CSS”，这些都在源代码组中列出，以消除这个缓存问题。

小开

只是有一个问题，一个人运行 Chrome (在 Mac 上)突然停止加载 CSS 文件。CMD + R 根本不起作用。我不喜欢上面的建议，它强迫生产系统永久重新加载。

改变 HTML 文件中 CSS 文件的名称(当然还有重命名 CSS 文件)。这迫使 Chrome 去获取最新的 CSS 文件。

小开

你可以复制粘贴这个脚本到 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);
小开

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

  1. 在 DevTools 中转到 网络标签
  2. 右键单击资源并选择 重播 XHR以重复请求

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

小开

如果您正在使用升华文本3，使用一个构建系统打开文件打开最新的版本，并提供了一个方便的方式通过[ CTRL + B ]加载它 设置一个构建系统，用 chrome 打开文件:

  1. 去“工具”网站

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

  3. 在新的构建系统文件中键入以下内容:

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

**provided the path stated above in the first set of quotes is the path to where chrome is located on your computer, if it isn't simply find the location of chrome and replace the path in the first set of quotes with the path to chrome on your computer.

小开

我用这个简单的把戏解决了。

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

对于 macOS Chrome:

  1. 开放式开发工具 cmd + alt + i
  2. 单击开发人员工具中右上角的三个点
  3. 点击设置
  4. 向下滚动到 Network
  5. 启用 Disable cache (while DevTools is open)请看截图: enter image description here
小开

最简单的方法来实现您的目标是在您的铬或 火狐中的私有窗口的 打开一扇隐姓埋名的新窗户默认情况下，而不是缓存。

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

如果你正在使用 IE，那么愿上帝帮助你！

小开

按 SHIFT + F5。

它在我的 Chrome 54版本中运行良好。

小开

还是个问题。

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

只是解释太长了。

小开

当前版本的 Chrome (55.x)不会在重新加载页面时重新加载所有资源(Command + R)-这对于调试。Css 档案。

如果只想调试。超文本标记语言。菲律宾。Etc 文件，并且更快，因为使用本地/缓存资源(。CSS.Js). 为每次调试迭代手动删除浏览器的缓存是不方便的。

强制在 Mac (快捷键/Chrome)上重载. css 文件的过程: 命令 + Shift + R

小开

我在这里也遇到过同样的问题! 但是我肯定，我的解决方案比上面所有的例子都要好，只要做到这一点,

  1. 按 F12打开 Chrome 开发者控制台
  2. 右击浏览器顶部的重新加载按钮，选择“空缓存和硬重新加载”

就是这样！

小开

使用 macOS，我可以通过以下步骤强制 Chrome 重新加载 CSS 文件

⌘ + SHIFT + R

发现这个答案埋藏在评论 给你，但它值得更多的曝光。

小开

Ctrl + F5

Shift + F5

都能用

小开

如果你正在使用 SiteGround 作为你的主机托管公司，并且没有其他的解决方案奏效，试试这个:

在 cPanel 中，转到“ SITE IMPROVEMENT TOOLS”并点击“ SuperCacher”。在接下来的页面中，点击“ Flush Cache”按钮。

小开

Safari 11.0 macOS SIERRA 10.12.6: 从起源重新加载页面，你可以使用帮助找出它在菜单中的位置，或者你可以使用快捷方式选项(alt) + 命令 + R。

小开

我使用的是基于 Chromium 开源项目的 Edge Version 81.0.416.64(官方版本)(64位)。

按 F12进入开发工具。
单击“网络”选项卡
检查禁用缓存 < br > < br > enter image description here

小开

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

这可以通过 Devtools 的“ Source”选项卡完成:

enter image description here

点击文件浏览器侧边栏中的“文件系统”标签，然后点击 + Plus 标志按钮，点击“添加文件夹到工作区”-你会在屏幕顶部看到一个横幅提示，允许或拒绝本地文件访问:

enter image description here

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

一旦这样做了，Chrome 应该不会有麻烦获取本地更改，事实上，在许多情况下，你甚至不需要重新加载获取更改，你可以直接从 Devtools 编辑本地文件(这对 CSS 非常有用，它甚至可以在你切换样式选项卡中的复选框时注释掉 CSS 行)。

更多关于 Chrome 工作区的信息。

小开

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


提交答案