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?
Related
I'm trying to debug a Phonegapp app on my Android tablet running via the Phonegap developer app.
According to this post, and Google's own remote debugging docs, Phonegap should show up as a tab in DevTools > remote devices because Cordova is basically just a WebView (as I understand it.) The device is connected via USB and is successfully detected. Alas, this is all I see when my app is running on the device:
If I open Chrome on the tablet, and go to a page, it does show up, so it seems it's only the app it won't show. What am I doing wrong?
[Update:
I also found this post, which makes the process sound decidedly more complicated. However, it's 3 years old and talks about modifying a file (AndroidManifest.xml) that I don't have in my PG build, so I assume it's outdated.]
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.
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.
I have a webview that works fine on iOS, but not Android. Is there a tool where I can connect to Android webview in browser and debug it using firefox or webkit console?
Currently I have no idea what is causing the webview not to work in Android.
In iOS I am able to open my iPad or iPhone simulator, open the webview pane, and in my desktop browser I listen to port 9999, and it shows me the tools you see in webkit developer tool/debugging tools.
I am looking for similar tool for Android, or at least to get me started on debugging.
The easiest way to debug WebView is to connect your Android device to PC by USB and inspect your WebView by Chrome dev tools.
So, you will need:
1) Activate USB debugging on our devise. You can find it Settings >> Developer Options >> Debugging >> USB Debugging (activate checkbox)
2) Connect you devise to Computer by USB
Note: If you are developing on Windows, install the appropriate USB driver for your device. See OEM USB Drivers on the Android Developers' site.
3) Open Chrome browser and type in the URL field: chrome://inspect/#devices
4) Confirm that 'Discover USB devices' activated
5) On your device, an alert prompts you to allow USB debugging from your computer. Tap OK.
6) On the chrome://inspect page displays every connected device. Click inspect for connected device and you will get console.
More detailed manual is Debugging Android WebView
Check out weinre. It provides Chrome developer-like tools for debugging from WebKit browsers to browsers running on remote devices.
Those are the steps i use to debug a WebView content in a device:
Enabled Developer Mode in your device
Plug the device in the PC and enable USB debugging (install driver if needed)
Add this line in your custom Application class or in the Activity where the webview is loaded
//if your build is in debug mode, enable webviews inspection
WebView.setWebContentsDebuggingEnabled(BuildConfig.DEBUG);
Open Chrome and go to chrome://inspect and you should see your device in the Remote Target list
Start debugging of your app from Android Studio
When a WebView will be added to the layout, in the tab you opened will appear a screenshot with a Inspect button, click there and a Chrome developer console will open
If you are not using Android 4.4, according to http://developer.android.com/guide/webapps/debugging.html you're going to enjoy the old-school way of debugging ...
If you don't have a device running Android 4.4 or higher, you can
debug your JavaScript using the console JavaScript APIs and view the
output messages to logcat.
For Android 4.4 and better, you'll enjoy remote debugging, see https://developers.google.com/chrome-developer-tools/docs/remote-debugging#debugging-webviews
Starting Android 4.4 (KitKat), you can use the DevTools to debug the
contents of Android WebViews inside native Android applications.
I have worked with a webview using javascript in my previous project and i encountered the same issue.
I have not found a way to directly debug my code, but i used a javascriptinterface to send information to my activity. This way you can log the activities of your javascript or show some Toast messages.
When your java methods aren't called, it generally means you have made some sort of error in your JS code.
I know this is no high tech solution to your issue, but it is something at least, and it worked for me.
Good luck,
Wottah
Try to acces to ADB Logcat of the device by installing adb on your desktop...