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

Update Nov 2016: looks like this doesn't work anymore.

The easiest and one of the most powerful ways is using http://debug.phonegap.com (it uses Weinre in the background, if you care). You just

1. pick a random string, say r4nd0m,
2. inject <script src="http://debug.phonegap.com/target/target-script-min.js#r4nd0m"></script> into your index.html
3. visit http://debug.phonegap.com/client/#r4nd0m and you will instantly be debugging your mobile web app.

Things you can do (similar to Firebug or Web Inspector):

1. Viewing and changing the DOM
2. Editing CSS
3. Console for live debugging and running Javascript remotely.
4. Other stuff, like: storage, resources, timeline, profile, etc.

Answer 2

Update: nowadays PhoneGap is called Apache Cordova and if you want to use it to develop Android apps, you have to install Android Studio. To access logcat console from Android Studio, open your Android project (it is the platform/android folder inside your Cordova project) and select the menu Tools->Android->Android Device Monitor.

Android Device Monitor (AVD) can run alone, so you can create a direct access to avoid all this path. AVD will automatically get the log messages from your emulator launched with Cordova, and it allows you to easily set filters to reduce the big amount of output received from the emulator. I specially prefer to filter by application name.

Answer 3

There is (finally) a tool available to allow proper JavaScript debugging for Android - http://www.jshybugger.org/

Features:

• add/remove/enable/disable line breakpoints
• watch expressions
• step into/over/out
• pause on exception
• call stack navigation
• local variable inspection
• remote console
• javascript syntax and runtime error reporting
• view/edit/delete Local Storage items
• view/edit/delete Session Storage items
• view/edit/delete WebSQL Database records (watch Video)
• view page resources (images, scripts, html)
• remote console support enhanced (stacktrace)
• Debugger: enhanced object inspection
• Debugger: conditional breakpoints
• Debugger: continue to here

Answer 4

I'd recommend jsconsole. It lets you inject any JavaScript into the page and provides a basic console. There's a nice tutorial on remote debugging.

Answer 5

If you are willing to set up NodeJS somewhere you can do some extended debugging with John Boxall's iBug, which although was designed for the iPhone I have tested on Android and it works fine. It's basically firebug lite for mobile devices. I'm pointing to my fork cause Node changed a lot and John's code wouldn't run on a modern nodeJS so I patched it to get it up and running on nodeJS 0.2.3, YMMV on more recent versions of nodeJS.

Answer 6

Debugging PhoneGap / Apache Cordova Application is easy with GapDebug

• Download & Install GapDebug from https://www.genuitec.com/products/gapdebug/

• Run a GapDebug on You PC / Mac

• Enable Developer Option & USB Debugging on your android device (Settings -> Developer Option (ON) -> USB Debugging (ON))

• If Developer option is not found (Settings -> About Phone -> Click Build Number for 7 times)

• You can Debug your application from your GapDebug

Refer

• https://www.youtube.com/watch?v=QHTI-utHfEE
• https://www.youtube.com/watch?v=AZJUSomFOwk
• https://www.youtube.com/watch?v=XEeWFIsgtsU
• https://www.youtube.com/watch?v=kiY03MBGkLo