Is there a real solution to debug cordova apps

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?

[Debugging in PhoneGap · phonegap/phonegap Wiki](https://github.com/phonegap/phonegap/wiki/Debugging-in-PhoneGap) — agustibr, Mar 26 '14 at 14:14

score 150 · Answer 1 · edited Sep 23 '17 at 14:24

150

FOR ANDROID:

You only need to enable “USB remote debugger” within your android device and plug with a USB cable. Then open your application in the device. Chrome will detect the remote browser and you can see the console in the same way than you see it when you use Chrome locally.

Use this link: chrome://inspect/#devices in Chrome browser (you'll have to paste it into the nav bar).

If your app crashes in the device you only need to see the console’s log within your browser and see what happens. You also can add functionality, change variables, and override functions in the same way than we do it with our local browser.

Read this article for more information on the steps to take.

This will work ONLY with devices running Android 4.4+.

FOR iOS:

Use Safari for iOS, follow these steps:

1.In your iOS device go to Settings > Safari > Advanced > Web Inspector to enable Web Inspector

2.Open Safari on your iOS device.

3.Connect it to your computer via USB.

4.Open Safari on your computer.

5.In Safari’s menu, go to Develop and, look for your device’s name.

6.Select the tab you want to debug.

edited Sep 23 '17 at 14:24

João Pimentel Ferreira

14,289
10
80
109

answered May 14 '15 at 09:41

Neotrixs

2,495
4
28
58

3

I can see the console and my app in chrome on my computer, while my smartphone is connected via usb. Very cool solution. – emilie zawadzki Jun 22 '15 at 13:03
It did not find my phone until I ran `adb start-server`. – Leukipp Mar 14 '16 at 07:17
@Leukipp I also face same problem but after that add ADT on my windows system startup. my problem solve.. – Neotrixs Mar 18 '16 at 10:29
2

Answer presents solution to the wrong problem -- the question is not about debugging a browser, it's about debugging a WebView. These are slightly different as evident from a multitude of frustrated users confused because their WebViews where their applications are displayed, do not show up in `chrome://inspect`. – Armen Michaeli Jul 27 '16 at 15:39
1

Android 4.4+ :( That's the reason... – candlejack Aug 02 '16 at 21:36
@Leukipp I suggest you that if you use window Sysytem, then create batch (*.bat) file with code `adb start-server`. And run on system start every time – Neotrixs Apr 05 '17 at 06:00

numediaweb · Accepted Answer · 2016-10-12T11:41:41.357

73

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 ;)

edited Oct 12 '16 at 11:41

answered Jan 24 '14 at 16:35

numediaweb

16,362
12
74
110

I was missing the IP proper configuration, now it works flawlessly, thanks so much! – Juan Carlos Alpizar Chinchilla Nov 20 '14 at 18:24
You can use [this](http://localtunnel.me/") to debug web/cordova projects even if the device is not connected to the same WiFi network. – Aneesh Nov 23 '14 at 15:20
9

Weinre isn't debugger, it allows only DOM inspections, you can't debug js and even watch console messages – Bogdan Mart Jun 21 '15 at 08:28
Did you test GapDebug ? – Vincent Wasteels Oct 07 '15 at 14:31
It has been a long time ago since this question was asked :) maybe in my next project I will test it. – numediaweb Oct 08 '15 at 09:09
This method seems to be deprecated, take the one from @rdchambers in case you have a new-ish phone. – CodingYourLife Oct 08 '15 at 21:50
Consider raising the volume on the video? – Parsa Jan 10 '16 at 15:52
24

...how is a link to a youtube video an acceptable answer? – Meekohi Mar 25 '16 at 21:47
2

@Meekohi he made the video :) – candlejack Aug 02 '16 at 21:30
I'd rather have a link to a tutorial on a blog without video. I'll check it out anyway though! – natronite Sep 21 '16 at 09:11
10

As with all stackoverflow answers - a link to a solution (whether made by the author or not), is frowned upon. Keep the solutions here, and not externally where they might be gone one day. – DarkNeuron Oct 12 '16 at 10:15
Is there a webpage version of that tutorial? @numediaweb – Piterden Sep 20 '18 at 04:12

score 58 · Answer 3 · answered May 22 '14 at 15:51

58

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).

