I have the Android SDK downloaded (on a mac), and no access to Android hardware. I can start up AVD and emulate various android devices fine, but I have some CSS I'd like to inspect in the Android browser on said emulated devices. I just can't figure out how to do this.
For iOS you can hook up Safari to the xcode emulator super easy, but I can't seem to figure out the equivalent for Android and Chrome. All of the tutorials I find on the topic tell you to use a meatspace device connected through USB! Doesn't even need to be chrome - any web inspector-like service at this point, that lets me see and change CSS on the fly, will do. Help!
Easy Peasy:
Start the Android Emulator (e.g. by running your project in Android Studio)
Start Google Chrome and visit chrome://inspect
Click the Inspect-link below the detected Emulator, and off you go!
Related
I want to get my hands dirty with app automation so I've been playing around with learning Appium (if anybody has any good tutorials send em my way!). I have an app on my local machine that I'm wanting to use for testing purposes.
The app is one I've created with c# and Xamarin Forms so I have all the files and the .apk locally.
I found a video that said you could use the chrome://inspect page to view apps in an emulator and even inspect them. When my app is running (starting it via Visual Studio) I can see it pop up in the device list but I don't have the option to inspect it.
I'm not sure how people feel about pictures but I don't really have any code to post so I'll just show you that the app is, indeed, running and what I see on the chrome devices page.
Here is my app running
And here is the device list from chrome. You can see the emulator there but I can't do anything with it
What am I missing here?
Chrome://Inspect is a part of Chrome Dev Tools that lets you see port forwarded web views from the mobile in a desktop browser. This is because we cannot inspect elements in Chrome mobile (something we do in desktop browser with CTRL+SHIFT+I) and we have to forward the chrome mobile window to chrome desktop.
To inspect element, if you're working on a web page or web application, just simply right click on that page and choose Inspect
And in your case, for inspecting Android application (apk), you should use UiAutomatorViewer, AppiumStudio, Katalon mobile spy, etc...
Here is my answer to similar question: https://stackoverflow.com/a/58204262/7302505
I've followed https://developers.google.com/web/tools/chrome-devtools/remote-debugging
and am fine up 'till "Step 2: Debug content on your Android device from your development machine."
I'm logged into the same Google account on dev and remote browsers in all cases.
I see the device w/serial number, and it displays the fact that Chrome is running on the Android device, but I do not get the Chrome version or URL entry field as shown in the screen shot.
This is Android 5.0.1, with current versions of Chrome on both the OS X 10.10.x dev machine and the Android device.
I have also tried with all combinations of Chrome/Canary on the dev machine and Chrome/Chrome Dev on the Android machine with identical results.
Thinking it might be a browser extension or something, I also put Chrome and Canary on a freshly installed OS X 10.12.x beta with no extensions etc. with identical results.
Obviously, USB debugging is on, but the device also requires me to select one of three modes for the USB anyway. Selecting "charge only" disconnects the debugger, the other two lead to this same behaviour.
So...
A> Is there something I need to do that's not in the instructions on the above referenced page?
B> Is it possible that the carrier (TracPhone, it's a throw-away dev machine) is doing something funky at the Android level to keep this from working?
Please be gentle, this is my first Android experience so maybe I'm missing something obvious to the old hands out there.
Thanks,
ssteinerX
We can use the inspect element/mobile device emulator in Chrome to add/edit CSS on live sites and see how the site behaves. Is it possible to do the same directly on an android phone or tablet, somehow?
I have been asked to improve a site (but I don't have server access) but have noticed that its navigation behaves differently in the Chrome emulator and on my Android devices. (It might be a javascript that interferes or does something on the phone that is not picked up in the emulator)
If you're running a modern version of Chrome, you can use the Remote Debugging feature for Android devices. This require:
Chrome 32 or later installed on your development machine.
A USB cable to connect your Android device.
For browser debugging: Android 4.0+ and Chrome for Android.
For app debugging: Android 4.4+ and a WebView configured for debugging.
The full details are documented at the linked page from Google's documentation, but the process essentially consists of connecting the device to your computer, enabling ADB debugging, and navigating to chrome://inspect in Chrome on the computer. From there, you'll be able to use the inspector on the Desktop Chrome instance to debug into your pages within the mobile Chrome instance.
How do i deploy an NBAndroid app (by directly moving the .apk file or else compiling straight from NetBeans?) onto a connected tablet (HP Touch that i just put CyanogenMod ICS onto)? I connect it to my computer and it isnt recognised (like WebOS was) but Android ICS was installed fine. Do i need to use the bootloader to do this? I had a quick google and Stack search but could only see stuff relevant to using the emulator, and thought id probably get an answer here quicker.
Edit: this is the same question as this How to deploy android application to a device? which i discovered afterwards.
If the Tablet is not recogniced (have this problem at work, too, even with stock OS) maybe give it a try syncing it via a dropbox folder. Its the best bet for me, so far.
i found how to connect to a device via here
How can I connect to Android with ADB over TCP?
using this method you can get the .apk on the device without using dropbox
But the dropbox method is easier, even in development.
I'm working on a mobile web app. I have a variety of devices I'm testing with but one device I do not have is an Android device running Android 2.3.x. I've resorted to using Android AVD emulators via Eclipse.
It's good using the emulator for testing, however a few CSS styles of my web app render strangely in the Android 2.3.x Web Browser.
Is there any way to debug or experiment with the CSS using the default Android browser in an AVD emulator? I'm not sure if it's possible to somehow examine and alter the CSS in the browser so that I can figure out what the problem is (similar to what you do with Chrome dev tools or Firebug).
I've read that there is some way to do this using mobile Chrome for Android where it connects with Chrome on your desktop and you debug it that way... But I'm not sure about the default Android 2.3.x Browser.
You can connect from Chrome on your desktop to either an emulated Android device (e.g. an AVD started from Android Studio), or a usb connected real device (with USB debug enabled), running Chrome. Type in the following url into the desktop Chrome browser:
chrome://inspect/#devices
Then it will list any connected devices you can interact with. For example, you can get it to open a specific url and then inspect that tab - which provides for access to the web dev tools console - just like on desktop Chrome.