Chrome Doesn't Recognize My Changes On My Javascript File And Loads Old Code?

I have been sitting here for almost an hour here to test the website I'm building. Since I wanted to see the new changes from my code I reloaded, but it was reloading old one. I op

Solution 1:

One solution for this problem is to force reloading the resource in order to avoid the cache. You can get this modifying the url with http get parameters:

Change:

<scriptsrc="myscripts.js"></script>

to:

<scriptsrc="myscripts.js?newversion"></script>

Where newversion can be any string as it will be ignored. A useful option is to use the date, or version, of your code.

I found this workaround particularly useful when I came across this same problem and wanted to ensure that all clients (not just my own browser!) would run the new version of the code.

Solution 2:

I think there's an even better way:

You can use PHP to add the last modification date of your JavaScript file to the URI of that file.

<scriptsrc="js/my-script.js?<?phpecho filemtime('js/my-script.js'); ?>"></script>

The browser will receive:

<scriptsrc="js/my-script.js?1524155368"></script>

The URI of the file will automatically change if the file is updated.

This way the browser can still cache unchanged files while recognizing changes instantly.

Solution 3:

Are you using any type of compilation tools (like gulp or grunt)? It's possible that there is an error in your code, and the tool is not compiling the updated code.

Otherwise, the solution @airos suggested should work. Appending any unique query string to the reference of your JS will always serve a fresh copy on first reload (since the browser will be caching a new URL).