I don't know if it's happened to someone else, but I have a django application that only shows the styles created in css only when it's in incognito mode, when the browser is in normal mode you can't see the changes created in css.
what would cause the problem? and how can i fix it?
Try to clear your browser cache, I think that should help you.
Steps to clear cache and hard reload on chrome:
1. open the website
2. Inspect the page
3. Right-click on the refresh button near the URL bar
4. Click on 'Empty Cache and Hard Reload'
It may be due to caching. The incognito mode is not cached and hence you can see the changes. One of the ways could be is to use version as a query param in your CSS URL to bluff the browser and ask them to fetch each time you change the number. Like
<link rel="stylesheet" type="text/css" href="/site_media/css/style.css?version=1" />
you can change the number of version after each edit
Sometimes browsers cache your website. But in incognito mode, the browser doesn't cache your history and searches.
To remove your cache, follow these steps:
Right click and inspect
Hover over the reload button near the url box
Right click on reload button
Click on "Empty cache and hard reload"
This is most likely due to Cache. Due to caching, you're seeing an old version of your styles (CSS).
In incognito mode, this is not a problem because Chrome uses a fresh cache when you start a session and removes that cache when you end the session.
You can solve your problem by clearing your cache.
OR
Disable cache in your browser.
Related
I have an Angular application with CSS in it.I have recently changed the CSS and deployed it on server but it is not getting reflected in the client machines.
I have done the following things:
Clear cache and did a hard refresh (Ctrl+f5).
Changed the version number of the CSS file and redeployed it.
Opened developer tools and disabled Cache and reloaded.
Pressed F12, go to source and checked the CSS file if new changes are getting loaded. New changes are there.
When I opened the web application in a new machine, the new changes are getting reflected.
When can be the possible reason for CSS not getting reflected even after checking all the above. Is there anything which I'm missing?
is it a PWA (progressive web app)... ? in which case the data is served by service worker and not freshly fetched.
Go to
Chrome developer tools (press F12)...
Click on Application tab on
the left navigation, click on "Service workers" and 'unregister"
service workers...
going on the next option in the left navigation, click on "Clear storage"...
click on the "Clear site data" button on the right zone restart Chrome and check with Ctrl+shift+R
if you're using a CDN, you may have to purge the cache for this particular CSS file from there as well.
Make hard refresh (Ctrl+Shift+R)
or go to view page source and the open css file from it and make it refresh and then again make hard refresh...Your problem will be solved
Please clear the browser history of the application complete from begin and perform hard refresh and then try to login to your application
You can disable cache in development tool in chrome.
Go to Developer tool in Chrome by pressing F12, Network-> click on Disable Cache
I faced similar issue. This helped me. Hope it might help some one
So when editing my website I noticed that sometimes the CSS would not update when I would look at it in the browser. For instance, I would change the font size from 5 to 15 on my hosting company but it would still display as 5 in the browser, but when I changed browsers OR added "www." to the front of the URL it would show up as 15. This has been happening for a while and I can't seem to find a fix. It seems to happen when I view the CSS in the browser debug window. Does anyone have a fix for this?
Yes, chrome is caching your files. You can disable it (at least when the dev tools are open) by going to the network tab and then checking "Disable cache"
I am making a website using PHP. While completing it I tested it on Firefox only. Today when I tried to test it on other browsers (Opera, Chrome & Internet Explorer) I found some problems in my CSS. When I made changes to my CSS file, none of these browsers except Firefox is showing changes made in the CSS file.
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
So far what I have tried after Googling for a long time is
Cleared Cache memory of browser
Put "?v='+1 everytime'" at end of style.css
Refresh the webpage using 'ctrl+f5', 'ctrl+r' etc.
Any help ? Thanks in advance....
This is intended behaviour by most browsers. Whenever you try to load a page, if any resources are already present in browsers' cache, they will be loaded from there.
You have two options:
disable browser cache for your preferred browser (some browsers allow you to disable cache for specific domains)
make your HTML always refresh the resource, by appending a non-repeating parameter to the requested resource file name. I personally use: ?v=1482939287 (where 1482939287 is the timestamp). This will make the browser always refresh the resource, as it will ask for a version that's not existing in browser cache.
Example: <link rel="stylesheet" type="text/css" href="/css/style.css?v=1482939287">
Update: You can flush the cache for a webpage by opening Dev Console (Ctrl+Shift +I), right-click-ing on refresh page arrow (while Dev Console is open) and selecting Empty Cache and Hard Reload. That is emptying the cache.
You can also disable it, as suggested above, by opening Dev Console, going to Network tab and checking "Disable Cache" checkbox right under it. Please note that cache is only disabled while your developer console is open.
There are several solutions for this. I will list you some of my options below.
Unique identifiers to files though parameters
Adding a parameter behind the file as a kind of a version number may help.
In php you can use time() to get the current timestamp or unique() to get a unique string.
Cache settings server side
You can also find some .htaccess settings for caching specific file types on the server side. For performance reasons you should do this for production, too.
Browser Dev Tools
Another way is to open your Browser Dev Tools (mostly F12) while developing. Most browsers like Chrome and FF provides a cacheless enviroment when your Browser Dev Tools are open. As a example in chrome you can disable caching explicit.
My suggestion
Or even better use Task Runner to accomplish this. The keyword to search for is 'cache bust'. As example you can run gulp for concat, versioning, and let it connect the right css files you want to. This is specially suggested for development phase.
regards
Gkiokan
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?
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
CTRL+F5 : to refresh the page by clearing GG chrome cache.
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.
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.
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 :)
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.
Shift-F5 to reload the page worked for me on Chrome 61.0.3163.100
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
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:
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.
I'm just starting to play with Durandal, using the starter kit. I've added a very simple new view/viewmodel combination (essentially a copy/paste of an existing one from the sample) and mapNav()'d the route.
The problem is happening when I try to refresh my browser...the new view simply does not appear. It's not in the nav bar, nor can I navigate directly to the view by typing in the address bar. I know the code is (or should be?!) correct because if I go to the page in a different browser, everything appears as it should.
Is there some browser caching that Durandal is doing somehow? Sometimes F5 or Ctrl+F5 works to refresh, sometimes it doesn't. I also can't deep-link to a specific 'page'. Ie:
http://localhost:52625/#/newpage just gives me a blank
What am I missing?
The option that I use in Chrome is to open developer tools and right-click on the refresh button. There is an option for 'Empty Cache and Hard Reload' which always fixes this issue for me. I don't know the equivalent in IE but try this and see if it fixes your issue.
Most browsers will cache modules returned via RequireJS, which is how Durandal obtains its modules and view models.
CTRL+F5 doesn't help because that just refreshes the initial page - all the modules are still requested using javascript (RequireJS), so they are usually pulled from cache first.
I've found it's best to disable caching in your browser's developer tools. Doing so will ensure that all network requests are loaded directly from the source and not from cache.
See this question for additional information: Debugging when using require.js cache
Another solution is configure RequireJS to set its urlArgs property: https://stackoverflow.com/a/8479953/91189
This solution works ok, but makes it harder to debug, at least in Chrome, because breakpoints are lost every time the module is loaded, since it's technically a different file being requested each time.