How to do a hard refresh for Chrome, Safari, Firefox, IE or Edge

Every web developer knows this pain: you deploy your CSS changes, refresh the page, and... nothing. The old styles are still showing. Your browser is stubbornly serving cached files. A hard refresh forces the browser to re-download everything from the server instead of loading from its local cache.

I look this up more often than I'd like to admit, so here's my quick reference.

TL;DR: Browser Hard Refresh in Google Chrome, Safari, Mozilla Firefox, Internet Explorer and Microsoft Edge. A quick reference guide for clearing cache on all major browsers.

Keyboard Shortcuts

Google Chrome

• Windows/Linux: Ctrl + Shift + R or Ctrl + F5
• Mac: Cmd + Shift + R

Mozilla Firefox

• Windows/Linux: Ctrl + Shift + R or Ctrl + F5
• Mac: Cmd + Shift + R

Safari

• Mac: Cmd + Option + R

Note: You may need to enable the Develop menu first. Go to Safari > Preferences > Advanced and check "Show Develop menu in menu bar."

Microsoft Edge

• Windows: Ctrl + Shift + R or Ctrl + F5

Internet Explorer

• Windows: Ctrl + F5

When to Use Hard Refresh

The most common scenario is when you're a web developer and you've just deployed CSS or JavaScript changes to your website. Your browser may still be serving the old cached version. A hard refresh forces it to download the fresh files from the server.

If a hard refresh doesn't work, try clearing your browser cache entirely or opening the page in an Incognito/Private window.

Sources

1. Chrome DevTools Documentation
2. MDN Web Docs — HTTP Caching
3. MDN Web Docs