Chrome DevTools: Empty Cache and Hard Reload

When I wrote plugins and themes I sometimes have a peculiarity when loading them in browsers. When I made changes in styles, the changes are not loaded even though I have saved them and there is no error. At first when I got this peculiarity I was frustrated searching for the errors in my codes.

As it turns out there is a feature in browsers where they cache the styles from pages that they have opened. This is actually a very good feature as when you visit a website for a first time it might get slow as the browser download all the require files for the website. But after that the website can get more faster as the downloaded files are saved in the browser's cache. However when you are developing plugins or themes and made a lot of changes this might hinders you.

Fortunately we can just clear the cache in the browsers, then the files on the website which we develop will be downloaded again. This will in-effect show the changes you made on the website.

I usually use Chrome to test my WordPress site in development. To clear the cache you can just open the DevTools or right click then inspect on the web page you want to test. Right click on the refresh button. There will be some choices here, just choose the 'Empty Cache and Hard Reload' then the style changes will be implemented.

Or the shortcut cmd + shift + r

For other browsers there are also a similar feature you can try to look for it in the reference below.


WordPress Codex: I Make Changes but Nothing Happens

Chrome not loading new styles after css update

Chrome not showing updated page