Disabling cache for web development

14 March 2018

How to disable caching on web browsers during development.

Caching on web browsers can be counterproductive during development. Firefox, Safari and Edge are F5 friendly and correctly reload modified external files. But Chrome is more aggressive with caching, and requires either a hard reload on desktop, or a manual cache dump on Android.

Disabling the cache with the developer tools isn’t good enough:

• It’s browser specific,
• It only works while the developer tools are open,
• It isn’t an option on mobile.

But there is a solution! Instead of looking at the browser side, we can disable caching server side.

During development, we can use a local server like http-server, which is a node.js based web server that can be started from any directory with one command line:

http-server -c-1

• http-server launches the server.
• -c-1 disables the cache.

No more keeping the dev tools open, or force reloading a page, or manually clearing the cache on Chrome for Android!

Links

• Node.js. Download and install Node.js.
• http-server. Install http-server by running the appropriate npm command.