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

Question

我正在编辑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.

Answer 1

强制chrome到reaload 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).

Answer 2

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

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

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

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

Answer 3

[阅读以下更新]

我发现最简单的方法是使用Chrome DevTools设置.单击DevTools右上角的齿轮图标(或更新版本中的3个垂直点)以打开"设置"对话框.在那里,勾选方框:"禁用缓存(当DevTools打开时)"

更新:现在此设置已被移动.它可以在"网络"选项卡中找到,它是一个标有"禁用缓存"的复选框.

Answer 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您正在调试的页面的head标记中或在master page您站点的标记中 插入此代码

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

我相信这会做:)

Answer 5

在我的情况下,在Chrome DevTools设置中,只需设置"禁用缓存(当DevTools打开时)"不起作用,它需要检查"启用CSS源映射"和"自动重新加载生成的CSS",这些都列在源代码中组,以使此缓存问题消失.

Answer 6

按SHIFT+ F5.

它适用于Chrome版本54.

Answer 7

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

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

Answer 8

我在这里遇到了同样的问题！但我可以肯定，我的分辨率要比以上所有示例都要好，只要这样做，

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

就是这样！

Answer 9

使用 macOS，我可以强制 Chrome 通过执行以下操作来重新加载 CSS 文件

?+ SHIFT+R

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