Browser mode for Google Chrome to test compatibility of webapp - firefox

I'm developing a web app and want to make sure that it runs as intended on all major browsers. I've downloaded Chrome, Firefox, Opera, Safari and IE to test the app, but I want to make sure it works fine on previous versions of these browsers too.
I know I can download previous versions of Opera from here, and in IE I can select 'Browser Mode' from Developer Tools section.
Is there any way I can test my app on previous version of Chrome, FF and Safari?

I've never really had a problem with something not working in an older version of these browsers. The only compatibility checks I do are with older versions of IE. The reason is that a new version of IE changes a lot but the others come out with new versions so frequently and have automatic updating (you don't even notice it in Chrome) that not only is there (probably) not a significant change to the rendering engine from one version to the next, (pretty much) everyone using it is on the latest version anyway.
That being said, there are some websites that show you screenshots of how a page looks in various browsers.
Browser Shots comes to mind.

http://www.brokenkeyboards.com/btfm/
http://meineipadresse.de/netrenderer/
http://browsershots.org/

Related

Chrome Dev Tools Performance Tab - Profiling

When attempting to profile a webpage using Chromes Dev tools, since the most recent update most performance profiles load something like the attached image. All the data is crammed up against the right side of the timeline and now there are negative milliseconds included in the timeline... which doesnt make sense. Is anyone else having this issue since the most recent chrome update? I cant find anything in google docs.
I use the 'Record' and 'Start Profiling and reload page' buttons on the performance tab a lot and also have the bug similar to yours on Windows platform since Chrome v.90 (Chrome v.92 also have this bug), Linux versions are not affected.
As a temporary solution, you can downgrade Chrome to any version below 90 (configure your system to prevent Chrome updates): Chrome x64 v.86 (other versions/platforms)
If you need to use the latest Chrome version, you can install an older Opera or Opera GX (e.g., LVL2 ver.68) to use it with non-bugged performance tab (newer Opera versions also have this bug because they also have an updated Chromium engine)

What are the alternatives to the Firefox Developer Tools?

Since last few updates of Firefox our beloved Firebug is integrated into the Firefox Developer Tools and a lot of people including me don't like what happened to Firebug.
The built-in developer tools have a very ugly menu system and messed up usability.
So, what are the alternatives to the Firefox Developer Tools? Is there a tool with the same usability as Firebug?
Alternatives are:
Turn off multi-process Firefox. (Though that's only a temporary solution and doesn't bring back all functionality of Firebug. E.g. the Script panel is broken in current versions of Firefox.)
Install an old version of Firefox where Firebug still works and disable updates. (Also only a temporary solution, because you'll miss (security) bug fixes and new features.)
Wait until the gaps between Firebug and the Firefox DevTools are fixed. (Or even help them fixing them.)
Switch to another browser and use its developer tools.
Rework Firebug to make it compatible with multi-process Firefox (which is the main reason for the integration into the DevTools). Update: Starting with Firefox 57 only WebExtensions will be supported, meaning extensions work cross-browser and are more secure, but they also have limited APIs. So, a reworked Firebug would not have all the features the original Firebug had.
Following Sebastian's advice I've downloaded old Firefox portable v47 from here:
https://sourceforge.net/projects/portableapps/files/Mozilla%20Firefox%2C%20Portable%20Ed./Mozilla%20Firefox%2C%20Portable%20Edition%2047.0.1/
and I'm using it with Firebug only for development. According to Firebug's website 47 is the last compatible version of Firefox:
https://getfirebug.com/downloads
To avoid compromising on security, for normal browsing I use updated version of Chrome.
Downgrading the version is not advisable, So instead of that go to the browser console and type your respective xpath in the mentioned syntax $x('path') to validate your XPath.
Or can find other similar plugin. So far I find the Plugin 'Xpather' in http://xpath.alephzarro.com/ link.
But I still would like to reactivate Firebug to rework by setting the preferences browser.tabs.remote.autostart,
browser.tabs.remote.autostart.1 and
browser.tabs.remote.autostart.2
to false via about:config.

Why got Firebug removed after updating Firefox to version 50?

After updating Firefox to version 50.0 my Firebug opens the default developer tools. The original Firebug doesn't work anymore.
I have always preferred Firebug as my default debugging tool. I want the original Firebug back in Firefox 50. How can I do that?
Firebug does not work anymore once multi-process Firefox (separate processes for the Firefox UI and the websites) is enabled. See the related post in the Firebug blog.
You may be able to reenable Firebug by setting the preferences browser.tabs.remote.autostart, browser.tabs.remote.autostart.1 and browser.tabs.remote.autostart.2 to false via about:config. Though at some point this preference will be removed.
So, you are advised to use the Firefox DevTools instead. I am writing a migration guide on MDN. Firebug features that are not in the DevTools are covered in a Firefox bug.
First remove new version of "firebug" and download old version of "Firebug(2.0.17)" from following URL:
https://addons.mozilla.org/en-US/firefox/addon/firebug/versions/
Uninstall Firefox completely including deleting the Mozilla folder within your APPDATA.
Then reinstall Firefox and add both Firebug and FireQuery.
After that everything should work as before.
You can also go on Help -> Troubleshooting Information -> Refresh Firefox and install Firebug through http://addons.mozilla.org/
For all the folks out there, there is a good news..!! Firebug works great on these two Mozilla based browsers.
Cyberfox & Palemoon
Both are forks of forefox that uses code before the implementation multi-process. Cyberfox uses the more recent code fork compared to Palemoon.
Both browsers are well maintained and updated regularly.
Cyberfox announced its death on March 2017 but its still actively maintained [as of Dec 2017] and I still get update.
Both browsers support cross platform windows / Linux, on Linux you should have 64 bit distro to use cyberfox. Palemoon on the other hand works great on both the bits.

error parallax effect in firefox but works on google chrome

I need your help my website is not functioning properly on firefox browser but in edge, chrome and opera and safari it works only firefox is not functioning properly
Firefox Browser
Google Chrome Browser
I would recommend setting up all your projects in Xampp or something similar first before testing it. If you are going to upload to a server you need to replicate the environment locally before you decide whether it is going to work or not. It seems complicated but it is quite simple, you can find out more here. https://www.apachefriends.org/
That said, check your urls, they are not the same for your two different screens, the one is referencing an anchor tag.

Firefox 9.0.1 Broke Internal Wiki Layout

The most recent version of Firefox has messed up our internal wiki layout so that the left bar menus are displayed below the content on all pages now.
I've tried using multiple resolutions and window sizes and the problem persists so that doesn't appear to be the issue.
There are no problems with Chrome or IE however.
A screenshot of the problem is attached here for you to see.
You're using an old MediaWiki version. It does UA sniffing and sends different code to different browsers, relying on bugs in some of the browsers to make the code sent to them render correctly.
Firefox 9 removed a nonstandard property that only Gecko used to implement. MediaWiki was using that property to decide that the rendering engine was Gecko. With it gone, MediaWiki now decides that you're using kthml and sends CSS rules tailored to khtml bugs... but Gecko happens to not have those bugs. So the rendering ends up wrong.
Your options are to either update to MediaWiki 1.16 or newer (which you should do anyway, because your version is not getting security fixes anymore!) or wait for Firefox 10 to come out, because chances are that will restore the nonstandard property because too many sites were sniffing for it.
See also https://bugzilla.mozilla.org/show_bug.cgi?id=683151 and https://bugzilla.wikimedia.org/show_bug.cgi?id=31807 for more info.

Resources