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

时间：2013-03-22 03:46:25

标签： css visual-studio google-chrome caching

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

我试过了：

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

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

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

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

24 个答案:

答案 0 :(得分：171)

强制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 ）之前   做重装。

答案 1 :(得分：134)

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

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

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

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

答案 2 :(得分：126)

[阅读以下更新]

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

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

答案 3 :(得分：9)

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

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

<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的{​​{1}}标记中插入此代码

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

我确信这样做：）

答案 4 :(得分：8)

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

答案 5 :(得分：6)

按 SHIFT + F5 。

Chrome版本54适用于我。

答案 6 :(得分：4)

使用macOS，我可以通过执行

强制Chrome重新加载CSS文件

⌘ + SHIFT + R

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

答案 7 :(得分：4)

我在这里面临同样的问题！但我确定，我的解决方案比以上所有例子更好，只需这样做，

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

    3. 就是这样！

答案 8 :(得分：3)

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

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

enter image description here

答案 9 :(得分：3)

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

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

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

答案 10 :(得分：2)

对于macOS Chrome：

  1. 打开开发人员工具 cmd + alt + i
  2. 点击开发者工具右上角的三个点
  3. 点击设置
  4. 向下滚动到Network
  5. 启用Disable cache (while DevTools is open)查看屏幕截图： enter image description here

答案 11 :(得分：2)

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

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

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

答案 12 :(得分：1)

还是个问题。

使用像“..css？something = random-value”这样的参数不会改变我的客户支持体验。只有名称更改才有效。

对文件重命名的另一种看法。我在IIS中使用URL Rewrite。有时Helicon的Isapi重写。

添加新规则。

+ Name: lame-chrome-fix.
+ Pattern: styles/(\w+)_(\d+)
+ Rewrite URL: /{R:1}.css

注意：我保留使用undercase将名称与随机数分开。可能是其他任何东西。

示例：

<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

只有解释很长。

答案 13 :(得分：1)

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

答案 14 :(得分：1)

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

答案 15 :(得分：1)

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

这可以在Devtools的“来源”标签中完成：

enter image description here

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

enter image description here

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

完成此操作后，Chrome应该可以轻松获取本地更改，实际上，在很多情况下，您甚至都不需要重新加载即可获取更改，并且您可以直接从Devtools对本地文件进行编辑（对CSS极为有用，当您在“样式”标签中选中复选框时，它甚至可以注释掉CSS行。

More information on Workspaces in Chrome.

答案 16 :(得分：0)

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

DATA OZONE;
INPUT MONTH $ STMF YKRS @@;
CARDS;
    A 80 66   A 68 82    A 24 47    A 24 28    A 82 44    A 100 55
    A 55 34   A 91 60    A 87 70    A 64 41    A . 67     A . 127     A       170 96   A . 56

    JN 215 93 JN 230 106 JN . 49    JN 69 64   JN 98 83   JN 125 97   
    JN 72 51  JN 125 75  JN 143 104 JN 192 107 JN . 56    JN 122 68  
    JN 32 20  JN 23 35   JN 71 30   JN 38 31   JN 136 81  JN 169 119
    JL 152 76 JL 201 108 JL 134 85  JL 206 96  JL 92 48   JL 101 60   
    JL 133 .  JL 83 50   JL . 27    JL 60 37   JL  124 47 JL 142 71 
    JL 75 49  JL 103 59  JL . 53    JL 46 25   JL 68 45   JL .  78
    S 38 23   S 80 50    S 80 34    S 99 58    S 71 35    S 42 24       S 52 27    S 33 17     
;
run;
Proc Ttest data=Ozone PLOT=NONE ALPHA=0.01;
Where MONTH='JN';
Paired STMF*YKRS;
Run;

Question 2
Data Baseball;
Input ba league;
Datalines;
276 National League
288 National League
281 National League
290 National League
303 National League
257 American League
254 American League
263 American League
261 American League
Run;
Proc Ttest data=Baseball ALPHA=0.02 ;
Question 3 
Proc Ttest data=ozone ALPHA=0.01 Plot=NONE;
Where Month='A'-'S';
Paired STMF*YKRS;
Run;

答案 17 :(得分：0)

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

打开文件的构建系统

  1. 转到＆＃39;工具＆＃39;

  2. 将鼠标悬停在＆＃39;构建系统＆＃39;上。在列表底部显示，点击“新建系统...”

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

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

    4. **如果第一组引号中的上述路径是Chrome在您的计算机上的位置，如果它不是简单地找到chrome的位置并替换第一组中的路径引用计算机上的chrome路径。

答案 18 :(得分：0)

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

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

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

答案 19 :(得分：0)

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

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

答案 20 :(得分：0)

Ctrl + F5

Shift + F5

两者都有效

答案 21 :(得分：0)

如果您使用SiteGround作为您的托管公司并且没有其他解决方案有效，请试试这个：

从cPanel，转到＆＃34; SITE改进工具＆＃34;然后点击＆＃34; SuperCacher。＆＃34;在下一页上，单击＆＃34; Flush Cache＆＃34;按钮。

答案 22 :(得分：0)

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

答案 23 :(得分：-1)

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

Ctrl + R （或） Ctrl + F5

希望它可以帮到你！

相关问题
最新问题