When developing a website in Chrome, you may need to refresh the page after making adjustments and changes to CSS and JavaScript files. You probably knows that a standard refresh may not yield the expected results, as Chrome might use cached versions of embedded resources rather than the latest ones from the server. To overcome this, I usually use the “Hard Reload” feature, accessible via the menu that appears when you right-click the reload button. However, this menu isn’t always visible, which can lead to to a lot of confusion. Let’s explore how to bring it back when it disappears.
How to restore the reload menu?
This menu appears only when the Chrome browser is in ‘Developer Tools’ mode. To view the refresh menu, open ‘Developer Tools’. You can do this by pressing F12 or by going to View > Developer > Developer tools. With the Developer tools pane open, right-click the reload button to see the options menu with the “hard reload” action.
Reloads actions in Chrome for web developers
The menu offers two additional refresh actions beyond the ‘Hard Reload’ action: ‘Normal Reload’ and ‘Empty Cache and Hard Reload’. Each of these actions functions differently.
Normal Reload
A ‘Normal Reload’ is a conventional method of refreshing a webpage that is commonly used by individuals who are not web developers. This action is typically initiated by clicking on the reload button. During a ‘Normal Reload’, the browser communicates with the server to retrieve the most recent version of the webpage. Along with this, it also attempts to pull any embedded elements such as stylesheets, scripts or images from its local cache. This process is guided by the ‘expires’ headers that the server sends when these resources were first fetched and subsequently stored in the cache.
Hard Reload
On the other hand, a ‘Hard Reload’ takes this process a step further. This refresh method prompts the browser to fetch all of the webpage’s resources directly from the server, irrespective of their current cache status. This means that even if a resource has been previously stored in the cache, a ‘Hard Reload’ will still retrieve a fresh copy from the server.
Empty Cache and Hard Reload
Lastly, the ‘Empty Cache and Hard Reload’ method goes beyond both the ‘Normal Reload’ and ‘Hard Reload’ methods. Prior to retrieving the webpage from the server, this method instructs the browser to completely discard its current cache. As a result, all resources, regardless of their previous cache status, are freshly fetched from the server. This ensures that the user is viewing the most current version of the webpage and its resources, free of any potential cache-related issues.
