Android remote debugging for Phonegap app does not work

Question

Hi I am trying to debug my phonegap app on my device via Chrome I have followed all the steps and my phone is recognized by adb devices command,

Then I go to chrome://ins

Answer 1

If you're using Phonegap Build, add the following to your config.xml to be able to inspect the webview in the Chrome dev console.

First, make sure your widget tag contains xmlns:android="http://schemas.android.com/apk/res/android"

<widget 
    xmlns="http://www.w3.org/ns/widgets" 
    xmlns:gap="http://phonegap.com/ns/1.0" 
    xmlns:android="http://schemas.android.com/apk/res/android"
    id="me.app.id" 
    version="1.0.0">

Then add the following

<gap:config-file platform="android" parent="/manifest">
     <application android:debuggable="true" />
</gap:config-file>

It works for me on Nexus 5, Phonegap 3.7.0.

<preference name="phonegap-version" value="3.7.0" />

Source: https://www.genuitec.com/products/gapdebug/learning-center/configuration/

Answer 2

The problem is that remote debugging used to only work for the Chrome browser on Android, but not in webviews inside of apps like phonegap uses. But with Android 4.4 (Kitkat) and Phonegap 3.3, this is now supported.

I wrote a blog post about it here:

http://adamwadeharris.com/remote-debugging-in-phonegap-with-chrome-devtools/

Basically you need to enable webview debugging in the app's main Java file, and make sure your app is targeting API version 19 (Kitkat). If you don't have a device with Kitkat, you could use an emulator instead.

Here's how you enable webview debugging:

In platforms/android/src/com/yourAppName/YourAppName.java add the following lines under the other import statements

import android.os.Build;
import android.webkit.WebView;

And add the following inside the onCreate method:

if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
  WebView.setWebContentsDebuggingEnabled(true);
}

Answer 3

It seems to be a bug on the phone. I fixed by doing:

1. Select Developer options
2. Revoke USB debugging authorized
3. turn off and on the USB debugging switch
4. connect to your PC
5. now, just accept the two authority dialog, and it will work fine in AndroidStudio and Chrome.

Answer 4

As it is already said in some comments, this is working out of the box since cordova 3.3+ and android 4.4+. You do not need to set anything in the AndroidManifest.xml.

If you use cordova build or cordova run the default build mode will be "debug". You can see this also in the generated apk file name which will look like:

{app_name}-debug-unaligned.apk

In this case you just need Chrome in Version 32+ and select Chrome menu > Tools > Inspect Devices (of course after you deployed the app to your device and turned on usb debugging).

For additional info look also here: https://developer.chrome.com/devtools/docs/remote-debugging

Concerning the authentication problem... When you first run cordova android run your app will be deployed to your phone and you need to confirm the authentication dialog and make a tick to remember your choice. After this you should be good to inspect the deployed app in the chrome inspector.

Answer 5

Here is another solution that might work for some people

A long time ago I had setup the certificate signing with Phonegap Build and because of that it was automatically generating "release" versions of my app. It was so long ago I had forgotten about this little detail.

To get it to give you a debug version of the app you have to specifically choose No key selected in the dropdown for android on the Phonegap Build page. Then when you download the apk it generates, it will have appname-debug.apk instead of appname-release.apk.

Answer 6

This is nice for me:

adb logcat CordovaActivity:V CordovaLog:V Cm
CordovaWebView:V IceCreamCordovaWebViewClient:V *:S