Wednesday, 12 June 2013

Disable JavaScript caching for development in Chrome and other browsers

If like me you're constantly battling with Chrome Dev Tools to respect your wish of disabling the caching of JavaScript files.

PHP Solution
Just add ?<php echo time(); ?> to the end of your script's src parameter.
?<?php echo time(); ?>
i.e.
<script type="text/javascript" src="../js/external/gl-matrix.js?<?php echo time(); ?>"></script>
This'll add the current time to your script call, and force Chrome to always respect your wish of disabling the caching of JavaScript files.

It's also better than using the Chrome Dev Tools 'disable cache' feature, because it'll always work, and it'll allow the caching of images to still occur.

Note: Your breakpoints will be forgotten between sessions, which is a pain.


Apache Config Solution
Just add a cache-control header to .js files being served in your httpd.conf file.
<FilesMatch ".(js)$">
Header set Cache-Control "no-cache"
</FilesMatch>
Note: Less guaranteed to work than the PHP solution, but keeps your breakpoints.


If you have a better solution, please let me know.