Google chrome css doesn't update unless clear cache

Css Problem Overview

I'm trying to work in my local server but I have to clear my cache every time if I want to see changes on the css rules.

There is any way to control Google Chrome cache?

Css Solutions

Solution 1 - Css

Open DevTools
Open Settings (bottom right or use F1 shortcut)
Check Disable cache (while DevTools is open)

https://developers.google.com/chrome-developer-tools/docs/settings#general

Solution 2 - Css

CTRL+F5 : to refresh the page by clearing GG chrome cache.

Solution 3 - Css

Open up your Developer Tools then click the icon on the top right

In settings --> preferences scroll down to find "Disable cache (while DevTools is open)" and click on the box to select the option.

If you are still having the problem, and the page works on other browsers, then the easy fix could be to just uninstall Google Chrome and do a fresh install of the latest version. I ran into this problem and it was the best fix instead of the headache of tracking down a complicated fix or outdated posts that no longer work. After you have Chrome reinstalled, repeat the steps above to disable cache.

Solution 4 - Css

You can do any of the following options:-

Install a Chrome Extension like Clear Cache to clear cache by clicking on icon.
Use Incognito Mode and browser your website in incognito mode. Incognito mode won't disable cache clearly. Disabling cache completely may slow down your browsing experience.
Use chrome's features like Hard Reload (Clear cache and hard reload). Read this stackoverflow post
As @Vitaly mentioned, Use Developer Tool settings to disable cache completely.

Choose what fits you :)

Solution 5 - Css

Following this solution here helped me reloading the css : https://wpreset.com/force-reload-cached-css/

Instead of requesting the file doing the following :

<link rel="stylesheet" href="~/css/variabledocument.css" type="text/css" />

Request id by adding a parameter (the name of the parameter doesn't matter) at the end of the file :

<link rel="stylesheet" href="~/css/variabledocument.css?refreshcss=1" type="text/css" />

This will request the new css file. Whenever you make a change to your css file, you just have to change either the parameter name, value or both and the server will request it again.

This is very useful when you have no control over the browsers of your clients and it requests no action on their part.

Solution 6 - Css

More tools > Developer Tools
Then right click the refresh button on the browser.
You will get three options. Select "Empty Cache and Hard Reload".

This will only impact the active tab.

Solution 7 - Css

To Control Google Chrome Cache you can do following steps:

Disable the cache (while DevTools is open)
Close the Chrome Browser
Clear the Cache with a cleaner software (such as CC Cleaner)
Open Chrome browser

Solution 8 - Css

Shift-F5 to reload the page worked for me on Chrome 61.0.3163.100

Solution 9 - Css

Just to elaborate on JGallardo's answer above in 2022 In Chrome version 100.0.4896.88 in order to Disable the cache (while DevTools is open) the setting looks like this:

Content Type	Original Author	Original Content on Stackoverflow
Question	Marchy	View Question on Stackoverflow
Solution 1 - Css	Vitalii Petrychuk	View Answer on Stackoverflow
Solution 2 - Css	Julien F.	View Answer on Stackoverflow
Solution 3 - Css	JGallardo	View Answer on Stackoverflow
Solution 4 - Css	Sachin	View Answer on Stackoverflow
Solution 5 - Css	SylvainB2347	View Answer on Stackoverflow
Solution 6 - Css	Kendevman	View Answer on Stackoverflow
Solution 7 - Css	Asep Saepuloh	View Answer on Stackoverflow
Solution 8 - Css	pcodex	View Answer on Stackoverflow
Solution 9 - Css	equivalent8	View Answer on Stackoverflow