Mozila Firefox add on for viewing bootstrap application as in mobile - asp.net-mvc-4

I am Creating an MVC Application using twitter bootstrap 3. Now I need to test the responsive feature in a mobile . I know there is some add on available in Mozilla that allows us to have the same experience as in mobile through desktop, have anyone of you heard of such add on?

You could use the user-agent switcher addon.
However mobile device emulation is one of the point where the Chrome devtools are more feature rich than Firefox/Firebug.
In Chrome, you go to devtools configuration and in the Overrides tab check 'Show emulation view in console drawer'. Then back in devtools click on the show console icon, and finally go to the emulation tab. It let you choose a device, resolution and emulate touch events with the mouse.

Ctrl-Shift-M (Responsive mode) is built into Firefox and will let you work with any size of mobile screen resolution and simulate touch events with the mouse.
There are no presets for specific phones (although you can add new size presets if you want) and you won't be able to spot all differences because you'll always be rendering with Gecko. For increased accuracy you'd have to use a tool that at least emulates different rendering engines. Browserstack can be good for that but in my experience it is tediously slow.
If you are doing user agent detection then an addon to manipulate that might be useful but presumably if you're going for a responsive design you will be more concerned with media query behaviours than hacky user agent tricks.

Related

Does Microsoft UI Automation Framework work with Chrome, Python and Java Apps?

