Reloading javascript and CSS, best practices: PHP

Question

This is more of a best practices question, but it's very important to me because it caused me many times to think that my js or css modifications weren't working.

I work with PHP and have my CSS and JS in separate files. Sometimes when I hit the circular Reload button, my changes don't kick in. I use either Reload or re-hit Enter after the URL. Sometimes neither works, and I have to do crazy things like restarting my browser for caches to clear.

To test whether I'm working with the old or new JS for example, I use different alert messages, and that's when I find out it's still using the old (pre-recent-change) JS. Same for CSS, I use different color borders, etc. to know if it's picking up the new. Needless to say, I'm sure there are better practices than this :)

Answer 1

Ctrl-Shift-R or Ctrl-F5 ( Cmd + F5 mac equivalent? ) would do a hard refresh and force the user agent to download everything from scratch.

Answer 2

You can either force re-downloading from the server when hitting reload, using something like Ctrl+F5 on Firefox (to indicate the browser it must re-ask the files from the server, instead of using the version it has in cache on your machine), or de-activating caching in your browser (at least, when developping CSS/JS related stuff).

A great tool for the de-activation of the caching thing is the Firefox web-developper extension : it provides you with a toolbar that gives quick access to several useful options when doing frontend development.

Answer 3

For development you can add a random number to the end of the URL of your CSS & JS files. Something like:

<script type="text/javascript" src="/myscript.js?<?php echo rand(1, 200000);?>"></script>

Or

<link rel="stylesheet" href="/styles.css?<?php echo rand(1, 200000);?>">

Just don't do this on your live site, otherwise your users will download the files again on every request, making your site slower.

Answer 4

Shift Click the reload button.