Android Remote Debugging For Phonegap App Does Not Work

April 20, 2024 Post a Comment

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://inspect/#devi

Solution 1:

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);
}

Solution 2:

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).

Baca Juga

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.

Solution 3:

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

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

Solution 4:

If you see "Pending authorization" keeps flashing try to remove all Chrome updates from the device and downgrade to Chrome v.33. Seems something got broken in one of the latest Chrome builds(got the problem with Chrome v.44). Here is the link to the related issue: https://code.google.com/p/chromium/issues/detail?id=512150

Solution 5:

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-fileplatform="android"parent="/manifest"><applicationandroid:debuggable="true" /></gap:config-file>

It works for me on Nexus 5, Phonegap 3.7.0.

<preferencename="phonegap-version"value="3.7.0" />

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

Index Android