Is there a real solution to debug cordova apps [cl

Question

I spent the last two days trying to figure out how to debug an HTML5 app I created using Cordova 3.2 and deployed to an Android 2.3 device. All the articles/posts I've seen provide hacks rather than real solutions :( and most of the time, none of them works for my case; debug the css styles and the Angularjs code inside my app..

So far I tested;

debug.phonegap.com

I injected the script to the index.html file then visited the generated URL in debug.phonegap.com but nothing happens; only a blank page.

Weinre

Most of the articles I found point to obsolete Github repository that countain a Jar file.. but it's not found :(

Edge inspect

It works and shows the webpage I'm browsing on the PC inside the mobile.. But the problem is that it uses some other integrated browser (or emulator) than the one that runs phonegap apps; so the results are not accurate.

Chrome emulator

Same as Edge inspect; it doesn't allow to view real web-kit v530 that is shipped with Android 2.3.

The dream solution

The perfect solution would be an extension to Google Chrome (desktop) that enables you to switch the desktop browser to the same one found in Android 2.3 platforms; no emulation no hacks, just the browser itself with web-kit v 530.

Unfortunately such solution doesn't exist :( or I'm wrong?

Any suggestions?

Answer 1

NOTICE

This answer is old (January 2014) many new debugging solutions are available since then.

---

I finally got it working! using weinre and cordova (no Phonegap build) and to save hassle for future devs, who may face the same problem, I made a YouTube tutorial ;)

Answer 2

Use Android Device Monitor

Android Device Monitor comes packages with android sdk which you would have installed previously. In the device monitor you can see you entire device log, exceptions, messages everything. This is usefully to debug application crashes or any other such problems. To run this, go to tools/ folder inside your android sdk “/var/android-sdk-linux/tools”. Then run the following

chmod +x monitor
./monitor

If you are on windows, directly open the monitor.exe file. There is a tab below “LogCat” where you will see all device related message. You will see all messages here including android device exceptions which are not visible chrome inspect device. Be sure to create filters using the “+” sign in logcat tab, so that you see messages only for your application.

Source: http://excellencenodejsblog.com/phonegap-debugging-your-android-application/

Answer 3

Here's the solution using Phonegap Build. Add the following to your config.xml to be able to inspect with Chrome Remote Webview Debugging.

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

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

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

Answer 4

Devices with android <=4.0.4 need to add the plugin https://www.npmjs.com/package/cordova-plugin-crosswalk-webview-pgb-adapt

Answer 5

As far as I know, the only productive tool for real debugging in Cordova apps for Android platforms from 2.2 to 4.3 is jshybugger. Weinre is an inspector, not a debugger. JsHybugger instruments your code allowing you to debug inside the android WebView.

Answer 6

If you're using Cordova 3.3 or higher and your device is running Android 4.4 or higher you can use 'Remote Debugging on Android with Chrome'. Full instructions are here:

https://developer.chrome.com/devtools/docs/remote-debugging

In summary:

• Plug the device into your desktop computer using a USB cable
• Enable USB debugging on your device (on my device this is under Settings > More > Developer options > USB debugging)

Or, if you're using Cordova 3.3+ and don't have a physical device with 4.4, you can use an emulator that uses Android 4.4+ to run the application through the emulator, on your desktop computer.

• Run your Cordova application on the device or emulator
• In Chrome on your desktop computer, enter chrome://inspect/#devices in the address bar
• Your device/emulator will be displayed along with any other recognised devices that are connected to your computer, and under your device there will be details of the Cordova 'WebView' (basically your Cordova app), which is running on the device/emulator (the way Cordova works is that it basically creates a 'browser' window on your device/emulator, within which there is a 'WebView' which is your running HTML/JavaScript app)
• Click the 'inspect' link under the 'WebView' section where you see your device/emulator listed. This brings up the Chrome developer tools that now allow you to debug your application.
• Select the 'sources' tab of the Chrome developer tools to view JavaScript that your Cordova app on the device/emulator is currently running. You can add breakpoints in the JavaScript that allow you to debug your code.
• Also, you can use the 'console' tab to view any errors (which will be shown in red), or at the bottom of the console you'll see a '>' prompt. Here you can type in any variables or objects (e.g. DOM objects) that you want to inspect the current value of, and the value will be displayed.