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