Skip to content

Browsers, caches and web page changes

Browsers cache data whenever you load a page. In general, this is a good thing—you'll save data transfer (very important on mobile), and increase speed on any connection if the browser can use data that it's already cached.

But there's one place I hate browser cache: When creating or editing web pages. I'll edit a file, save the changes, upload the new file, load the page…and nothing. So I edit again, repeat, still nothing. Only then do I remember the cache. Argh!

Thankfully, there are ways around (most) cache issues. I do most of my web development in Chrome and Safari; here are the simple tips I use to manage cache in those browsers when developing.

Safari

  • Enable the Developer menu (Prefs > Advanced > Show Develop menu in menu bar).

  • Once enabled, use the Developer menu to easily empty the cache via the Empty Caches menu item, which is bound to the keyboard via ⌘⌥E.

  • Also in the Developer menu, you can completely disable the cache with the Disable Caches menu item. This is what I do when developing—just remember to enable them again when you're done, or you'll find browsing quite slow.

  • To force a single page to completely reload, hold down the Option key and click on the reload icon in the URL bar.

Chrome

  • Pressing ⇧⌘R force reloads a page, clearing that page's cache.
  • You can clear all of Chrome's cache by opening its settings and typing cache in the search box (or click the Show Advanced settings link at the bottom of the page). Then click Clear browsing data and a dialog will appear with a bunch of options; uncheck all but Cached images and files to clear the cache. But that's a huge pain…

  • If you use Chrome's developer tools, you can disable cache whenever they're open. Right click on any portion of a web page and choose Inspect from the pop-up menu. Once the Developer Tools open, click on the Network entry in the tab bar and check the Disable cache box.

    This setting should stick across uses of the developer tools, but cache will only be disabled when the developer tools are open.

  • It's possible to launch Chrome with cache disabled, but you'll need to use Terminal to do so. Assuming Chrome is installed in the top-level Applications folder, this command will launch it with cache disabled:

    /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --disk-cache-dir=/dev/null

    I don't like doing this, as I'm inclined to forget I launched it with cache disabled.

Firefox

There are similar tips for Firefox, but I haven't done much developing with it in many years.

Cache beyond the browser

There may also be caches above the browser—your web host might use OPcache, which caches PHP files on the server, for example. Ours does, and not seeing changes when I modified a PHP file was driving me crazy.

To solve this, I now have a one-line PHP file on our server:

<?php
opcache_reset();

This function resets the OPcache cache file; I call it from a simple Keyboard Maestro macro that uses curl to run that code (so I don't need to open a new browser window), then sends the ⌘R keystroke to reload the current page, now with the cache cleared:

When developing or editing pages, I use ⌃⌥F probably more often than any other browser keyboard shortcut.

Beyond OPcache, there are possible caches at the web server level that you may or may not be able to do anything about—if you find your files are still cached after trying these tips, you may want to speak to your web host to find out what other cache systems they use.