26

So, if I go to Internet options in Internet Explorer: enter image description here

I can adjust the settings for when IE checks for updates: enter image description here

Can I do something similar in Google Chrome? Right now when I change my JavaScript file and debug from Visual Studio, Chrome will always use the cached version rather than using the modified version. In order to be able to use the current version I have to manually clear out my temporary internet files/cache, which is really annoying.

Improve this question
9
  • 14
    Why don't you disable the caching done by Visual Studio instead? (Seriously, who in the heck designs an IDE with caching?)
    – jpmc26
    Apr 5, 2017 at 1:10
  • 2
    @jpmc26 What caching?
    – EJoshuaS - Stand with Ukraine
    Apr 5, 2017 at 1:20
  • 21
    I worded my last comment loosely; my apologies if that made it unclear. Browsers only cache files if the server sends back specific headers. It's stupid for Visual Studio's development server to send back cache headers by default, since changes to those files should be expected. An extra part-second loading the page is well worth not dealing with problems from outdated JS and CSS files being cached in the browser. I sincerely hope there is some way to disable it.
    – jpmc26
    Apr 5, 2017 at 2:13
  • 1
    Couldn't find any Visual Studio options but a development web.config change may solve the caching in visual studio. iis.net/configreference/system.webserver/staticcontent/…
    – GER
    Apr 5, 2017 at 14:51
  • 1
    Chrome extension "Cache Killer" solved it for me, I don't know why but ctrl+f5 sometimes doesn't work for me
    – flagg19
    Apr 5, 2017 at 15:12

5 Answers 5

Reset to default
56

Option 1: Disable cache temporarily

  1. Open Developer Tools (Press F12 or Menu, More Tools, Developer Tools)
  2. Open Developer Tools Settings (Press F1 or DevTools Menu, Settings)
  3. Check "Disable cache (while DevTools is open)" under the Network header of the Preferences pane

Option 2: Disable cache for session

Start Chrome with the command-line switches --disk-cache-size=1 --media-cache-size=1 which will limit the caches to 1 byte, effectively disabling the cache.

Option 3: Manual Force Refresh

Reload the current page, ignoring cached content: Shift+F5 or Ctrl+Shift+r

Chrome Keyboard Shortcuts - Chrome Help (Under "Webpage shortcuts")

Option 4: Extra Reload Options (Source)

With Developer Tools open, right-click the Reload button to display a reload menu with the following:

  • Normal Reload (Ctrl+R)
  • Hard Reload (Ctrl+Shift+R)
  • Empty Cache and Hard Reload
Improve this answer
2
  • 1
    @Bruno Odd, I also always used ctrl+f5. Just tested and both seem to work.
    – Jeroen
    Apr 5, 2017 at 14:06
  • 1
    I suggest using option 2, with a twist. Make a separate shortcut to Chrome with the switches, and name it differently. Put it in different ends of your Windows Taskbar.
    – Christopher Hostage
    Apr 5, 2017 at 23:04
9

It may not be 100% related to the chrome refresh but for further developpment. Like @Dom said, you can add a ?v=# after your ressource. One way to automate the process is to hash the content of the said file and use that as the version.

I have a snippet code on how to to this in C# (Razor for implementation) if this can help.

Helper:

public static string HashUrl(string relativeUrl)
    {
        var server = HttpContext.Current.Server;
        if (File.Exists(server.MapPath(relativeUrl)))
        {
            byte[] hashData;
            using (var md5 = MD5.Create())
            using (var stream = File.OpenRead(server.MapPath(relativeUrl)))
                hashData = md5.ComputeHash(stream);

            return relativeUrl.Replace("~", "") + "?v=" + BitConverter.ToString(hashData).Replace("-", "");
        }
        return relativeUrl + "?v=notFound";
    }

Implementation:

<link rel="stylesheet" href=@Util.HashUrl("~/Controllers/Home/Views/Index.css") />

Hope this helps

EDIT --- Some have asked for some build runtime and for 1000 small resources, it takes approximately 11 ms.

https://en.code-bude.net/2013/08/07/md5-hashes-in-c-benchmark-and-speed-%E2%80%8B%E2%80%8Boptimization/

enter image description here https://en.code-bude.net/wp-content/uploads/2013/08/md5_performance_benchmark_2.png

Improve this answer
6
  • 2
    Versioning resources like this (or by embedding the version/hash in the resource name itself) can be very helpful, especially when deploying updates in the real world, where -- contrary to what the rules on cache-control header say -- all manner of caching may be happening, and many users won't know how to (or the need to) refresh the cache. If you (make your app) ask for a newly-named resource, it can't possibly be cached.
    – TripeHound
    Apr 6, 2017 at 6:50
  • 1
    Isn't this a large performance loss? Hashing every css and js file everytime it a link is inserted in a page ... Have you run benchmarks for this?
    – Raidri
    Apr 6, 2017 at 8:51
  • 2
    @Raidri Hashing on the fly is probably not a good idea (I hadn't noticed it was doing this when I first commented). Updating references to use a hash or version during the build process is.
    – TripeHound
    Apr 6, 2017 at 11:08
  • @Raidri I have a rather small application with meaby 20 ressources that I hash and i have not seen a difference in the build time so I didn't really tried to benchmark it. Also i'm not sure I understand your second sentence but the ressources are cached and the browser only recache them if the hash change => if you change the ressource itself.
    – fred beauchamp
    Apr 6, 2017 at 13:15
  • The hash is not calculated at build time but at every page generation. That's a server issue and has nothing to do with caching in the browser.
    – Raidri
    Apr 6, 2017 at 13:25
5

In other cases where these may not be possible, for example wanting to force a refresh on an end-user's computer that you don't have access to, you can append a version number to the script name as a query parameter making the browser identify it as a different file. ie. example.js?v=1. Bear in mind you'd need to change the number on each reload to force it.

You could also do this with local development, but the dev tools method is much more efficient.

Improve this answer
3

in addition of @Steven answer, when you get the Developer Tools Console opened, you can Right Click on the refresh button and use the drop down menu.

In this menu you get an option for "Empty Cache and Hard reload".

Is what you're looking for.

Improve this answer
1
  • 1
    I assume you're using a non-English version of Chrome. I use the English version, and it's called "Empty Cache and Hard reload".
    – Nzall
    Apr 5, 2017 at 11:58
1

If you are developing the site, then you should know that Chrome requires the must-revalidate setting in Cache-Control in order to properly re-fetch files when they are changed on the server.

The other answers tell you how to hit SHIFT-F5 to force your own version of Chrome to refetch all the files. But is it reasonable to tell all the users of the site to do this every time the site changes? If you set Cache-Control to include must-revalidate then Chrome will check to see if any files have changed, and then download them properly when needed.

See the details at this blog post: https://agiletribe.wordpress.com/2018/01/29/caching-for-chrome/

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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