While working on my Hugo template, I noticed that my CSS files were not updating on my Chrome browser. Initially, I thought the CSS file was not updating on my server because the CSS file did not change when I accessed the file directly through my Chrome browser.

After I checked the CSS file via FTPing the server, I noticed that the CSS files has been updating on the server-side. I then knew that the issue was with my Chrome browser.

Browser caching saves resources (especially bandwidth) both on the browser side and on the server-side. Usually, browser caching does not hinder the user’s browsing experience. However, the browser caching feature in Chrome was interfering with my CSS development because I could not see my most recent CSS changes reflected on my website.

It seems Chrome likes to cache CSS files, most likely because CSS files usually do not change often. After some quick Google searches, I was able to find a quick solution to stop browser caching on Chrome temporarily.

1. Open DevTools either by (1) right-clicking anywhere on the webpage, and click Inspect; or (2) pressing F12 key on the keyboard.
2. Open Settings either by (1) left-clicking the settings icon on the top right-hand side of the newly open window; or (2) pressing F1 key on the keyboard.
3. Scroll down until you see Disable cache (while DevTools is open). Make sure that this option is checked.

After following these steps, Chrome will not explicitly do browser caching while DevTools is open.

Citation

Google chrome css doesn’t update unless clear cache, Stack Exchange (Nov. 30, 2013), https://stackoverflow.com/questions/20300400/google-chrome-css-doesnt-update-unless-clear-cache.