We Keep Coding

What's the ultimate and definitive way to clear the browser cache?

I'm using Liferay CMS as part of my Uni course in full stack development and, as a final project, I have to use the d3.js library to display some graphs. I'm struggling to clear the browser cache though, and that makes the developing process very tedious and time consuming: I'd like to see my front-end changes right away without having to fiddle with the browser cache, especially because, as I'm working with svg elements, it sometimes gets tricky to line up stuff and so on. Sometimes clearing the cache works, sometimes it doesn't, as well as opening a new private window, but there must be a conclusive and foolproof method to delete all cached elements. Does somebody know how to do that?

Liferay has a "Developer Mode" which should bypass quite a lot of caching anyway. In your portal-ext.properties (typically in ${liferay.home}, just add the line
include-and-override=portal-developer.properties
to activate this mode.
It will also skip minifiers and concatenation of all of the different resources that you're loading.

This doesn't clear caches but will solve your updating problem.
In the HTML, add an (unused) query string to the html link to linked files and alter it each time you make an update to the file. e.g. for css:
<link rel="stylesheet" href="styles.css?a">
Then, each time you make changes to the file pointed to, change the 'a' to 'b' or anything (Don't change the linked file's name, the query string will be ignored).
This forces the browser to 'change' the linked file each time the href changes and so the altered file gets reloaded.
The method will work for script and other linked files. The query string could be something meaningful such as version numbers - ?v1, but anything will do.
Edit, as noted by #GerardoFurtado, a further discussion of this idea is available here Cache busting via params

caching using Javascript

I am using IE 7.0. I want to clear the cache for every new request. So i need java script code for clear the cache. In IE i am using one setting to fix the caching issues. This is location:
Tools-Internet Options-Browsing History Settings-Every time i visit the web page-Ok.
It works fine for the current IE browser. Now I need to implement this concept using Java script. Please suggest me.
Response.Buffer = False
Response.CacheControl = "no-cache"
I tried, but not working.

You can't clear the cache using JavaScript. You can, however, trick the browser into thinking the page is different than what is stored in the cache by appending a number to the end of the URL.
So, for example, if you want to ensure that the browser is using your latest JS, append a number to the end of the source attribute (a different number will be needed each time you wish to "trick" the browser caching):
<script src="myScript.js?1" />
If you want to clear the cache for the entire page, you need to be asking a different question: How to control caching with [enter server-side language here]?
Note: Your new question, if needed, should be asked in a new question on SO.

What does the "?" sign mean in a request for a static JS file?

I've seen that a lot and I just don't know what it means. This, for example:
<script src="http://server.com/file.js?y=2345678" type="text/javascript"></script>
If it is in deed possible to 'catch' the value of 'y' in the javascript file, how would that be?
Thank you.
PS. I know what mod_rewrite is and that is not the answer, just in case :)

This is to force the browser not to cache the file, by making it believe that it is a dynamic file with get parameter rather than a static one.

This is often used to facilitate caching of the JS file. You set a far-future Expires header which means the browser may cache it for a very long time. If you change something in the file you also update the number in the querystring, which will make the browser refetch the file. This works because caching is for unique filenames and the querystring is part of the filename (as far as the browser is concerned).
A similar approach to this is to use rewrite rules in the web server to have some part of the file name which it doesnät care about. Here's a Nginx rule to show what I mean:
rewrite ^/style\..*\.css$ /style.css;
I use this rule to have filenames like style.42750cad6.css, which always points to the file style.css. The text in the middle is changed whenever I change style.css. The difference between the first approach is that this does not use the querystring so the caching will work in more browsers.

ok the way i see it in two ways.
it can be used to load js without caching
for every request to the server, the server might log information(if logging is enabled), if i am using it for analytics i can therefore use a different parameter for locations and from the log i can analyse and get required details.

Force a script refresh using the "yepnope" JavaScript script loader

Using yepnope.js. I need to "refresh" the script, but yepnope prevents files with the same url from being re-loaded.
In the documentation, they suggest using a plugin to allow files to refresh. Is there such a plugin available? What are my other options for refreshing a script during runtime in Javascript?
I tried appending a random number as a query argument to the url. That worked, but made it much more difficult to set breakpoints while debugging, so I'd rather not do this.
Any suggestions? Thanks!

IMHO it is not possible do that using any yepnope method.
I think you only has two possibilities:
Adding a random parameter to the querystring (your current solution)
Changing the yepnope script to:
expose the scriptCache yepnope var
reset the scriptCache[url]
and finally remove the created DOM img node that has your url as src.
In addition set the cache headers to expired, to prevent browser cache.
good luck

Is there any way to clear browser cache using js, atleast my domain related files?

I have a list of js files, css and images which doesn't need to load from server every time, but if there is any update in files or bug fixes, only during that time I want to replace the files from browser cache, I know there is no access to browser cache, but is there any other ways to do so? My application will be used by specific users (known people), where I can install any program in their system, can anybody suggest me efficient way to do so? I don't want to load the files every time from server by setting 'no-cache'.

The most effective way to force the browser to refresh certain files at certain times is to add an arbitrary extra query string to the link:
<script type="text/javascript" src="http://mywebsite.com/js/scripttoload.js"></script>
then change to:
<script type="text/javascript" src="http://mywebsite.com/js/scripttoload.js?V=2"></script>
Next time the page is requested the browser will think this is a new file. There are loads of other ways with headers etc but this works well

No, there isn't.
Javascript doesn't have access to the cache - the browser doesn't expose this information to the javascript engine.

A commonly-used trick is to set the cache for the files to last for ages, so that they aren't requested again. However, when you want them to be updated, you can append a timestamp to the filename after a question mark. EG:
<link rel="stylesheet" href="style.css?123211212"/>
Every time the number changes, the browser thinks it's a different file and will re-download it. If the number doesn't change, then it uses the cached version.

What I do is, as part of the build process, rename all the statically referenced files to something involving their md5 hash. Then I set the headers so that they're cached for the max possible time. As soon as they change, they get a new name, so there's never an issue.