Chrome doesn't recognize my changes on my javascript file and loads old code?

Question

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 opened the devetools to hard reload and empy cache hard reload, they both load my old code. I went to incognito mode and it did the same thing. I went to devtools again to disable the cache from the settings and checked the disable cache in the network tab; it still cache my old code. Add-ons to clear the cache didn't work as well. Man, I haven't had this problem before and it only happened last night and it's worst today.

I'm so lost now since chrome doesn't load my new changes from my javascript file. Is there a solution for this?

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

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

to:

<script src="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.

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

<script src="js/my-script.js?<?php echo filemtime('js/my-script.js'); ?>"> 
</script>

The browser will receive:

<script src="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.