Technology and design in plain language.

One of the biggest hassles when trying to track down and squash bugs in a large-scale production environment is dealing with multiple layers of caching. Many of the sites I work on are at least three layers deep: a content delivery network (like Limelight or Akamai), server level file caching (like the W3 Total Cache plugin for WordPress) and the browser’s cache. Forgetting to clear one of those layers has often resulted in lots of time spent trying to debug a problem that’s already been fixed.

Anyhow, I put together a bookmarklet that helps make dealing with this a little less painful. A pretty typical way of getting around a cache is by adding a random query string to the end of the url; this usually bypasses most caches and gives you a “fresh” version of the page. So I put together a simple bookmarklet that reloads the current page your on with a time-stamped query string—resulting in a “fresh” version you can check for problems before purging the old caches.

Nutshell: this bookmarklet reloads your page with a unique query string:

Bust Cache

You know the drill: drag it to your bookmark toolbar and click for a minty burst of freshness.

But that bookmarklet is more of a convenience to save you from having to come up with a random string every time. The real headache is when a CDN caches your scripts or stylesheets. Why? Because even if you bring up a fresh version of your page, it’s still calling to the same CSS or Javascript file as the last iteration of your page. And if you’ve made changes to those stylesheets or scripts, you’re not going to see those updates unless you clear the CDN cache or append a query string to those javascript or stylesheet includes.

I looked around for a solution to this and found Jason Beaird’s CSS Cache Busting bookmarklet which proved to be a good starting point, but had to rewrite it to include scripts since I’m constantly getting frustrated with cached scripts as well.

Nutshell: this bookmarklet adds a unique query string to all of the included scripts and stylesheets on your page:

Bust Cache: JS/CSS

Please take, use, enjoy—hopefully this saves you some time. If you have any feedback or cool tweaks, feel free to post them in the comments!