Caching: The Good, The Bad, and The Annoying
Caching is a necessary evil. It improves web performance in ways we probably don’t even realize on a day-to-day basis. It reduces web traffic in the simplest and most fundamental way possible; it avoids transferring anything at all.
Chrome’s Network Panel
While in chrome, open the developer tools. Find it under Menu > More Tools > Developer Tools. For shortcuts use Cmd + Opt + I on a Mac or F12 on Windows.
Once the developer tools are open, there is a set of tabs along the top. Select network.
Along the top of the network panel, there’s a checkbox that says “Disable Caching.” This disables browser-level caching, but only as long as the DevTools are open. So it won’t affect your normal browsing, but while working with the developer tools you won’t have to worry about stale content.
Safari’s Develop Menu
If you haven’t already enable the Develop menu on Safari, with Safari open use the menu to go to Safari > Preferences…. One the preferences window select the Advanced tab. At the bottom there is a checkbox to enable the Develop menu.
To disable caching in Safari toggle the menu item under Develop > Disable Caches.
Firefox’s Toolbox Options
Open developer tools with Cmd + Alt + I on Mac or Ctrl + Alt + Shift + I on Windows.
Select the little gear icon near the top right of the developer tools window to open the options for the developer tools.
Under Advanced Settings select Disable Cache (while toolbox is open). Similar to Chrome, Firefox only disables caching while the developer tools are open, so this won’t change anything for your normal browsing experience.
Caching Issues Solved
Hopefully this solves your innapropriate browser caching issues during development. Setting up proper caching for production is another issue entirely… but the mechanisms for dealing with that depend on your Web Server, and also how you need it to behave for your particular application.