Disabling cache selectively for development on Chrome

Question

Is there any way to disable the cache on Google Chrome for certain aspects only, in such a way that images for instance remain cached but markup/js/css don't?

I'm working on a rather graphic intensive app, and the images when not cached add a good half a second to the loading time of the page, which is a pain if you need to constantly refresh to test code changes and unnecesary if these images don't change as often as the html/js/css does.

Answer 1

in your webservers .htaccess put

 <FilesMatch "(?i)^.*\.(js|css)$">
    ExpiresActive On
    ExpiresDefault 0
 </FilesMatch>

This should ensure that JS and CSS files are not cached by your browser.

Then you should use mod_pagespeed ExtendCache on the web server too, feature. It will allow your images to be sent with the right header information.

Once this is done on your development server (or whatever it is) the CSS/JS files should re-download on each page load but images will only be re-downloaded if forced. Also, make sure your local cache size is nice and big in Chrome's Preferences (you can also simply turn the images off here which is what I'd do)