Force browser to refresh css, javascript, etc

Question

I'm developing a website based on Wordpress source code through XAMPP. Sometimes I change the CSS code, scrips or something else and I notice my browser takes time to apply the modifications. This leads me to use multiple browsers to refresh one and if doesn't apply the new styles I try the second one and it's always this.

There is some way of avoiding this problem? Sometimes I'm changing code without notice the previous modifications.

Answer 1

Try this:

link href="styles/style.css?=time()" rel="stylesheet" type="text/css"

If you need something after the '?' that is different every time the page is accessed then the time() will do it. Leaving this in your code permanently is not really a good idea since it will only slow down page loading and probably isn't necessary.

I've found that forcing a style sheet refresh is helpful if you've made extensive changes to a page's layout and accessing the new style sheet is vital to having something sensible appear on the screen.

Answer 2

The accepted answer above is correct. If, however, you only want to reload the cache periodically, and you are using Firefox, the Web Developer tools (under the Tools menu item as of November 2015) provides a Network option. This includes a Reload button. Select the Reload for a once off cache reset.

Answer 3

You can turn off caching with Firefox's web developer toolbar.

Answer 4

I have decided that since browsers do not check for new versions of css and js files, I rename my css and js directories whenever I make a change. I use css1 to css9 and js1 to js9 as the directory names. When I get to 9, I next start over at 1. It is a pain, but it works perfectly every time. It is ridiculous to have to tell users to type .

Answer 5

<script src="foo.js?<?php echo date('YmdHis',filemtime('foo.js'));?>"></script>

It will refresh if modify.

Answer 6

If you want to avoid that on client side you can add something like ?v=1.x to css file link, when the file content is changed. for example if there was <link rel="stylesheet" type="text/css" href="css-file-name.css"> you can change it to <link rel="stylesheet" type="text/css" href="css-file-name.css?v=1.1"> this will bypass caching.