So there is this site-> http://www.raudsilla.ee
This problem occurs only in Chrome- whenever you press refresh the page loses its CSS. Weird thing is that if you look the code of both- after and before refresh, they look exactly the same. And again, only happens in chrome.
I have tried quite may things, so far no luck...
I wouldn't like to rule out anything at the moment, so any help appreciated.
The browser is outputting javascript errors, if you check the code, you're calling jQuery's document ready before the script is loaded, as it says, "$ is not defined".
After fixing the existing javascript error, it should load correctly.
I am seeing the same behavior on one of our own sites and started looking for a cause. The only conclusion I could come up with for now is that it is caused by the Mime Type of your stylesheet. This conclusion is supported by the behavior on our side.
Update:
There are three ways in which Chrome seems to load the CSS file:
As a fresh request, no cached version available, our server returns HTTP 200 OK, with content-type text/css. This works fine.
From the cache, without consulting the server. Chrome has cached content-type text/css. This works fine.
As a request with a cached version available. Our server returns HTTP 304 Not Modified, with content-type text/plain. This does not work.
After some crazy tests, I found the solution by adding "?" to the url css file.
Example: href="../_css/setup_system.css?" type="text/css"
site.css was not loading in Chrome. I added the ? in the CSS url and my styles started appearing.
Shift + Refresh solves the problem so it must be a cache problem.
PS . The site takes quite a long time to load, considered optimising?
desable addblock and refresh, if the website loaded correctly check the plugin
Open the console(ctrl + shift + c) and then network panel and check the disable cache button.
Related
Hey I'm working on a site that loads CSS and images that are generated server-side. Some times the images and CSS that is loaded in shows up as the incorrect template but with the correct images.
Since this template is created on the server and not on the actual page I was thinking that the web server that hosts the actual page may have a cached version of that page and may sometimes ignore the CSS and images that are generated from the main server.
In short:
Do webservers sometimes keep cached versions of page Styling?
I there an easy way to make it get the live version always?
Also this happens very infrequently and at random. It seems very hard to replicate. But I have seen it happen a few times.
Any other Ideas?
For the first answer, yes they do but only if setup that way. There is the CDN or varnish. These system are used for website with huge loads where content must be cached locally or on other server, allowing the user to visualize the cached content and not the one generated by the webserver at the moment the user requested.
Exclude this for your case then ;)
I always use chrome or firebug on firefox to debug a website.
Press F12 while in the page you want to check and, on chrome, go to "Network" tab and pin "Disable Cache".
This is incredibly handy if you refresh your page quite often and want the content not cached.
For the question itself, I don't think I/we can help you without seeing the code. But try my suggestion with F12 before.
There are two kinds of caches to think about. One of them is server cache. If you use server cache, then whenever CSS was modified, you need to empty the CSS cache if you have such a cache. If not, then you need to empty the cache, which might be painful.
As about browser cache, if you add a new parameter to your css file, then it will be loaded even if it was cached in the browser of a given user, therefore it is recommendable to add a parameter to your css file where you include it. This parameter should be either a version or a timestamp, or something uniquelly distinguishable from earlier versions. That value should be stored and you need to refresh (preferably) automatically whenever the CSS changes. The exact steps are up to you, since they differ greatly in different environments.
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.
I have recently experienced some strange caching issues with Google Chrome. I have a website serving several JS and CSS files with far future expiration dates. Sometimes, Chrome would fail to load one of the files (usually our biggest JS file, but sometimes another), and a page Reload / Force Reload / browser restart do not help. The only way to get rid of the problem is to completely clear the browser cache.
I used the Chrome developer tools and noticed that Chrome is requesting the file with the following headers:
If-Modified-Since:Thu, 14 Apr 2011 19:09:29 GMT
Range:bytes=41681-41681
to which the server responds with a "304 Not Modified" status. The developer tools then list the file size a 0 bytes.
The interesting thing is that 41681 is the actual length of the page (after compression), and Chrome is strangely trying to request the next byte after the end of the file.
I used the Chrome "about:net-internals" page to examine the cache and found that the file is indeed cached but is mysteriously flagged as "RESPONSE_INFO_TRUNCATED". Other than that, the cached content look perfectly fine (I compared it with a working copy of the cached file).
I have searched all over the web and the only reference I could find to such problem is on Meta: https://meta.stackexchange.com/questions/89224/does-anyone-have-problems-viewing-so-in-chrome-11
The issue reported there sounds a lot like the problem we are having but there are no conclusions other than that clearing the browser cache is a temporary solution. That post is almost two months old, and several versions of Chrome have been released since and the problem still exists.
The only relevant Chrome bug that I found is this one (reference the meta post): http://code.google.com/p/chromium/issues/detail?id=62712. However there was no activity on this bug since it has been reported.
I am very curious whether anyone else experienced similar issues, and whether anyone has any idea about what might be causing this.
Thanks,
Sagi
I've been trying to work out why our pages load slowly, and one thing I've noticed in Fiddler is that each page load for /mysite/mypage.aspx brings with it a request for GET /mysite/null HTTP/1.1, resulting in a 404 error.
I'm guessing this 404 error on every page load is slowing the site down even further, are there any ways of debugging what might be causing this? We use lots of Ajax/Javascript.
Similar question: What is the source of /path/(null) requests?, ours is slightly different because it reliably happens on every page load
Get FireFox and download FireBug as you can use this to debug XHR.
Without seeing your code this is the best advice I can give you as tracking down these bugs are usually tedious and require some intimate knowledge of the working domain. FireBug is your best bet for debugging these sorts of issues within a page.
UPDATE:
Debugging the XmlHttpRequest object in IE can be done using Julien Couvreur's bookmarklet.
If you're using IE8, you can simply use the developer toolbar (hit F12) to step through your code.
The most likely explanation is that you have a malformed URL constructed by JavaScript somewhere in your page.