How to force Chrome browser to reload .css file wh

Question

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.

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

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

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

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.

Answer 1

Still an issue.

Using parameters like "..css?something=random-value" changes nothing in my customer-support experience. Only name changes works.

Another take on the file renaming. I use URL Rewrite in IIS. Sometimes Helicon's Isapi Rewrite.

Add new rule.

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

Note: I reserve the use of undercase to separate the name from the random number. Could be anything else.

Example:

<link href="/styles/template_<% 
Response.Write( System.DateTime.UtcNow.ToString("ddmmyyhhmmss")); %>" 
type="text/css" />

(No styles folder it's just a name part of the pattern)

Output code as:

<link href="/styles/template_285316115328" 
rel="stylesheet" type="text/css">

Redirect as:

(R:1 = template)

/template.css

Only the explanation is long.

Answer 2

If you are using Sublime Text 3, using a build system to open the file opens the most current version and provides a convenient way to load it via [CTRL + B] To set up a build system that opens the file in chrome:

1. Go to 'Tools'

2. Hover your mouse over 'build system'. At the bottom of the list brought up, click 'New Build System...'

3. In the new build system file type this:

   {"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.

Answer 3

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.

Answer 4

The most simplest way to achieve your goal is to open a new incognito window in your chrome or private window in firefox which will by default, not cache.

You can use this for development purposes so that you don't have to inject some random cache preventing code in your project.

If you are using IE then may god help you!

Answer 5

Press SHIFT+F5.

It is working for me with Chrome version 54.

Answer 6

Why is it needed to refresh the whole page? Just refresh only css files without reloading the page. It is very helpful when, for example, you have to wait a long response from DB. Once you get data from DB and populate the page, then edit your css files and reload them in Chrome (or in Firefox). To do that you need to install CSS Reloader extension. Firefox version is also available.