answered May 22 '14 at 15:51

rdchambers

1,416
12
11

Looks great - also noticed there is a phonegap build plugin available to enable this feature. – DavidC Jul 14 '14 at 13:18
1

As per your comment : it's turned off in --release builds (Thats not true) – Luckyy Sep 06 '14 at 05:58
9

Re. this, I found [this link](http://java.dzone.com/articles/debugging-android) useful. Pertinently, use Chrome to navigate to `chrome://inspect` and make sure "Discover USB Devices" is checked. This will show up any debug-able WebViews in connected devices. – Sharadh Mar 09 '15 at 06:09
the problem with this solution is that `console.log` doesn't seem to work. You need to go through `alerts` which is really a burden. – João Pimentel Ferreira May 03 '18 at 20:37
`(it's turned off in --release builds).` this notice saved my day! – maswerdna Mar 08 '20 at 19:27

score 35 · Answer 4 · edited Jun 24 '16 at 05:21

35

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

edited Jun 24 '16 at 05:21

sudo bangbang

27,127
11
75
77

answered Mar 10 '15 at 15:32

José

1,774
1
17
21

7

Please double check your answer will work in OP's conditions. The Chrome debugger only works with Android 4.4+. – Chris Neve Aug 20 '15 at 14:08

score 21 · Answer 5 · edited May 15 '16 at 22:13

If your app is running Cordova 3.3+ and your device is running Android 4.4+ then you can use Chrome Remote Webview Debugging to debug your Cordova app.

To be able to do that, you must first enable USB debugging on you phone.

Then open the "inspect devices" tab. In Chrome, go to Settings > More tools > Inspect devices.

If you launch your app on your device while it's connected to your computer, The Webview should appear in the devices list. Click on the "Inspect" link of your Webview and a Debug Tool for your Webview should appear.

Here is an article fully explaining how to do it: http://geeklearning.io/apache-cordova-and-remote-debugging-on-android/

This is one of the best and most complete answers of this comment section, even though it doesn't help OP because of 4.4+. — Chris Neve, Aug 20 '15 at 14:09

score 7 · Answer 6 · edited Sep 16 '14 at 22:52

7

Have you tried 'GapDebug'? Its free.

It appears to integrate versions of the Safari Webkit Inspector and Chrome Dev Tools to offer an integrated debugging experience on OS X and Windows.

edited Sep 16 '14 at 22:52

meshy

8,470
9
51
73

answered Sep 16 '14 at 22:23

Zaxxo

81
1
1

1

This is an essential tool especially for Windows users wanting to connect to step debug iPhone - I highly recommend it. – mike nelson Aug 07 '15 at 04:51

Josh · Answer 7 · 2014-11-13T21:10:49.273

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.

Since Intel's once-amazing XDK stopped support for its debugger, I've had to look for a new option. Visual Studio is the only one I've found that is all-in-one solution (IDE, debugger, plugin manager, etc.). Setup takes a while but it's very simple. I use Enterprise 2015. It builds but I'm not sure if it publishes yet (I haven't reached that point). — Victor Stoddard, Feb 01 '17 at 04:25

score 5 · Answer 8 · answered Jul 24 '14 at 14:32

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.

score 5 · Answer 9 · answered Jul 30 '14 at 15:50

5

Just want to add that you can debug android apps using Genymotion. It's WAY faster then the stock android emulator.

answered Jul 30 '14 at 15:50

Victor P

1,496
17
29

1

Genymotion allows to use chrome remote debugging since it is not treated as emulator but as real device. Camera and other hardware features work as well, but some of them are paid. – shirk3y Aug 25 '14 at 13:50

Mohamed Ali · Answer 10 · 2015-07-08T10:56:18.817

4

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

edited Jul 08 '15 at 10:56

answered Jul 05 '15 at 08:55

Mohamed Ali

3,717
1
33
39

score 4 · Answer 11 · answered Sep 04 '15 at 22:46

4

On Android 4.4+ w/SDK installed:

adb logcat chromium:D SystemWebViewClient:D \*:S

answered Sep 04 '15 at 22:46

Gringo Suave

29,931
6
88
75

score 4 · Answer 12 · answered Oct 09 '15 at 14:21

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/

