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

Another option is Visual Studio, which has prerelease support for debugging Cordova apps:

Unified debugging experience. Cross-platform development often requires a different tool for debugging each device, emulator, or simulator. Different tools mean different workflows and lost productivity every time you switch devices. With Visual Studio, you can use the same world-class debugging tools for all deployment targets, including Windows, the Android emulator, attached Android devices, iOS devices and emulators, and the Apache Ripple emulator.

Now that Microsoft has released Visual Studio Community edition for free, you can give this a try at no cost. You will need to download both Visual Studio, and Visual Studio Tools for Apache Cordova.

Answer 2

You can debug Cordova Android Applications which are installed on your phone remotely from your computer via the USB cable (you can also remotely click on the web application as if you were viewing the web application from your compueter) with "Chrome Remote Debugging". You can also debug web application viewed in the Stock Android browser or Chrome on Android this way.

1. Enable developer mode on your Android device (go to settings -> about phone -> tap 7x on the build number).

2. Connect your computer with your phone via USB cable.

3. Lunch Chrome on your computer and navigate to chrome://inspect and click the "Inspect" button next to the remote device which you want to debug (under the "Devices" tab). OR right click inside Chrome on your computer -> Inspect -> Costumize and control DevTools (3 vertical dots - top right corner of the developer tools) -> More tools -> Remote Devices -> under Devices on the left side, click on your device to which you are connected via USB -> click on the Inspect button for the application you want.

4. Then click on "Console" and you can debug JavaScript the same way, as you would on a normal web application with Chrome developer tools.

Answer 3

If you can use an Android 4.4+ device, then you can use Chrome Remote Debugging even on the app's internal WebView. It's a much better debugger than Weinre, but the key is using the recent Android version.

Recent Cordova builds automatically enable this kind of debugging as long as it's a debug build (it's turned off in --release builds).

Answer 4

The best for me is to attach the Chrome debugger.

To do it, run your app in a emulator or device (using $cordova emulate)

then, open Google Chrome and go to chrome://inspect/

You'll see a list with running apps. Your app should be there. Click on "inspect".

A new window will open with developer tools. There you can click on "console" to check for errors

Answer 5

You can use Intel XDK IDE to develop and debug on emulator or on real device

I also found Visual Studio 2015 RC tools for cordova very good, with it's ripple emulator

Answer 6

If you use phonegap build, there is an option to enable debug.

---

For local builds, you can install weinre with npm : https://npmjs.org/package/weinre

And the link to the weinre docs : http://people.apache.org/~pmuellr/weinre/docs/latest/

---

And there is something called chrome remote debugging but I don't know much about it, you can have a look at Raymond Camden's article : http://www.raymondcamden.com/index.cfm/2014/1/2/Apache-Cordova-33-and-Remote-Debugging-for-Android

Docs for the chrome remote debugging : https://developers.google.com/chrome-developer-tools/docs/remote-debugging (if I understood correctly you need an android device with chrome as default browser) Maybe the closest to your dream solution?