When I debug locally in fire fox 2.0x many times my page won't have the styles added properly or the page will not completely render (the end is seemingly cut off). Sometimes it takes multiple refreshes or shift-refreshes to fix this. Is this a common issue or is it just me? Any solutions?
I want to add that this is happening in fire fox 3.x to me as well. I add my javascript to the pages dynamically and this might be part of the issue. This is when I am working locally with Visual Studio.
Update: This does happen in IE but it happens much more often in Fire Fox. The issue seems to be only javascript and CSS files not loading. For example I get jQuery is not defined, $ is not defined etc. I don't think I have local IIS to test this on but from the server it always works perfectly. Fire Bug shows all my css and javascript files to be requested and received.
This could be a problem with IPv6 and DNS of the Firefox browser. This issue is known to slow down Firefox on localhost:SOMEPORT. The effect would be that some external files won't load (css, js etc.) resulting in a partially rendered page.
You can solve this issue by simply deactivating IPv6 in Firefox:
Insert about:config in the Firefox address bar
Set network.dns.disableIPv6 to true or alternatively add localhost to network.dns.ipv4OnlyDomains
A different way to fix this issue, is to a remove the ipv6 address from your hosts file this way: open the file
C:\Windows\System32\drivers\etc\hosts
(with administrator privileges) and remove (or comment out #):
:: localhost
Make sure that you narrow the scope of the problem. Does the problem just happen when debugging from VS or does it also happen with local IIS? With server-based IIS? Does it happen to other developers in your company? Is it really just FireFox or does it happen to Chrome, Opera, IE, etc?
Assuming that you've already worked that all out, I would suggest installing a FireFox plug-in called "Tamper Data". Open that and refresh the page. You'll see a record of every connection from the browser to the server (for each html file, image, css file, etc). Look to see if any of the them are very slow or not completing (perhaps one of those files is taking a long time and FF is waiting for it to finish before loading other important files).
Assuming that all of the files correctly loads, you should consider checking that the syntax is valid (maybe there is some unclosed tag or quotation mark that is causing FF confusion). I use a plugin called "Web Developer", but there are a lot of other options out there.
You could also use a plugin called FireBug to view the HTML behind various parts of the page to see if there are any noticeable problems. You start FireBug, go to the HTML tab, click Inpsect, and move your mouse over something on the page, and it will show you the HTML behind it.
One thing to do would be to check the source of the page(s) in question. My guess would be that the local server that VS runs is not giving you the entire source of the page. One way to verify this would be to run exactly the same code in the debug environment, as well as from a "real" server like IIS 6. If the same behavior is seen on loading the page from both servers, as well as insuring that the full page source is being recieved by the browser(s), then it is a bug in Firefox and should be reported. This is especially true if other browsers, ie. IE, Chrome, Safari, Opera, render the page fully.
Are you comparing what you see in Firefox to what is displayed in the Visual Studio designer? If this is the case, then they are using 2 different methods to render the html and may not display the same.
Anything further on this folks?
I have examined the traffic using Firebug and it appears that when veiwing the response from the request for a style sheet, the response is just blank. After refreshing (sometimes multiple times) the age displays correctly and the response information contains the style sheet. I have not seen this in any other browser and it only occurs when viewing the app from Visual Studio.
2! Recently i had the same problem. Im using MVC 1.0 and I added a new stylesheet into Views/Share folder. And when i run the project, the page didnt render along with the css. If your web project is a MVC one so try put the css file into the Content folder.
Hope this help.
HaiVu.Doan.
In case anyone else finds this with newer versions of Visual Studio, I have to run VS as Administrator. This is something I keep forgetting to do, but once I right clicked on Run as Administrator when opening VS, the problem went away.
Initial problem, I could not get CSS to render when running a project from VS 2012 using Firefox as the browser. (IE worked just fine, btw.) The content would be there, but no CSS. This was the first post I found when I typed in my question.
Related
I have an unusual problem that I can't wrap my head around and figure what is causing this and how to tackle it.
I've created a webpage that allows image uploads to the server! After the user uplaoded an image the host of the page receives an e-mail with the path to the uploaded image - really straight forward.
In the e-mail for instance a url like this is coming in.
https://www.something.com/uploads/FB_IMG_1525868856883.jpg
I can open that in Safari on Mac, I can open that in some cases in Chrome Incogntio, but it never renders in Internet Explorer or normal Chrome Window (in Incognito it does)
In the image you see something weird happening. In Incognito a different source is rendered than in a normal chrome window. (this is btw. not a caching issue)
you also see the page-title of the actual website resolved in the normal window, but not in incognito.
Why is that happening? What could cause that? is that some server setting? Some react setting I have to set?
I'm posting this in case someone else runs into it as well. I ran into this same issue where 500 kept happening for me and I knew it was not the extensions.
What fixed it for me:
Open Developer Tools in Chrome
Navigate to Applications Tab
Click "Clear Storage
Click Clear Site Data
As Nitish Phanse said, it is because the page is cached. Turning off browser caching will solve it.
I faced a similar problem, when any of the changes in CSS were not being reflected in the webpage, because the cached version was being used by chrome. However, the changes were visible in other browsers and devices. Turning off caching in chrome solved this problem for me.
I prefer to use incognito mode when developing website because when browsing normally the files are cached, thus, not reflecting the changes you made. When you use incognito mode, fresh cache and cookies are stored and the cache and cookies are disposed when you close the incognito window. Another plus point of using incognito mode for testing is that, it disables all the plugins, unless you explicitly enable them.
You might want to check out this question on Quora for further details on why to use incognito mode when developing websites.
Seems like you use quite amount of Chrome plugins. In Incognito-mode those are disabled by default. Try remove/disable AdBlock etc. stuff which blocks scripts and disallow them from running.
Makes quite a lot sense why they run in other browsers too.
I strongly recommend to NOT use plugins when you do web development. You might see different kind of behaviour with same code as user who do not use them. Only use this approach if you especially wan't to develop under certain conditions.
As most people suggest, it definitely sounds like a caching issue. Incognito doesn't load the page with cache. You could ctrl+f5 the page (reload without chache) and see if it still does it. If the caching itself proves to be an issue, you could add a ghost/phantom string (I don't know if that's the actual correct terminology). Basically you add,
<?php echo '?'.date('Y-m-d H:i:s'); ?>
at the end CSS or JavaScript import (whatever may cause the issue). I.e,
<script src="/js/regexps.js<?php echo '?'.date('Y-m-d H:i:s'); ?>" type="text/javascript"></script>
What this does, is that it will prevent people from caching your file, since the name of that file will change by the second. This way, you make sure that if you make changes to files that are often cached, that everyone gets the uncached changes as you update your CSS/JavaScript or whatever. This is very useful for files where you make JavaScript check for instance, in case you make changes to some regex etc.
If content scripts are specified in manifest.json for Firefox, Firefox will also load content scripts for already opened tabs and execute them even the tabs are already in loaded and ready state.
Google Chrome does not add any content script when extension is installed for already opened tabs. The content script is loaded when the page is refreshed for the older tabs.
I want to ask is Firefox's behavior is expected or bug?
As far as compatibility goes, it's a bug.
Chrome does not do that.
As a result, many extensions implement custom logic to achieve the effect.
One has to take into account side effects. Suppose your content script injects some UI into the page. Then the extension is updated. That amounts to extension restart, and suddenly you have 2 copies of the UI. Also valid if you just attach event listeners, as (at least in case of Chrome) the old content script's context continues to exist (in an "orphaned" state).
The last point is very important and probably the reason why Chrome doesn't do it by default. At some point I made a very long post about this problem - if you're going to report this as a bug to Mozilla, please include that. There's also this feature request that is related.
What would be sensible (and backwards compatible) is to add a parameter to content script description in the manifest - whether to inject into existing pages. It will be up to developers to guarantee that side effects are taken care of. This usually requires even more code to just communicate to the old script that it needs to wind down and clean up.
I have a fresh installation of Liferay on Tomcat and in IE7 it doesn't show the buttons for visual editing in the editor when I try to edit content.
It works on in Firefox or Chrome.
Does anyone have an idea why would that happen? I am not sure where to dig, I don't see javascript exceptions and it doesn't look like the buttons are even populated in IE. It is hard to debug IE problems since I don't have a tool like Firebug there.
I downloaded the 6.1 and still have the same problem, adding the URLs of what I see. Looks like IE only has the text box and in the DOM I don't see the same things that I see in FF.
http://i44.tinypic.com/35jf5td.jpg
http://i43.tinypic.com/11qqvt0.jpg
Update on this:
I checked with some people in our organization and they have the buttons on their browser.
I checked the version of the IE browser and it's the same down to the last digit. Properties are the same as well. The only difference is that I have some plugins installed that the other browser doesn't. I tried disabling all the plugins but it didn't help.
The suspect plugin is Google Chrome Frame (ChromeFrame BHO). Can someone please try to add this plugin and see if it messes things up? The disabling it doesn't help.
Liferay CE 6.0 contains few bugs within the WYSIWYG editor integration.
One issue with IE is LPS-16004 (solution included). This might be the same problem as you are experiencing.
I remember we had also problem with javascript race condition in editor initialization, which sometimes loads the editor incorrectly.
But I strongly suggest you to move to Liferay CE 6.1 as it is much more stable.
Ok, I finally figured it out, so if someone has the same problem, here is the reason - we have Google Chrome Frame plugin installed in our organization, but it only works on white-listed domain names. In this case the domain the site was on wasn't whitelisted, but the portal looked at the agent string and saw chromeframe there and assumed it can use it as chrome browser, which broke things.
Right now I will try to white-list the domain and see if it works. Another solution would be to try and find a place where we look for the agent string and fix it there, not sure where this place is.
As brilliant as Firebug is, I would consider switching my JavaScript debugging to Chrome if I could figure out how to get it to always re-download styles and images on every visit to the page?
When I'm testing a page in Firefox, it always gets the latest version.
But in Chrome I often end up scratching my head over something that turns out to be a simple issue of the browser caching some earlier styles or images.
Is there a way to configure Chrome to cache less while you're developing?
I often use private browsing mode for this - it prevents caching of the stylesheets or scripts.
EDIT:
Another really easy way to do this in Chrome now is to go into the Chrome Developer Tools, click the settings gear (bottom right), and then check "Disable cache." See https://stackoverflow.com/a/7000899/4570.
A bit late to the party, but just for people who may pick up this page on a search, new versions of Chrome have a developers tools setting to disable the cache. Show developer tools (spanner->tools->developer tools) and on the bottom right is a tiny little gear. click that and a few settings appear in the developer tools window, one of which is to disable the browser cache. If you can't see it you may have to upgrade to a newer version of chrome.
Ian
According to Chrome help pages, Ctrl+F5, Shift+F5, Ctrl+R and Shift+R should force refresh. I haven't had problems with javascript and css but refreshing frames is another story. The caching can also be on your web server. The server can obviously be configured to cache css and javascript files.
Your best bet is to clear the cache between each load. With the latest version of Chrome, the hotkey is the same as firefox (on Mac, it's Shift-Command-Del). However, they haven't focused the "Clear Browsing Data" button, so you have to use your mouse to click that button -- which is a total PIA when compared to Firefox (Shift-Command-Del + Return), or Safari (Option-Command-E + Return).
the 2.5 ways i do it are not "automatic" but they're very quick, and i don't have to remember to switch back from private browsing -
a) install Mouse Gestures and use (this is a great extension anyways, but even more so now that I know about) Up, Down, Up - this is a cacheless reload. You can get it here
b) ctrl+shift+r is [supposed to be] a cacheless reload. Even the help pages admit this isn't perfect
c) the .5 is a kind of a hack - but if you are working with CSS files, open a new tab and type in the address to the CSS file itself - you can see what changes are there, as well as make sure that you've gotten the latest one by refreshing this file before your other file. a bit of a pain, i know, but always works.
Not sure about your system but on this WinXP machine holding SHIFT while clicking refresh always forces a complete download.
That's what I do when doing CSS and image tweaks.
That Chrome needs to have must-revalidate in the Cache-Control` header in order to re-check files to see if they need to be re-fetched the way that the other browsers do by default.
Recommend the following response header:
Cache-Control: must-validate
This tells Chrome to check with the server, and see if there is a newer file. IF there is a newer file, it will receive it in the response. If not, it will receive a 304 response, and the assurance that the one in the cache is up to date.
If you do NOT set this header, then in the absence of any other setting that invalidates the file, Chrome will never check with the server to see if there is a newer version.
Here is a blog post that discusses the issue further.
Over the last few days, I've noticed that (occasionally) when testing my own site in FF, it loads the first time that FF has been opened, but it seems to hang on subsequent loads (windows only - i haven't noticed this behaviour on mac, but i don't use my mac as much).
The url is http://HearWhere.com
Of course, my concern is that sometimes people will try to get to the site and not be able to (and based on what I can see, that is a distinct possibility, as i've seen a significant drop in stats over the last few days, so I suspect that might be happening).
Any idea why? I can't seem to figure this one out.
I view source on the page that hasn't loaded, and it appears that all the source is there.
The one thing I can think of that might be causing the problem is that in my head and footer, i have a bit of PHP which attaches the correct API key based on the visiting domain (this is so I don't have to hard-code the api key into the page and change it from dev to prod).
i use a fairly simple
$domain=$_SERVER['SERVER_NAME'];
if($domain=='dev'){
$apiKey='apikey';
}else {
$apiKey='apikey2';
}
but when viewing the source, it appears that show without issue.
I do a similar bit of code at the bottom of the page so I only include tracking codes when the domain is not dev.
Any ideas?
UPDATE --------------------------------------------------------------------
After checking it out in Firebug (not sure why i didn't check that before), the following two google scripts are failing, and everything stops there.
The site is map/location centric, so there i need the google stuff. Any idea why it would fail?
these are the failing scripts
http://gg.google.com/csiv=2&s=mapsapi&action=jsloaderjslinker&rt=jsload.69,jseval.103,jsdone.105
http://gg.google.com/csi?v=2&s=mapsapi&action=apiboot&rt=d.2,e.316,ab1.336
Have you tried Firebug plugin for Firefox? It could help you debug some script/network/html issues.
You can monitor script, images and other ressources load time.
Good luck.
It appears this was/is an error with Firebug. Disabling firebug resolves the issue, so it shouldn't affect too many visitors.
Thanks for the help,
Pete