I am working on an automation project, in which I need to capture the activities [ application launched, data entered, input type etc.] user performs on a desktop. I came across Microsoft UI Automation framework which so far works well for native windows based applications like MS Office, .NET apps etc. However I did not find any useful information / samples of capturing the information from different web browsers [Chrome is a must], Python apps, Java Apps etc. Can someone please confirm whether MS UI Automation Framework supports such apps. Any working example to extract user activities from these apps would be highly appreciated. Thanks.
Chrome only supports UI Automation for toolbars, tabs, menu, buttons around the web page. Everything that's rendered as a web page is not seen by UIA.
For the web page content, the easiest way is to use Selenium (driven by the ChromeDriver), which is kind of a de facto standard for browsers, and has nothing to do with UIA.
To test if an app supports UIA, and how far it does, it's very easy, just run UIA's Inspect tool and check the UI tree over that application.
Some additions to Simon's answer...
Chrome page content can be seen by UIA if you run chrome --force-renderer-accessibility. Only for existing Chrome process it won't work. Though user can create a new tab chrome://accessibility manually and enable UIA for all or some chosen pages. This method also works for AT-SPI accessibility technology on Linux. Of course, Selenium WebDriver is an industry standard here. But another way exists. Both Mozilla and IE support UIA by default.
Inspect.exe can be simply downloaded from this GitHub repo.
Regarding Java apps it depends on the app type. Your chances is about 50/50.
WxPython or PyQt5 are good for UIA. TkInter or Kivy apps are not.
P.S. There is an example how to drag a file from explorer.exe and drop to Google Drive in Chrome using Python library pywinauto.
I'm a bit late to the party..
But Chromes accessibility features are only activated once something tries to access it's accessibility.
If you call AccessibleObjectFromWindow ([DllImport("oleacc.dll")]) with the window handle an existing chrome window will have its accessibility activated (and you'll see the actual web page content in UIA!).
If the chrome window is opened after your app is running - Chrome pings open processes for any open accessibility apps... for that you use AccessibleObjectFromEvent and the event you're responding to comes from the windows pipeline: EVENT_SYSTEM_ALERT = 0x0002 .
The bottom line is - you have to tell chrome that there's something installed that wants to access it's web page content.
Oh! and your application has to be signed!! Unsigned apps won't be able to access web content - I think that's the same in firefox too.
I hope this helps someone in the future.
See:
https://www.chromium.org/developers/design-documents/accessibility

Screen Sharing on webRTC

Is it possible to capture desktop screen sharing through webRTC.. As we know that it just captures the screen on the browser tab but is it possible to capture the whole desktop screen like navigating through files on computer or opening and viewing files like pdf etc..
Currently, only "stateless" screen capturing is available in RTCWeb implementations (both chrome & firefox). E.g.
Install chrome extension and then try this demo
Above demo will simply capture screen of "any" opened application's screen. Though, such screen capturing API fails to capture screens of full-screen game applications.
More information available here:
https://developer.chrome.com/extensions/desktopCapture (HTTPs+getUserMedia+postMessage)
Regarding remote desktop sharing from a web-browser, it has a pile
more security risks associated with it compared to screen sharing. The
UI/security aspects will be tough to deal with, and the feature will
be very susceptible to social engineering -- phone call: "this is
Google/Dell/Computer-Management; we've detected your machine has a
virus on it; could you browse to and we'll assist you in
removing it" -- etc. Ref
Yes, it's possible. At least using Chrome. There are several ways of doing it, but the simplest one is:
Add this constaint when you invoke getUserMedia:
constraints.video.mandatory.chromeMediaSource = 'screen'
When starting chrome, use this argument (chrome version > 35):
--enable-usermedia-screen-capturing
You can find an example of sharing screen and recording the shared screen at a remote server repository here:
https://github.com/Kurento/kurento-tutorial-js/blob/develop/kurento-recorder-screen/static/index.js
If you try to execute that example, play close attention to the security restrictions. All signalling needs to travel using TLS. Using raw HTTP will produce chrome to refuse sharing screen.
Yes it is. I recently worked on WebRTC and was able to stream desktop easily. Following links helped me implement my requirements :
Firefox Extension : http://mozilla.github.io/webrtc-landing/
Dont forget to add your *.github.io to about:config -> getUserMedia screensharing allowed domains
Google Chrome extension : https://developer.chrome.com/extensions/samples#search
Open this in Run : Chrome.exe --enable-usermedia-screen-capturing
Other Reference : https://github.com/muaz-khan/WebRTC-Experiment

test mobile website in desktop browser

I'm developing a mobile website for iPhone, Android, etc. using jQuery Mobile. I'd like to be able to test this in my desktop browser and was wondering what the best approach is. I guess I could use a plugin to change the User-Agent header to the appropriate value and manually resize the browser to the device's width, but is there a simpler/more reliable way?
Update
Sorry, I should have mentioned that the only hardware available is a Windows laptop
Well if you have a Mac and xCode is installed you can use the Simulator. Open Mobile Safari and point to you web page on all Apple devices
You can also use the Android Emulator ( But I've not tested that it can access the web from the browser )
Alternatively you could use a plugin ( as you have suggested ).
I personally use Chrome with this plugin:
https://chrome.google.com/webstore/detail/ljfpjnehmoiabkefmnjegmpdddgcdnpo
with pretty good results.
I've used Device Anywhere before
http://www.keynotedeviceanywhere.com/
you access the device through a web portal/site and control it, but this costs $$$
Actual device testing in going to be the most reliable
related:
http://sixrevisions.com/tools/10-excellent-tools-for-testing-your-site-on-mobile-devices/ ( other suggestions )
Difference between iPhone Simulator and Android Emulator
In Chrome hit F12 to open the Developer Toolbar. Then click 'Toggle device toolbar' (tablet icon, top left next to select element). You can then choose the device at the top to test.
There's also PerfectoMobile for testing on devices remotely...though it can be painfully slow. I'd really recommend at least getting some 'base' testing devices, if possible.
There is also http://www.browserstack.com/responsive that can be used to get a screenshot of what your site would look like on a number of given devices.
There is however a limitation of how many screenshots you can get in the free version I have linked to here.
I got nice results, visualy, by using Chrome add-on called Ripple Beta. Bad thing is that there is no ability to add some custom device, like tablets of 8" or 9" or bigger... but works. I'm not sure is it able to show some errors visible on real device but seems nice.
Manymo should work very well simulating Android for you. It shows me exactly what my cell phone shows, even though my desktop browsers don't. Manymo is a website with a lot of Android phones pictured. Just click one and enter your URL. There are options such as Android versions and screen sizes.
Look for the Chrome plugin Responsive Web Design Tester - you'll be able to emulate mobile browsers for different device sizes on all platforms.

Safari 5.1 unloading tabs from memory

Well, it seems Safari 5.1 at least on Lion which is what I'm using now decides to unload tabs from memory as it deems it necessary.
The big issue with this is sites that display ajax alerts or ones that have chats as for example GMail. I was having 2 conversations on Google Talk right in the GMail website and while I was on another tab I noticed the title blinking indicating new messages in my conversations, as soon as I clicked the tab Safari decided to completely reload the page, losing all those conversations (I don't keep logs of those).
It goes without saying that this behavior breaks modern web apps and seems unnecessary on a desktop computer. I understand the necessity of this on iOS devices due to ram constrains though.
Is there any way to disable this "feature", I couldn't find a way to do so. It's that or switching to Chrome or Firefox, but I like Safari.
Thanks.
I think I have a temporary work around. Pages on my site — petersonguides.com — periodically reload the tab in Safari 5.1. Ordinarily this wouldn't be a big issue, but I have a video that plays in a FancyZoom box and it can't get all the way through without the tab being refreshed.
I tested with Chrome and it doesn't cause the same tab reload behavior, so I'm sure it's a Safari 5.1 problem.
I have JavaScript and PHP on the home page and I thought there might be a conflict, so I started pulling things off and retesting with the video. The last thing I checked was removing the Google Analytics script. That fixed the problem.
I tried bumping up the Database Storage amount - per the previous answer - but that didn't have any effect.
I am having trouble with Pandora (Flash) not advancing songs in a background tab. As a quick-and-dirty test, I went to Preferences > Advanced > Database storage and popped it up from 5MB to 500MB. Flash is still very unstable, but now songs are advancing in the background. I don't know if this will work for you but you might give it a try.
Safari 5.1 | OS X 10.6.8
The reloading of tabs in the background is a feature of Safari 5.1 on Lion. There is currently no easy way to get around this. The only way possible at the moment involves disabling the multi-process window feature:
Enable Safari's Debug menu by typing in Terminal.app, restarting Safari afterwards:
defaults write com.apple.Safari IncludeInternalDebugMenu 1
From the new Debug menu in Safari, select Use Multi-process Windows to remove the tick before it and deactivate this feature.
While this prevents tab reloading in the background it will disable extensions and gestures in Safari. But it can be easily activated again via the Debug menu.

Opera Mobile for Windows + Reported Screen Size

I know this isn't a direct programming question, but's it's kinda relevant as I'm trying to get a good testing environment set up before I embark on my latest project.
I'm trying to set up Opera Mobile for Windows to allow me to test a new website. The UserAgent I get is a fairly generic one, so my workaround is to tweak my mobile.browser file to have the correct screen width and height of the target device.
Is it possible to add to the list of "fake" user agents that Opera Mobile for Windows can pretend to be? It currently supports S60, Android and Windows Mobile.
You can modify headers using Fiddler scripts. From the examples at http://www.fiddler2.com/fiddler/dev/scriptsamples.asp, here's a line that might be of particular interest:
Pretend your browser is the GoogleBot webcrawler
oSession.oRequest["User-Agent"]="Googlebot/2.X (+http://www.googlebot.com/bot.html)";
OnBeforeRequest