Chrome is not clearing cache - html

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.

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

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.

"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.

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

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?

Related

Html changes are not updating in chrome only

So there is some kind of caching issue going on with chrome lately.
I updated an image on a web page, but it will not update in chrome. Other browsers are fine.
Also I'm going to note that I changed the html, and gave the image a new name to force browsers to grab the updated version.
i.e image.jpg > image-v1.jpeg
How on earth does chrome not grab the updated version of this?
Anyone seen this going on lately and know of a fix.
Thanks
When you clear browsing data, make sure to check the box to clear cached images, also make sure the duration is set to "All time".
https://i.ibb.co/jzYk6DK/ex.png
If that doesn't work, try renaming the image.
If that also doesn't work, take a look at the web server configuration expiry headers, and check the duration for cached images in your format. It could be in .htaccess, or it could be elsewhere depending on if you're using apache2 or Nginx.
For anyone stumped on this kind of an issue, if you are using a web farm check to make sure DFS replication across the servers is working correctly.
It was failing for one server in my case, this is why some users got the updated version while others didn't.
to verify if replication worked, log into the servers via RDP then check the last modified date time stamps for the file(s) in question.

Having trouble clearing cache to refresh webpage

This may sound like a very basic question but I feel like I've tried everything.
This a follow-up to this post I made earlier, where I resolved the issue, only for it to come back again.
To summarize, I was making some change to the contact.css file on the contact page of my website when I noticed the changes were working offline but didn't appear online. I narrowed this issue down to a caching issue with the above post (others could see the changes but I couldn't).
In the above example I couldn't get my website to show up as background-color:blue - eventually it worked and I thought I'd fixed it... So I go to change the color back to normal and boom, it stops refreshing the changes again.
So I think it's some sort of caching issue but for the life of me I can't get my cache to clear properly so that I can refresh and see the changes.
Here are the things I have tried already:
Clearing cache (many times) on Chrome, Firefox, and Opera
Hard refresh on Chrome, Firefox, and Opera
Disabling cache through dev tools on Chrome and Firefox (this worked initially then stopped working when I re-updated the website)
Checked multiple times that the CSS file uploaded correctly and the file path was correct. This was confirmed because the correct changes were seen by other people.
Flushed my DNS
Changed from my ISPs DNS to google's 8.8.8.8 + 8.8.4.4
I'm using HostGator to host my website, I'm wondering at this point whether it's something to do with them? I really just have no idea at this point.
Here's what I see online:
Here's what I should be seeing and what I do see on the offline version of my website:
I noticed you said "I'd really like to get to the bottom of the underlying issue" so I figured I'd write an answer to provide a few options (and if anyone wants me to add others, please feel free to add a comment). Overall though, determining your root cause is likely much harder than just solving your overall problem, but let's start with possible causes that I can think of off my head:
Multiple CDN servers taking a while to update so some are returning the old data (your current session) and some are returning new (incognito)
Server session caching so when you reload the page within one http context session you get back the same content (I've seen this in product search queries for example)
The solution to this is relatively simple though, it's called cache busting. Basically, every time you update your source code just add a unique key in either the query string, file name or something to make the url unique. For example, for your css you can link https://path/to.css?v2.0.1 and just keep increasing the version number as you go. If you use webpack for your build outputs, they have a content hash variable that you can use as a token in the file names.
As for the CDNs possibly caching things out of date... the content hash solution will solve that problem as it's an entirely different file name so the CDN will go get it from the root if it doesn't have it in it's cache. I'm unsure of the url version query parameter will do the same, maybe someone else could shed some light on that.
Have you tried using Incognito in Chrome?

Dev Tools Crashing on Chrome Version 50.0.2661.102 m

So i have the following problem.
Any time i click on a request to view the headers/payload/response
i receive a not responding window.
If i wait ~2 minutes it works.
So what i receive here is a developer tools not responsive status when working on local machine.
I tried to re-install chrome. Nothing changed.
Current Version is: Version 50.0.2661.102 m listed as up to date.
Is there any possibility to get some logs or did anyone faced the same problem?
I think it can be relevant if i show what extensions i have installed.
But i tried to enable/disable them and nothing changed.
And i get the same comportment in incognito mode too.
Later edit: I somehow identified the problem. Idea is that chrome is trying to display the cookie (request headers) which was 18k characters long and it looks like this is slowing a lot developer tools and sometimes make him crash.
I just saw that in Mozilla cookies are limited to a couple of characters (display perspective) and after that they show ...
I can't find any known issues regarding this crash, so here are a couple of steps you could take:
Use the Chrome Cleanup Tool and see if that helps.
Fully clean and re-install Chrome (including deleting user folders). If it works after that, you can slowly add extensions and plugins back and see if any reintroduce the problem.

Disable Application Cache in Chrome and Safari

I’m using the AppCache in order to enable offline access for a web app. The issue is that for development every time I make a change to my JavaScript I also need to make a change to the manifest (in order to trigger a re-download of the cached field). Now I know that in FireFox you can disable the AppCache (in fact you are prompted when you first visit the page whether to grant permission to web site to store data locally) which makes it a lot more convenient for development.
My question is there a similar option for chrome and safari?
I know that I can view/Edit the AppCache in chrome via chrome://appcache-internals/, what I’m looking for is a way to disable it.
Thanks
In Chrome, use Incognito Mode. Okay, it's probably not what it was originally intended for, but it does the job. Nothing gets cached, and now developers everywhere have a handy excuse for why they might be using Incognito Mode.
I assume there's similar 'Private Browsing' functionality available in Safari.
EDIT: I see from your comment that you want to disable Cache Manifest functionality only. Try starting Chrome from a Command Line with the --disable-application-cache switch.

Are there any ASP.NET MVC Real Time View Editors?

I'm looking for a tool and I'm not even sure of the proper name. Please be patient with me as I explain.
I'm doing a lot of HTML/MVC 2 work. Using the standard MVC 2 view engine, I would like to have an editor that shows real time changes in the browser. If I re-arrange div elements containing standard HTML and some server side components, I would like the browser to update without a manual refresh.
Are there any tools that are currently available that would meet that requirement?
If you use firefox, you can use ReloadEvery plugin and set up refresh every x seconds. This will simulate real time editing.
There's an automatic refresh-on-change tool for IE. It's called ReloadIt, and is available at http://reloadit.codeplex.com . Free. It works with ASPNET MVC, or any server side technology. It does not require IIS. It does require IE.
It's not an add-on to IE, just a companion tool. It does not change the IE install, does not install a BHO or anything like that. So very low-impact installation.
You choose a URL that you'd like to auto-reload, and specify one or more directory paths to monitor for changes. Press F12 to start monitoring.
After you set it, minimize it. Then edit your content files, in whatever tool you prefer to use. When you save, the page gets reloaded. like this:
Similar to what #LukLed suggested, XRefresh is a plug in that will refresh your browser screen automatically.
Instead of refreshing every X seconds, XRefresh will watch a directory tree/set of files and only refresh when one of them changes.
It's great in multi-monitor setups, and saves a few seconds when switching between windows in single monitor setups.