HOLY BEJEEZUS!!! I can FINALLY debug my apk's!!! Thank you so much, I don't know why this isn't anywhere else more prominent. Including these notes verbatim in the readme of my project. — Josh, May 07 '18 at 13:17

QuickFix · Answer 13 · 2014-01-24T16:57:45.307

3

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?

edited Jan 24 '14 at 16:57

answered Jan 24 '14 at 16:14

QuickFix

11,661
2
38
50

Thanks for the infos; I prefer to use the free cordova way ;) and I got it working now (check my answer) thanks! +1 – numediaweb Jan 24 '14 at 16:36
1

check my edit, it seems that chrome is not far from your dream solution after all – QuickFix Jan 24 '14 at 16:58
Note that the device I'm using is runing android 2.3 while the chrome remote debugging requires Android 4.4 or higher. But thanks "QuickFix" ; I got everything working now.. see my tutorial ;) – numediaweb Jan 24 '14 at 17:18

tedi · Answer 14 · 2016-12-23T07:17:14.877

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.

Enable developer mode on your Android device (go to settings -> about phone -> tap 7x on the build number).
Connect your computer with your phone via USB cable.
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.
Then click on "Console" and you can debug JavaScript the same way, as you would on a normal web application with Chrome developer tools.

This works on my phone (android 6) but does not work on my tablet (note 8 android 4.4) — Danielo515, Jan 22 '17 at 15:58
It was a problem with the android web-view. Installing crosswalk plugin allows me to make this kind of debugging on older devices (up to jelly bean) — Danielo515, Jan 22 '17 at 20:31

score 2 · Answer 15 · edited Jun 24 '16 at 05:23

2

You can also debug with chrome your html5 apps

I create a .bat to open chrome in debug mode

cd C:\Program Files (x86)\Google\Chrome\Application
chrome.exe "file:///C:\Users\***.html" --allow-file-access-from-files --disable-web-security

edited Jun 24 '16 at 05:23

sudo bangbang

27,127
11
75
77

answered Jan 27 '14 at 08:27

dpfauwadel

3,866
3
23
40

1

Thanks but I found the best approach is to use weinre to debug the desing with the integrated webkit browser of the device itself! – numediaweb Jan 27 '14 at 12:54
1

I second that, whereas ripple gives you an average idea on how it will look when you release it, which is good, sometimes there are differences comparing the emulator and real device, mainly because the emulator works with the engine of the web browser you're running on it, which is not the same in some situations as your device will work. So I usually use both, ripple to design the UI, and weinre to test behavior when something doesn't works as expected – Juan Carlos Alpizar Chinchilla Nov 20 '14 at 18:28

Chris Halcrow · Answer 16 · 2015-09-23T07:12:54.430

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.

score 2 · Answer 17 · answered Apr 06 '16 at 08:58

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/

For Linux users, depending on your SDK installation method, it might also be found in ~/Android/Sdk/tools/monitor or just try typing `monitor`. — Strixy, May 19 '17 at 16:15

score 1 · Answer 18 · answered Apr 20 '15 at 20:10

I've loved weinre! How to use it:

First, put on your index.html (ensure app.settings.debugUrl is set before this):

  <!-- Weinre debugging -->
  <script type="text/javascript">
    if (app.settings.debugUrl) {
      document.addEventListener("DOMContentLoaded", function(event) { 
        var s = document.createElement("script")
        s.setAttribute("src", app.settings.debugUrl+"/target/target-script-min.js#anonymous")
        document.getElementsByTagName("body")[0].appendChild(s)
      }); 
    }   
  </script>

Then:

install: sudo npm install -g weinre
run: weinre --boundHost -all-
open on browser: http://localhost:8080/client/#anonymous
watch targets appear as you open the app

Based on http://www.broken-links.com/2013/06/28/remote-debugging-with-weinre/

Weinre isn't debugger, it allows only DOM inspections, you can't debug js and even watch console messages, — Bogdan Mart, Jun 21 '15 at 08:30

score 1 · Answer 19 · edited Jun 24 '16 at 05:22

1

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

edited Jun 24 '16 at 05:22

sudo bangbang

27,127
11
75
77

answered Dec 04 '15 at 12:37

Yama

333
1
5
20

Is there a real solution to debug cordova apps

19 Answers19

Linked