Taming the Google Chrome Cache I

Preventing Chrome from caching your code

Google Chrome not always reliable when it comes to clearing its cache. In this article we'll see some ways to fix that.

MODX logo

The Problem

I like Chrome for development. I know where things are in it and I'm good at using Chrome Dev. Tools to troubleshoot issues. But Chrome is notorious for not fully clearing it's cache.

It's maddening to make changes that don't take effect, even after clearing the MODX cache. I've often had the experience of changing some bit of HTML, CSS, JavaScript or PHP code and not seeing any effect. Clearing the MODX cache has no effect. Manually removing the files in the core/cache directory has no effect. The last straw is when I write to the error log in my code and the error message doesn't show up. That's a strong clue that the browser cache is to blame.

Clearing the entire browser cache is a pain since it often removes things that make life easier on the web. Worse yet, it doesn't always work. Using Ctrl-F5 by itself often won't work. Disabling the Chrome cache in Dev. Tools sometimes won't work.

The most reliable thing is to disable the Chrome cache, leave Dev. Tools showing, and then hit Ctrl-F5, but that slows things down considerably (especially in the MODX Manager), and sometimes, even *that* doesn't work, especially when it comes to JavaScript code.

A Universal, but Flawed Solution

Here's a method that's very reliable, but a little bit of a pain to implement. Put this in your .htaccess file:

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault "access plus 1 minutes"
    ExpiresByType text/javascript "access plus 1 minutes"
    ExpiresByType text/html "access plus 1 minutes"
    ExpiresByType text/css "access plus 1 minutes"
    ExpiresByType image/gif "access plus 1 minutes"
    ExpiresByType image/png "access plus 1 minutes"
    ExpiresByType image/jpeg "access plus 1 minutes"

This has the advantage of working in any browser, though it requires the mod_expires module to be loaded. The down side is that on a live site, the browser will cache nothing for more than a minute. No JavaScript, CSS, images, HTML, or PHP will be cached. The site will be slow, not just for you, but for everyone. You'll also want to comment this section out when you're through working. It gets tiring commenting and un-commenting it over and over.

Another problem with this solution is that if you're working fast, the minute may not be up when you test your changes, and it's way too annoying to set a one-minute timer every time you load a page, then wait for it to go off before testing your changes.

Another Way

Another quick way to convince Chrome not to cache your pages is to add a query parameter to the end of the URL. Say your page is at this URL:


You can add a query parameter to the end of the URL to make Chrome think it's a different page:


Don't forget the question mark or you'll end up and the error (page-not-found) page. If the page is a MODX manager page, you usually need to add an ampersand instead of the questions mark and tack your parameter on the end, like this:



One drawback of this method is that you need to use a different number each time you reload the page. It also adds a new page to the browser cache every time you do that, possibly pushing out previously cached pages you might rather keep. To be honest, I don't know if this method prevents caching for the elements that get loaded with the page, such as CSS and JS files loaded in the code. I've never checked because the method we'll see in the next article is a much better way to go.

Coming Up

In the next article, we'll look at preventing Chrome from caching things using a handy Chrome extension.

Looking for high-quality, MODX-friendly hosting? As of May 2016, Bob's Guides is hosted at A2 hosting. (More information in the box below.)

Comments (0)

Please login to comment.