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

[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)"

---

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

Answer 2

I solved by this simple trick.

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

Answer 3

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

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

Answer 4

I know it's an old question, but if anyone is still looking how to reload just a single external css/js file, the easiest way now in Chrome is:

1. Go to Network tab in DevTools
2. Right click on the resource and select Replay XHR to repeat the request

Make sure that the Disable cache option is selected to force the reload.

Answer 5

You can copy paste this script into Chrome console and it forces your CSS scripts to reload every 3 seconds. Sometimes I find it useful when I'm improving CSS styles.

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);

Answer 6

If you are using SiteGround as your hosting company and none of the other solutions have worked, try this:

From the cPanel, go to "SITE IMPROVEMENT TOOLS" and click "SuperCacher." On the following page, click the "Flush Cache" button.