177

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.

7
  • 4
    f12 -> network -> right-click -> clear browser cache(I don't like it, so I use firefox with firebug)
    – thkang
    Mar 22, 2013 at 3:47
  • I just tried that too. It doesn't seem to work.
    – duyn9uyen
    Mar 22, 2013 at 3:52
  • did you try refreshing it after all the menial right-clicks and clicks?
    – thkang
    Mar 22, 2013 at 3:53
  • Yes. I also made a change in my .aspx file. It picked up the change and in-line css changes, just not changes in the .css file.
    – duyn9uyen
    Mar 22, 2013 at 3:55
  • at the same network tab, you may see the entry of your .css file - I don't know asp so I can't be sure, but on my python flask dev server cached entries' status code is 304 while re-downloaded files have 200. check your status code and request time to see if it's server-side problem.
    – thkang
    Mar 22, 2013 at 3:58

25 Answers 25

242

To force chrome to reaload css and js:

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

OS X: + SHIFT + R

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


Original answer:

Chrome changed behavior. Ctrl + R will do it.

On OS X: + R

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

10
  • 28
    And here I was pressing CTRL+F5 like crazy... Thanks.
    – Alix Axel
    Jun 25, 2013 at 1:28
  • 3
    Another tip to try: code-pal.com/quick-tip-clear-cache-hard-refresh-on-chrome
    – duyn9uyen
    Sep 18, 2013 at 15:31
  • 3
    @duyn9uyen Good point! Looks like they are changing behavior again. This is added to chrome windows version, not yet available on mac. Sep 18, 2013 at 17:47
  • 4
    Ctrl + R also working in Firefox. Thanks for Relieving me from Random Url and other things.
    – Zeeshanef
    Feb 26, 2014 at 7:21
  • 32
    CTRL+R does not work for me, but CTRL+SHIFT+R does it Nov 15, 2016 at 10:24
165

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

Such as 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();?>

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

8
  • 17
    just don't use this on production or you will lose the caching capabilities of your css. which is a good thing. Oct 7, 2013 at 21:47
  • 3
    What if you're using a single page application and you need to tell the application to reload the CSS because the version has changed? Nov 3, 2014 at 18:34
  • 11
    @NathanC.Tresch you change the version when the version changes instead of doing random/time string which changes everytime. Best approach will be to use checksum of the css file itself. Apr 21, 2016 at 5:37
  • Can you clarify this answer for beginners? How exactly would you "just add a random query string"? Beginners want to be able to see changes in their work, too, and most of us have no idea what any of this means or how to search for an answer.
    – randy
    Mar 21, 2017 at 18:25
  • 1
    We used the current build number eg. src="/css/styles.css?v=@buildNumber to automaticly update the string with new releases
    – Rasmus0607
    Nov 5, 2019 at 9:03
153

[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". enter image description here

7
  • 16
    This is the best solution IMHO: you don't have to mess around with your own code to provide random value to your css url.
    – Guillaume
    Mar 14, 2014 at 10:12
  • 2
    Excellent answer !... Worked like a charm !
    – Ani
    Dec 10, 2016 at 17:57
  • 1
    I also found this one is the best solution.
    – Joe Huang
    Dec 25, 2016 at 13:59
  • 4
    This has been moved in more recent versions of Chrome: go to Network tab and check "Disable cache" in header. Aug 10, 2017 at 20:03
  • The Ctrl+Shift+R and Shift+F5 methods don't work for me - guessing something changed in Chrome recently. This method still works great. @JasonClemens: the "Disable cache" option is in both the Network tab and in the Settings. Jan 5, 2018 at 3:48
11

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 head tag of the page you are debugging, or in head tag of master page of your site

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

1
  • 1
    This should be the accepted answer. @anson 's solution didn't work, for me. May 27, 2020 at 13:26
8

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.

0
7

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

That`s it!

1
  • life changing !
    – kofifus
    Nov 17, 2020 at 22:22
6

Press SHIFT+F5.

It is working for me with Chrome version 54.

1
  • Thank you. Despite ctrl-r being the popular answer on this thread, only shift-f5 worked for me (Chromium 55). Feb 12, 2017 at 18:29
5

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

+ SHIFT + R

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

0
5

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

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

enter image description here

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

2

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.

2

For macOS Chrome:

  1. Open developers tools cmd+alt+i
  2. Click three dots on the top right corner in developers tools
  3. Click settings
  4. Scroll down to Network
  5. Enable Disable cache (while DevTools is open) see screenshot: enter image description here
1

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.

1

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

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

1

Hold down Ctrl and click the Reload button. Or, Hold down Ctrl and press F5. just open the Chrome Dev Tools by pressing F12. Once the chrome dev tools are open, just right click on the refresh button and a menu will drop down.

0

Just had this problem where one person running Chrome (on a Mac) suddenly stopped loading the CSS file. CMD + R did NOT work at all. I don't like the suggestions above that force a permanent reload on the production system.

What worked was changing the name of the CSS file in the HTML file (and renaming the CSS file of course). This forced Chrome to go get the latest CSS file.

0

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.

0

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!

0

Ctrl + F5

Shift + F5

Both work

0

Easiest way on Safari 11.0 macOS SIERRA 10.12.6: Reload Page From Origin, you can use help to find out where in the menu it is located, or you can use the shortcut option(alt) + command + R.

0

One option would be to add your working directory to your Chrome "workspace" which allows Chrome to map local files to those on the page. It will then detect changes in the local files, and update the page in real-time.

This can be done from the "Sources" tab of Devtools:

enter image description here

Click on the "Filesystem" tab in the file browser sidebar, then click the +Plus sign button to "Add folder to workspace" - you will be prompted with a banner at the top of the screen to allow or deny local file access:

enter image description here

Once allowed, the folder will appear in the "Filesystem" tab on the left. Chrome will now attempt to associate each file in the filesystem tab with a file in the page. Sometimes you will need to reload the page once for this to function correctly.

Once this is done, Chrome should have no trouble picking up local changes, in fact you won't even need to reload to get the changes in many cases, and you can make edits to the local files directly from Devtools (which is extremely useful for CSS, it even comments out CSS lines when you toggle the checkboxes in the Styles tab).

More information on Workspaces in Chrome.

-1

Chrome/firefox/safari/IE will reload the entire page by these shortcuts

Ctrl + R (OR) Ctrl + F5

Hope it may helps you!.

0
-1

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.

2
  • This answer has nothing to do with Visual Studio nor the Chrome browser. Also, this question was asked 4 years ago, and already had an accepted solution. Please try to avoid 'bumping' questions to the top by providing answers to them, unless the question was not already marked as resolved, or you found a new and improved solution to the problem. Check out the documentation on writing great answers for some tips on how to make your answers count :) Aug 31, 2017 at 2:37
  • Hi Obsidian. My apologies. It's the first time I've posted here. I searched long and hard for a solution to this problem. The accepted answer didn't work for me. When I did find a solution (through my own research), I wanted to "pay it forward" by helping anyone else who encounters this problem -even if it is four years old. I'm not sure why my action here would warrant a slap on the wrist, as it seems legit to me. Nevertheless, I'll be sure to be careful in the future (truly -I don't mean that in a snarky way). Thanks -Don.
    – Don
    Sep 1, 2017 at 19:03

Not the answer you're looking for? Browse other questions tagged or ask your own question.