Force Google Chrome to check for new JavaScript files every time I access a web site

Question

So, if I go to Internet options in Internet Explorer:

I can adjust the settings for when IE checks for updates:

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.

Solution 1

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

Solution 2

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" [email protected]("~/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/

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

Solution 3

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.

Solution 4

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.

Solution 5

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/

View more solutions

Comments

[jpmc26]

Why don't you disable the caching done by Visual Studio instead? (Seriously, who in the heck designs an IDE with caching?)

[EJoshuaS - Stand with Ukraine]

@jpmc26 What caching?

[jpmc26]

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.

[GER]

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

[flagg19]

Chrome extension "Cache Killer" solved it for me, I don't know why but ctrl+f5 sometimes doesn't work for me

[Andy]

If you're developing, it might be useful to add ?v=<latest_assembly_version> to the URL for each JS file. This has the advantage of breaking badly behaving cache servers in the wild when your app is deployed.

[TripeHound]

@jpmc26 My experience is that browsers (and/or proxies and other bits that "get in the way") certainly can and do cache things, even in the presence of headers to the contrary (see this question and answers for what appears to be a good study of how to [attempt to] control this for different browsers).

[Dogbert]

Check this out when you have some free time: stackoverflow.com/questions/11245767/…

[jpmc26]

@TripeHound If the server doesn't specify any caching headers, they will reload the content every time. Not caching is literally the default.

[Nzall]

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

[Jeroen]

@Bruno Odd, I also always used ctrl+f5. Just tested and both seem to work.

[Christopher Hostage]

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.

[TripeHound]

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.

[Raidri]

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?

[TripeHound]

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

[fred beauchamp]

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

[Raidri]

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.

[fred beauchamp]

You basically have a css and a js per page that needs hashing so it's really a mater of ms here.