I have an app I'm creating in Android Studio (windows 10) with a WebView.
At first I was emulating it on Nexus 5x API 23, and with this I could go into Chrome > Remote Devices, connect to my device, and it would see my app and I could debug the javascript of my app just like as if it was a website.
Now I'm using Nexus 5x API 26, and the device still shows up in remote devices, and when I open up a Chrome browser within the emulated device, the tabs are debuggable from my Windows Chrome, but my WebView app doesn't show up - it says 'No Browser Detected' for my app.
I'd really like to be able to use the higher version because the device I hope to support has advanced CSS features (display: grid) that I really like.
I fixed it by setting the following property in the onCreate() implementation:
WebView.setWebContentsDebuggingEnabled(true);
Related
My workplace develops hybrid mobile apps for iOS and Android using the ionic framework.
This means that on-device debugging mostly happens through Chrome's remote debugging feature.
However, I have the following issue when attempting to debug our apps on my phone:
Screenshot of chrome://inspect
As you can see, Chrome displays my device, but does not view any of my tabs or WebView instances. This is independent of what chrome version or WebView implementation is currently in use, it just shows nothing.
I should mention running/installing etc. apps via ADB works fine and the device is detected. Just chrome remote debugging is completely non-functional.
My Device is Xiaomi Poco X3 running ArrowOS 11.0 (Android R).
Is there anything I am missing here?
My Android (4.4.2) ships two browsers: chrome and 'The Appplication Called Internet'. Using chrome://inspect, I can remotely debug Chrome on the phone in Chrome on my computer, like this
https://developers.google.com/web/tools/chrome-devtools/debug/remote-debugging/remote-debugging
Is there a way to do the same with The Appplication Called Internet ?
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!
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.
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.