19

I am working on a new site and whenever I change CSS settings chrome will not accept those changes unless I close out of chrome completely with Task manager and relaunch it. I have a tried quite a few things. Below is a list of things I've tried:

  • Versioning the CSS file (I am using a PHP date stamp at the end of the CSS file
  • Enabling "Clear Cache while developer window is open" in the Developer console
  • Using Ctrl + F5 to clear cache on refresh
  • Going to Application and Clear Storage in the developer Console
  • Clearing Cache folder in local AppData
  • Deleting CSS file from stie, refreshing, and readding file.
  • Incognito mode
  • Adding Launch options to chrome shortcut --disk-cache-dir=null
  • Adding Browser Plugins to delete cache.

Anyone have any ideas how to help? It is extremely annoying and inefficient to close chrome every time I want to check a CSS change. Another annoyance is that I am trying to listen to music in the browser so if I close chrome I have to go back and get my music playing again and it's just as of now extremely annoying and way more time consuming than I want.

I've tried looking at other articles online about cache busting and other articles on Stack Overflow but I've tried to do most of what they suggest and I haven't seen any positive outcome yet. Most articles say to add some sort of random string or version on the end of the CSS file as a GET request but that isn't working though I know that has worked for me in the past.

AndyPet74
  • 659
  • 2
  • 7
  • 24
  • I agree, and right now I am but it is still extremely inefficient to close chrome (with task manager as just closing doesn't actually reset anything as some of the processes still run) and then wait for it to reopen and go back to the page just to see if the change is coming across correctly. I have to do this every time I want to change CSS. It's hard to try and make the changes with the CSS editor in Developer tools and then go make the changes in the actual code and get everything working perfectly first time. – AndyPet74 Dec 19 '16 at 17:22
  • When loading the page, can you look under the Network tab in the developer console and see if the stylesheet request says `(from disk cache)` or `(from memory cache)` to help us narrow down what chrome is actually doing – Mike Dec 19 '16 at 17:23
  • When I click on it in the Network tab and look into the Request headers it says the following: `Cache-Control: No-cache` and `Pragma: no-cache` Connection is `Keep-alive`. I don't see any text saying `(from disk cache)` or `(from memory cache)` – AndyPet74 Dec 19 '16 at 17:30
  • Yes, it's a pain... in my experience only IE or Edge (latest version) will clear caches correctly (as long as you tick 'refresh every time I visit page' in Settings). This is why I use IE for development work - I use 11, but 9+ should do. All are now so compatible with other mainstream browsers that you no longer have to worry too much about anomalies. – Tony Duffill Dec 19 '16 at 17:42
  • The main reason I am not using edge/explorer at this point is becasue I have had older project simply not work in explorer/edge but work fine in Firefox, chrome or safari. I will try it at least for CSS and see if that does the trick. I have IE 11 installed so I will give it a shot and see if this will do the trick. – AndyPet74 Dec 19 '16 at 17:46
  • Internet Explorer also seems to not take the change until I close it and reopen it. I did make sure in my settings it says to refresh every time I visit instead of automatically. – AndyPet74 Dec 19 '16 at 17:54

5 Answers5

17

pres f12 > f1 > network > disable cache (while DevTools is open). This should solve your problem

Pizza lord - on strike
  • 759
  • 10
  • 22
9

Development server was running various caching tools though they should have been turned off. After disabling them chrome started to work better and most of the time CTRL+F5 did the trick.

AndyPet74
  • 659
  • 2
  • 7
  • 24
  • Came here because i was having same issue and drove me nuts - this answer needs to be WAY higher and marked better - came across this after to fix my personal issue - https://stackoverflow.com/questions/19073270/stop-caching-for-php-5-5-3-in-mamp – Dan Mar 06 '19 at 00:11
2

"clearing cache" is not as easy as it should be. Instead of clearing cache on my browsers, I realized that "touching" the server files cached will actually change the date and time of the source file cached on the server (Tested on Edge, Chrome and Firefox) and most browsers will automatically download the most current fresh copy of whats on your server (code, graphics any multimedia too). I suggest you just copy the most current scripts on the server and "do the touch thing" solution before your program runs, so it will change the date of all your problem files to a most current date and time, then it downloads a fresh copy to your browser:

  <?php
    touch('/www/sample/file1.css');
    touch('/www/sample/file2.css');
    touch('/www/sample/file2.css');
   ?>

then ... the rest of your program...

It took me some time to resolve this issue (as many browsers act differently to different commands, but they all check time of files and compare to your downloaded copy in your browser, if different date and time, will do the refresh), If you can't go the supposed right way, there is always another usable and better solution to it. Best Regards and happy camping. By the way touch(); or alternatives work in many programming languages inclusive in javascript bash sh php and you can include or call them in html.

Luis H Cabrejo
  • 302
  • 1
  • 8
1

I used to have the same problem, and I believe it's a (pretty annoying) bug with chrome. You can use the CSS Reloader Chrome Extension to solve it. Not ideal, but better

Stormhashe
  • 704
  • 6
  • 16
  • It doesn't seem to work. Like all the other methods it still still shows an older version of CSS then the css that is currently on the web server. I am looking at the network tab in Developer tools and it shows that the plugin does load in a new version but it has all the same CSS as the current version of CSS on the page. – AndyPet74 Dec 19 '16 at 18:02
0

If you are trying out new CSS updates, I suggest using Chrome's "Inspect" function to dynamically update CSS settings and observe the results interactively. This may save some time during update cycles as compared to manual edits alone.

Another option to try is to define "cache-control" meta tags in your head section. For development/testing, you may want to have no caching. For a real website, you may want to have a shorter age limit. Refer to the following SO Q&A.

Using meta tags to turn of caching in all browsers?

Community
  • 1
  • 1
JohnH
  • 1,920
  • 4
  • 25
  • 32
  • This is pretty much what I have been doing however this is still an extreme annoyance as one I find new CSS settings that are what I want and I go to change HTML/PHP I have to refresh the page to see them and it goes back to broken CSS until I spent a couple minutes to go reset those values in the css. – AndyPet74 Dec 20 '16 at 14:41
  • Is it this line: `` – AndyPet74 Dec 21 '16 at 16:12
  • Yes, that is one of several meta tags referenced in the SO link. – JohnH Dec 21 '16 at 17:39
  • 1
    I am pretty sure at this point it may just be a chrome issue. Not sure though. – AndyPet74 Dec 21 '16 at 18:26