Google chrome css doesn't update unless clear cache

Question

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?

Vitalii Petrychuk · Accepted Answer · 2015-10-28T10:57:53.037

117

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

edited Oct 28 '15 at 10:57

answered Nov 30 '13 at 12:48

Vitalii Petrychuk

14,035
8
51
55

1

This is the only thing that worked for me to see changes in @imported css files. – ThomasPeeters Oct 23 '15 at 07:16
4

Thank you! This has been driving me crazy for months! – MTAdmin Mar 03 '17 at 17:47
2

If I push the css changes over live server, then it does not appears until we refresh the cache, how to resolve this issue? I mean the public users don't know about the changes. – Irfan Ahmed Apr 28 '17 at 15:03
Thank you for this! GC drives me nuts with the aggresive cacheing – professorDante Apr 28 '17 at 16:48
1

The strangest thing was happening while I was experiencing this annoyance...Some of the margin, padding, spacing changes I was making to the css file was actually verifiable when I refreshed the page, however just not all of the changes. Changing the setting as noted here was exactly what I needed. Thank you very much! – Brien Foss May 06 '17 at 04:36
3

just FYI, it's a checkbox at the top right corner (under network section). – Walty Yeung May 13 '17 at 00:53
1

The "clear your cache" and "disable cache in dev tools" solutions only help the developer. It doesn't help the user community. I can't tell everyone in the user community to "clear your cache." I have petitioned Google for YEARS to please move "Disable Cache" into the Settings menu where Group Policy can ensure that it is enabled. It falls on deaf ears at Google, unfortunately. – KWallace Nov 01 '20 at 19:54

score 51 · Answer 2 · answered Nov 30 '13 at 12:59

51

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

answered Nov 30 '13 at 12:59

Julien F.

645
4
7

2

CMD - SHFT - R on a mac – Gerrit B Dec 13 '18 at 18:52

score 11 · Answer 3 · answered Mar 04 '20 at 09:40

11

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.

answered Mar 04 '20 at 09:40

SylvainB2347

349
3
7

Simple and effective. Best of all it has kind of a similar "Versioning" method for future updates. Couldn't believe the trouble I had updating a simple CSS file! – Anthony Griggs May 19 '20 at 21:33
Having issues with subsequent deployments. This method is a nice solution I can centralize in my base web page class for all files. such as appending the build date of the DLL so they only change when the application is recompiled and deployed. `` Should work for script files with the same issue too. – DarrenMB Dec 09 '20 at 16:50

score 10 · Answer 4 · answered Oct 10 '16 at 18:19

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.

In 2017, this helped me in actually locating the setting – Anupam Jan 30 '17 at 08:31 — Anupam, Jan 30 '17 at 08:31

score 8 · Answer 5 · edited May 23 '17 at 12:26

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 :)

score 2 · Answer 6 · answered Mar 04 '19 at 14:44

2

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.

answered Mar 04 '19 at 14:44

Kendevman

21
1

score 1 · Answer 7 · edited Aug 09 '20 at 18:27

1

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

edited Aug 09 '20 at 18:27

Willy satrio nugroho

908
1
16
27

answered Mar 25 '17 at 14:53

Asep Saepuloh

29
4

doesn't help me at all... :( – Just Me Jun 10 '21 at 08:24

score 1 · Answer 8 · answered Nov 01 '17 at 04:21

1

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

answered Nov 01 '17 at 04:21

pcodex

1,812
15
16

score 1 · Answer 9 · answered May 04 '22 at 12:16

1

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:

answered May 04 '22 at 12:16

equivalent8

13,754
8
81
109

score 0 · Answer 10 · answered Jan 12 '23 at 08:12

I like the solution of SylvainB2347 with adding some parameter to the include statement. This really makes Chrome to reload the resource as it assumes it must have changed.
I just wanted to optimize this solution a little, to make it automatic but not breaking the caching principle.

My solution is to use the PHP function filemtime(filename) which returns the timestamp of last content modification. I use it as:

<link rel="stylesheet" href="/index.css?foo=<?php echo filemtime("index.css"); ?>">

which produces this in HTML:

<link rel="stylesheet" href="/index.css?foo=1673508035">

When I modify index.css, the timestamp changes. This way the browser is forced to reload the resource only if it's been modified since the last visit. And I don't have to rewrite anything manually.

Google chrome css doesn't update unless clear cache

10 Answers10

Linked