Simulate Android's Webview on PC's Firefox? - android

As part of my software development job (for Android), I need to inspect the content of numerous HTML pages when viewed via Android's WebView.
So far, I have been able to accomplish that by dumping the HTML content to a file in /data/data/<package-name>/files/, then using adb pull to copy it to the PC for easier and more comfortable inspection (larger screen and a keyboard).
I would like, however, to accelerate the process by dumping that content to a file directly from my Firefox browser on my PC. I have heard of so called "User Agent Switchers" add-ons that can fool the remote site to be thinking it communicates with a different type of browser, but can this really work when not only an agent string need to be emulated but also the screen size?
Your learned advice and tips would very much appreciated.

1) Use the user agent switcher.
2) Get the mobile profile addon.
3) Resize the window to emulate screen size changes. A quick Google search finds an addon that can handle preset window resizing: https://addons.mozilla.org/en-US/firefox/addon/window-resizer/ (If this won't do, look around the addon site- there are multiple that can do this).

Related

Performing mobile search on an android device using python

How might I go about performing automated mobile search using python?
I have a program exploiting the Microsoft Rewards program, but currently I'm limited to desktop search. The bot performs random searches via bing for various accounts to gain points, later redeemed for voucher codes.
My intention is to do the same for mobile.
I appreciate this is quite a general question, but despite my best efforts, I can't find even a starting point.
This can be done via a desktop through a browser mobile device simulation.
Chrome browser: More tools -> developer tools -> toggle device toolbar.
This can also be done via hotkeys and hence suitable for automation. Now have the program perform searches using the same desktop search protocol; searches will be performed as if they're from a mobile device.
Others browsers have this capability.

How to check responsive UI on mobiles?

i'm working on PC -windows 10 and i'm looking for a software to check different screen resolutions for testing a website's responsive UI .I'm currently working with Chrome's debugger but i wonder which tools do you guys using.
You can use following techniques:
1) developer console has responsive tool.
2) resize your browser
3) host it temporarily using ngrok and open that link in your mobile browsers.
4) there are many online tools also which will help you to see responsiveness' by selecting type of device.

Is there a way to use Python to emulate a non visible external monitor, and capture the video data from it?

Beginning with the end in mind, I am looking into creating an Android app that would act like iDisplay, or AirDisplay.
Both of the aforementioned apps are used on an Android device to act like a secondary screen for a Mac/Windows computer. However, as they both cost $10-$4, I am looking into creating a free version of them, possibly with a few more features, for free.
However, I have been unsuccessful in my attempts to find any libraries for a Python client that acts as an external monitor and grabs the video data from the "unseen" external screen, let alone code examples for anything remotely similar.
(Please note that I understand that I can grab the screen data, and have it mirror the display, but I am attempting to find a way to extend the desktop)
Is there a way to do this in Python? Or should I look into some other languages?
Ultimately, I would prefer it to be cross-platform, but if you can only offer a solution for Windows, Linux or OSX, they are all appreciated.

Embed a Mobile Emulator on a Website?

I'm basically wondering if it was possible to create a functionality similar to this site: http://www.howtogomo.com/en/#gomo-meter
I want to add some kind of feature on my website that will allow visitors to check to see how their websites looked on a mobile device like an iPhone or Android phone.
You could fire up the android emulator from the android sdk , then using android debugging bridge fire up the following command
adb shell
am start -a android.intent.action.VIEW -d http://stackoverflow.com
then follow the following blog
http://android.amberfog.com/?p=168 , to take screen shot .
No. It looks like this site renders the website on the server side, and then sends down an image of this to your browser.
If you are interested only in Android and iPhone (and similar smartphones with browsers based on webkit) then you could try a similar approach to http://iphonetester.com. This uses a frame embedded to simulate the size (in pixels) of an iPhone. Note, that even though these browsers may be based on webkit, it doesn't mean their implementation is the same - see http://www.quirksmode.org/webkit.html for variance across different webkit based browsers.
This won't work if you want to stray to other non webkit based browsers.

Debugging CSS layout glitches in Android

We have an existing web site, and I've been asked to test its compatibility with mobile browsers.
I've installed the Android SDK onto my desktop PC. I'm able to view my localhost site in the emulator, and I have identified a number of glitches in the page layout which occur in the Android browser.
But since none of these issues occur in any desktop browser, I've been struggling with how to debug them. For example, in Firefox, it's very easy to use Firebug to see what stylesheets have been appies and to adjust them on the fly to see how it affects the layout. But I haven't found a way to do anything similar on the Android emulator.
The question is, short of trial+error, how do I go about working out what is causing those layout issues? Does the Android browser (or the Android SDK) have any kind of tools that are useful for debugging CSS? If so, how do I use them?
[EDIT] I haven't found a solution to this, so I'm throwing open the doors to the bounty hunters...
Weinre is probably the closest to what you're looking for:
If what you're looking for is something that allows you to tweak layout in realtime it should make you happy.
https://chrome.google.com/webstore/detail/geelfhphabnejjhdalkjhgipohgpdnoc?hl=en-US
https://chrome.google.com/webstore/detail/cllkoedgiefnomcccogcalmjogjfcpji?hl=en-US
https://chrome.google.com/webstore/detail/cghdkdcepiflkhaddpomjehcmdojgobh?hl=en-US
I found several options that appear as though they should work for you if an emulator/simulator will suffice or at least get you started. The benefit to this is that the Chrome Developer Tools appear to work with the add-ons!
Personally, I would much prefer to do this on actual Android hardware. In usage a touch screen handset is quite different to even the most accurate emulator; things such as gamma, pixel density, performance, touch interaction (are your links big enough?), portrait/landscape orientation and even the fact you hold it in your hand makes it quite different to the desktop experience. If you want to see how well your site works on mobile/Android, get a cheap second hand device to test on!
As for the debugging; I always include my own "log" function which creates a div#console if the firebug/browser console is unavailable. This works reasonably well for debugging on a handset with the caveat that it covers part of the content. You can then print out the current style of an object with something like
log(window.getComputedStyle(document.getElementById("myobj"));
Note: The above will not work in IE.
You may have already seen this, but the SDK Documentation Site has some basic information on developing and debugging web apps on Android:
Web Apps Overview
Debugging Web Apps
Hope that Helps!
I don't know how you detect a mobile device but I detect a client with the user agent. Because of this I can simply send a different user-agent string to test CSS which works fairly well.
For Firefox I use User Agent Switcher. Additionally I use the Web Developer tool not only to view all settings but also the Resize option to simulate the viewport width.
Apple's Safari has a developer extension and within also a User Agent Switcher. You can add your own User Agent string.
Chrome provides tools for doing this now. Just visit:
chrome://inspect/
With your device connected and ADB running - you can then use all of the Chrome web element inspection tools. This works with the browser, but also with any app that renders in a WebView (e.g. Cordova).

Categories

Resources