JavaScript file not updating no matter what I do

Question

I have an external JavaScript file and whether in FireFox or Chrome, whether all browsing data is cleared, it will NOT update no matter what. I believe something happened when I made a backup of my file, which I simply added "_thedate" to the end of the name. Then Save As back to the original name.

Now I cannot seem to get rid of the old JS no matter what unless I change the name of the file, which I really don't want to do, or add the script to the PHP page, which crowds it.

Anyone know the solution to this?

Solution 1

You are sure you are linking to the same file and then editing that same file?

On some browser, you can use CTRL F5 to force a refresh (on the PC). On the Mac, it is Cmd Shift R

Firebug also has a net tab with "Disable Browser Cache".

But I want to give a warning here: even if you can hard refresh, how do you know your customers are getting the latest version? So you need to check, rather than just making sure you and your program manager can do a hard refresh and just go home and take the paycheck next month. If you want to do a job that change the world for the better, or leave the world a little bit better than you found it, you need to investigate more to make sure it works for your customers too (or else, sometimes the customer may call tech support, and tech support may read the script of "clear out the cookies and it will work", which is what happens to me sometimes). Some methods down at the bottom of this post can ensure the customers get the latest version.

Update 2020:

If you are using Chrome and the DevTools is open, you can click and hold the Refresh icon in front of the address bar, and a box will pop up, and you can choose to "Hard Reload" or even "Empty Cache and Hard Reload":

Update 2017:

If you use the Google Chrome debugger, it is the same, you can go to the Network section and make sure the "Disable cache (while DevTools is open)" is checked, in the Settings of the debugger panel.

Also, when you link the JavaScript file, use

<script src="my-js-file.js?v=1"></script>

or v=2, and so forth, when you definitely want to refresh the file. Or you can go to the console and do a Date.now() and get a timestamp, such as 1491313943549, and use

<script src="my-js-file.js?t=1491313943549"></script>

Some building tools will do that automatically for you, or can be configured to do that, making it something like:

<script src="main.742a4952.js"></script>

which essentially will bust the cache.

Note that when you use the v=2 or t=1491313943549, or main.742a4952.js, you also have the advantage that for your users, they definitely will get the newer version as well.

Solution 2

How about adding a '?2' to the tag?

<script src="a.js?2"></script>

The server should return the same file with or without the '?2', but the browser should see it as a different file and redownload. You can just change this query string whenever the file is changed.

adapted from: http://blog.httpwatch.com/2007/12/10/two-simple-rules-for-http-caching/

Solution 3

I've had this problem before, it's very frustrating but I found a work around. Type in the full address of the js file (i.e. yourhost.com/javascript.js) and load it. You will probably see the old version load. Then hit f5 to refresh that page and you should see the new version load. The js file will now be updated in your cache and the code should run as you expect.

Solution 4

The solution I use is. Using firefox
1. using web developer --> Web Console
2. open the java-script file in new tab.
3. Refresh the new tab you should see your new code.
4. Refresh the original page
5. You should see your changes.

Solution 5

I had this problem and solved in Chrome by just disabling Cache: - Click F12; - Go at Network tab; - Click on "Disable Cache".

View more solutions

Comments

[Tarik]

The CTRL+F5 might have worked. I haven't seen if I fixed it in a while, but I saw your suggestion and tried it. What does CTRL + F5 do that is different?

[Ivo Wetzel]

CTRL-F5 ignores the cache when refreshing the page. But as far as Chrome goes, even that's sometimes not enough and one is forced to clear the cache in the preferences.

[eran otzap]

CTRL + F5 worked for me in chrome after repeatedly pressing it like 3 times thanks.

[PDoria]

This was the solution for me. Ctrl + F5 DID NOT solve my problem, for some reason. And this is in March 2017!!

[ltrainpr]

Magnificent. Huge problem solver. I cleared cached and hard refreshed. Nothing was working.

[Tovi Newman]

Love this. Simple and elegant. If you're using webpack, you can use: npmjs.com/package/html-replace-webpack-plugin to alter your JS import.

[Dgloria]

Hey, this doesn't work for local js files. I need to upload them to the web to see any changes. I can even uncomment the whole thing and it still runs. Terrible.

[nonopolarity]

@Dgloria I have done web development for 26 years and this is not the case... you probably somehow have the files packed or cached somewhere... locally or web, shouldn't matter in this case. You can run a simple Node live-server if you want too