I feel like this should be really easy to find if it exists, but I've been googling for 10 minutes. I don't see it mentioned in the official documentation.
I'm trying to troubleshoot a solution to a problem. The solution requires rearranging the order the head child elements.
It's trivial to make that change with Firefox devtools, but I don't know how to view the page with those changes; if I reload (ctrl+r), the HTML goes back to the server version. Does this feature exist?
FWIW, I can find ways of doing this for CSS and JS changes.
There is currently (as of Firefox 92) no such feature of re-applying HTML changes.
What I found is a feature request in Mozilla's bug tracker.
At the moment, the only workaround for this is to directly transfer the changes on the server side script creating the HTML output once you've done them in the Inspector.
Note: It requires some heuristics to re-apply changes to HTML in the browser because the resources served over the network could change in the meantime.
For CSS, the simple DevTools solution is to replace a file entirely by the saved one. For JavaScript, they have some heuristics to recognize where a line moved when code has changed between two reloads. Though those solutions cannot be transferred to HTML easily, as it is generated dynamically most of the time.
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 searched and searched, but didn't find what I was looking for, so sorry if it's already there. I did a photo blog for a friend and used to implement jQuery Jazyload (http://www.appelsiini.net/projects/lazyload) to load all the pictures along the way, however, it doesn't work in all browsers anymore and he stopped developing it. I heard of http://www.sebastianoarmelibattana.com/projects/jail/, but it will need a lot of extra text and code when you have 500-1,000 pictures on one site. Also I want to be able to load the images lets say 1000px, before they appear in the window.
Do anyone have suggestions/solution or else, to get the problem fixed?
You can view his site here: www.theblackguido.com (NSFW)
Thank you in advance.
Kristian
It is the part of automatically removing image src which does not work anymore. Version 1.5 released Dec 23, 2009 provided alternative where you must alter HTML and store image url in original attribute. I renamed it recently to data-originalto be HTML5 friendly. I also updated to documentation which better explains how to use it.
But yes. The way Lazy Load used to work is not possible anymore. Before you could just drop in the JavaScript and it handled everything automagically. Due to changes in new browsers you now must alter the HTML.
PS. Lazy Load is not dead. It was just orphan for a while.
Is it possible through a plugin or setting or something to allow Firefox to recognize the live DOM source code?
Basically, firebug or other similar tools can recognize elements on the page which Firefox does not.
I understand with these extensions I have the ability to see such changes made by javascript, but Firefox does not seem to fully recognize them.
I'll try to clarify.
If I load a page and view source (ctrl-U), I see what the server sent to Firefox, and what Firefox ostensibly recognizes as the source code of the page. If in that source code, there is javascript which alters the DOM, and then I hit (ctrl-U) again, the code is not updated.
I am using a testing tool (iMacros firefox plugin) to automate functionality, but it does not recognize the updated DOM because Firefox does not. Firebug and similar tools can recognize these "live" updates. Does that help?
http://www.chapter31.com/2006/12/04/viewing-ajax-generated-source-code/
You can try using the web-developer extension with a view-generated-source option.
I'm still not sure I understand your question, but I think what you're getting at is the Web Developer extension for FireFox, specifically its "View Generated Source" feature.
That will let you see the altered DOM.
Firebug gives u this ability:
for instance check the HTML tab when running a jquery ticker and see the dynamic changes live in the DOM
Usually, when I have weird issues with either the console or the DOM inspector with firebug, I find restarting the browser and validating your code is the way forward.
That said, I'm not really following your question, the document that firebug shows is the same one in the firefox window...?
It looks like the problem is not that you want firefox to show the current DOM when you hit CTRL+U, but that you want some automated testing tool to be able to test your web pages.
Perhaps you should use a testing tool that is suited to the job of testing rich web applications, Selenium, for example, can do this.
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.