Debug javascript in a telephony Android emulator

Question

I am new to phone and Android development. Can I find out how I can debug javascript error on emulator? I heard about ADB, can I find out how I can use and install it on Windows 7? I have ajax called with jsonp, but there is no response to the emulator. However, I can call it ajax with a browser on windows. Can I find out what went wrong?

Answer 1

You could, at a minimum, write debug files to the adb console by calling console.log () in JavaScript. Maybe this is enough?

To view the log output using adb, go to the platform-tools / SDK directory and do:

adb logcat 

See the logcat command line tool

Answer 2

Nov 2016 Update: It looks like this is no longer working.

The easiest and one of the most powerful ways is http://debug.phonegap.com (it uses Weinre if you're interested). You just

• select a random line, say r4nd0m ,
• enter <script src="http://debug.phonegap.com/target/target-script-min.js#r4nd0m"></script> in index.html
• visit http://debug.phonegap.com/client/#r4nd0m and you are instantly debugging your mobile web application.

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

• View and modify the DOM
• CSS Editing
• A console for actively debugging and running Javascript remotely.
• Other things, such as: storage, resources, timeline, profile, etc.

Answer 3

Now you can use Chrome dev tools to remotely debug Android Phonegap applications! I wrote instructions here: Remote debugging Phonegap applications using Chrome Dev tools

Steps for Android emulator:

• Go to chrome: // check / in Google Chrome on your desktop computer.
• Find the Android emulator in the "Devices" tab and click on the check link

See also Getting Started with Remote Android Debugging Devices

Answer 4

Check out the recently published http://developer.android.com/guide/webapps/debugging.html

Answer 5

I would recommend jsconsole . It allows you to enter any JavaScript on the page and provides a basic console. There's a good tutorial on remote debugging .

Answer 6

Yes, you have log errors with the .log console and show the LogCat tab in Eclipse. Web console messages (including JS errors) will appear there. This is a little verbose, so you should filter to only show web console tags, but it works well. DESCRIBED HERE: SHOW CONSOLE CONSOLE.LOG EXIT AND JAVASCRIPT ERRORS FROM PHONEGAP TO ANDROID / ECLIPSE

Answer 7

I found that this works for debugging javascript errors for Android / Phonegap when testing an application through Eclipse in Windows 7.

Just go to Window> Show View> Other ...

Then select LogCat in the Android folder.

A window / tab opens where the Android emulator sends its logs and error messages. You can separate this window and place it outside the Eclipse IDE (I found this useful). You can also control the types of errors that you see by selecting any of the 5 colored letters in the upper right corner of the window.

To hide useless information so that you just see errors, make sure you only have (E). Personally, I also like the selected warnings (W), as well as the selected errors (E).

Hope this helps!

Answer 8

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

Features:

• add / remove / enable / disable breakpoints
• watch expressions
• step in / over / exit
• suspend exception
• call navigation stack
• local variable checking
• remote console
• javascript syntax and runtime error report
• view / edit / delete local storage items
• view / edit / delete session storage items
• view / edit / delete WebSQL database records (watch video)
• viewing page resources (images, scripts, html)
• remote console support improved (stacktrace)
• Debugger: Advanced Object Control
• Debugger: conditional breakpoints
• Debugger: continue here.

Answer 9

I easily solved it two steps.

Change logging level

In config.xml add this line

  <log level="DEBUG"/> 

Run Cordoba Journal

This is a bat file that you can simply run and track all the log messages, go to the phonegap project and go to \platforms\android\cordova , then open log.bat , you can now emulate your application using the command line

 cordova emulate 

and the log will be shown in cmd, which will pop up when opening log.bat

Answer 10

If you want to configure NodeJS somewhere, you can do some advanced debugging with John Boxall iBug , which although it was developed for the iPhone, which I tested on Android, works fine. It is mainly firebug lite for mobile devices. I’m pointing out the reason my Node plug has changed a lot and John’s code will not work on a modern JS host, so I launched it to run it and run on nodeJS 0.2.3, YMMV in later versions of nodeJS.

Answer 11

If you use console.log , you can do simple print instructions. Also, using adb to view them, you can use the log viewer on the device and view the logs there. Additional information: http://www.technomancy.org/android/javascript-debugging/

Answer 12

The best solution to throw exceptions and display in the console is the following code:

 window.onerror = function(msg, uri, line) { console.log(msg + uri + line); } 

Answer 13

In Eclipse, you can add a snap to the back button of the Android emulator and check the value on the fly. Add the onBackPressed event onBackPressed and call the javascript console. From an eclipse debugging point of view, you change the value of the String variable to what you want to check and pass it to your application by calling super.loadUrl .

See code below. Remember to enable 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 14

If you use the Phonegap assembly and want to debug it using the Chrome console, here is a working solution. It is possible to debug WebViews using USB debugging ( https://developer.chrome.com/devtools/docs/remote-debugging#debugging-webviews )

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" /> 

Create the application in Phonegap Build, install the APK, connect the phone to USB, enable USB debugging on your phone, then visit chrome: // inspect.

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

Answer 15

Debugging PhoneGap / Apache Cordova App is easy with GapDebug

• Download and install GapDebug from https://www.genuitec.com/products/gapdebug/

• Launch GapDebug on your PC / Mac

• Enable the developer option and USB debugging on the Android device (Settings → Developer Option (ON) → USB Debugging (ON))

• If the developer option is not found (Settings → About phone → Press “Build number” 7 times)

• You can debug your application from your GapDebug

to handle

• 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

Answer 16

Phone debugging still exists. the one that I know is in the phone call assembly found in the settings, and check the debug application options. Then it will restore your application when you save it. The debug button appears on the application page along with the rebuild options. (this service also uses the built-in weinre)

Another option that I also find the fastest is jsconsole.com . It is very easy to configure and requires almost no configuration compared to other debugging methods, where you need to install many things, such as drivers and SDKs.

ATTENTION!

In PhoneGap 10, when you create the application and any requests outside the application (as if it were not connected to the Internet), you should add this to your config.xml

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

I pulled out my hair, trying to get any remote debugging tool to work just to find out that external requests were blocked by default. it saved me.

Answer 17

Update: PhoneGap is currently called Apache Cordova, and if you want to use it to develop Android applications, you need to install Android Studio. To open the Logcat console from Android Studio, open your Android project (this is the platform / android folder in your Cordova project) and select Tools-> Android-> Android Device Monitor.

Android Device Monitor (AVD) can work autonomously, so you can create direct access to avoid all of this. AVD automatically receives log messages from your emulator launched using Cordova, and allows you to easily set filters to reduce the large amount of output received from the emulator. I prefer to filter by application name.