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

How to force Chrome browser to reload .css file while debugging in Visual Studio?

提问by duyn9uyen

I'm currently editing a .css file inside of Visual Studio 2012 (in debug mode). I'm using Chrome as my browser. When I make changes to my application's .css file inside of Visual Studio and save, refreshing the page will not load with the updated change in my .css file. I think the .css file is still cached.

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

I have tried:

我试过了：

1. CTRL / F5
2. In Visual Studio 2012, Go to project properties, Web tab Choose Start External Program in the Start Action section Paste or browse to the path for Google Chrome (Mine is C:\Users\xxx\AppData\Local\Google\Chrome\Application\chrome.exe) In the Command line arguments box put -incognito
3. Used the Chrome developer tools, click on the "gear" icon, checked "Disable Cache."

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

Nothing seems to work unless I manually stop debugging, (close out of Chrome), restart the application (in debug).

除非我手动停止调试，（关闭 Chrome），重新启动应用程序（在调试中），否则似乎什么都不起作用。

Is there any way to force Chrome to always reload all css changes and reload the .css file?

有什么方法可以强制 Chrome 始终重新加载所有 css 更改并重新加载 .css 文件？

Update:
1. In-line style changes in my .aspx file are picked up when I refresh. But changes in a .css file does not. 2. It is an ASP.NET MVC4 app so I click on a hyperlink, which does a GET. Doing that, I don't see a new request for the stylesheet. But clicking F5, the .css file is reloaded and the Status code (on the network tab) is 200.

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

采纳答案by anson

There are much more complicated solutions, but a very easy, simple one is just to add a random query string to your CSS include.

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

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

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

If you're using php or another server-side language, you can do this automatically with time(). So it would be styles.css?v=<?=time();?>

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

This way, the query string will be new every single time. Like I said, there are much more complicated solutions that are more dynamic, but in testing purposes this method is top (IMO).

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

回答by Bart Calixto

To force chrome to reaload css and js:

强制 chrome 重新加载 css 和 js：

Windows option 1: CTRL+ SHIFT+ R
Windows option 2: SHIFT+ F5

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

OS X: ?+ SHIFT+ R

OS X: ?+ SHIFT+R

Updated as stated by @PaulSlocum in the comments (and many confirmed)

如@PaulSlocum 在评论中所述更新（并且许多已确认）

---

---

Original answer:

原答案：

Chrome changed behavior. Ctrl+ Rwill do it.

Chrome 改变了行为。Ctrl+R会做的。

On OS X: ?+ R

在 OS X 上：?+R

If you have problems reloading css/js files, open the inspector (CTRL+ SHIFT+ C) before doing the reload.

如果你有问题重装CSS / JS文件，打开检查器（CTRL+ SHIFT+C做重装前）。

回答by Deepak Joy

[READ THE UPDATE BELOW]

[阅读下面的更新]

Easiest way I've found is in Chrome DevTools settings. Click on the gear icon (or 3 vertical dots, in more recent versions) in the top-right of DevTools to open the "Settings" dialog. In there, tick the box: "Disable cache (while DevTools is open)"

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

---

---

UPDATE: Now this setting has been moved. It can be found in the "Network" tab, it's a checkbox labeled "Disable Cache".

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

回答by MarmiK

You are dealing with the problem of browser cache.

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

Disable the cache in the page itself. That will not save supporting file of page in browser/cache.

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

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

This code you require/need to insert in headtag of the page you are debugging, or in headtag of master pageof your site

您需要/需要将此代码插入head您正在调试的页面的标记中，或插入您网站的head标记中 master page

This will not allow browser to cache file, eventually files will not be stored in browser temporary files, so no cache, so no reloading will be required :)

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

I am sure this will do :)

我相信这会做:)

回答by gustavH

In my case,in Chrome DevTools settings, just set "Disable cache (while DevTools is open)" doesn't work, it needs to check "Enable CSS source maps" and "Auto-reload generated CSS",which are listed in source group, to make this cache issue go away.

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

回答by user2580062

Press SHIFT+F5.

按SHIFT+ F5。

It is working for me with Chrome version 54.

它适用于 Chrome 54 版。

回答by Optimaz ID

i had faced same problem here! but I sure,my resolution is better than all above examples,just do this,

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

1. Pull up the Chrome developer console by pressing F12
2. Right click on the reload button at the top of the browser and select "Empty Cache and Hard Reload."

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

That`s it!

就是这样！

回答by AlexG

With macOS I can force Chrome to reload the CSS file in by doing

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

?+ SHIFT+ R

?+ SHIFT+R

Found this answer buried in the comments herebut it deserved more exposure.

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

回答by Logic Industry

Current version of Chrome (55.x) does not reload all resources when you reload the page (Command + R) - and that is not useful for debugging the .css file.

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

Command + R works fine if you want to debug only the .html, .php, .etc files, and is faster because works with local/cached resources (.css, .js). To manually delete browser's cache for each debug iteration is not convenient.

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

Procedure to force reload .css file on Mac (Keyboard Shortcut / Chrome): Command + Shift + R

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

回答by Chris Catignani

I'm using EdgeVersion 81.0.416.64 (Official build) (64-bit) and its based on the Chromium open source project.

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

Press F12to get into Dev Tools.
Click Network Tab
Check Disable cache

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