debug javascript in android emulator with phonegap

Question

I am new to phonegap and android development. May I know how can I debug javascript error on the emulator? I have heard about ADB may I know how can I use and install it on wind

Answer 1

If you use console.log you can do simple print statements. Aswell as using adb to view them, you can use a log viewer on the device and view the logs there. More info: http://www.technomancy.org/android/javascript-debugging/

Answer 2

Phonegap debug still exists. the one I know of is in phonegap build found in the settings and tick the debug application option. It will then rebuild your app when you save it. A debug button will appear in the application page along with the rebuild options. (this service also uses a built in weinre)

Another option which I also find the fastest is jsconsole.com. Its very easy to set up and requires almost no configuration compared to other methods of debugging where you need to install lots of things like drivers and SDKs.

NOTE!

In PhoneGap 10 when you build your app and any requests outside the app(as if there is no internet) fails,you will have to add this in your config.xml

<gap:plugin name="com.indigoway.cordova.whitelist.whitelistplugin" version="1.1.1" />
<access origin="*" />
<allow-navigation href="*" />
<allow-intent href="*" />

I was pulling my hair out trying to get any remote debugging tool to work only to find out outside requests were blocked by default. this saved me.

Answer 3

In Eclipse you can add an hook to the android emulator back button and inspect a value on the fly. Add the onBackPressed event manager and call the javascript console from there. From the eclipse debug perspective you will change the value of a String variable to what you want to inspect, and pass it to your app by calling super.loadUrl.

See the code below. Do not forget to enable the debugging of your application from DDMS view

public class MyActivity extends DroidGap {
    private String js = "";
    @Override
    public void onBackPressed() {  
        //add a breakpoint to the follow line 
        //and change the value for "js" variable before continuing execution
        super.loadUrl("javascript:console.log(" + js + ")");
        return;
    }
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.setBooleanProperty("keepRunning", false);
        super.setIntegerProperty("splashscreen", R.drawable.splash);
        super.loadUrl("file:///android_asset/www/index.html", 20000);
    }
}

Answer 4

You could at least log debug stuff to the adb console by calling console.log() in JavaScript. Maybe that would suffice?

To view log output using adb, navigate to your SDK platform-tools/ directory and execute:

adb logcat

See logcat Command-line Tool

Answer 5

Yes, you have log errors with console.log and show the LogCat tab in Eclipse. There, Web Console messages (including JS errors) will show up. It's a little verbose so you have to filter to show just the Web Console tags but it works well. Described here: SHOWING CONSOLE CONSOLE.LOG OUTPUT AND JAVASCRIPT ERRORS WITH PHONEGAP ON ANDROID/ECLIPSE

Answer 6

You can now use Chrome dev tools to remotely debug Android Phonegap apps! I wrote up instructions here: Remote debugging Phonegap apps with Chrome Dev Tools

Steps for Android emulator:

1. Navigate to chrome://inspect/ in Google Chrome on your desktop computer.
2. Locate Android emulator on Devices tab and click 'inspect' link

See also Get Started with Remote Debugging Android Devices