Problem on Android device - how to debug?

1

I have an app working inside the browser and on iOS simulator.
On an Android device it just displays the back button (really <{{‘back’ | translate}} as I am using angular-translate).
It seems as there is a Javascript error preventing Angular to work: how can I debug it on the device?

I have tried removing and adding the platform, upgraded node, ionic, cordova, recreating the project from zero, but nothing: today it doesn’t work on Android.

Thank you,
Matteo

2

install android driver for your device on your pc --> connect the device with your computer -> start google chrome -> go to Settings -> tools -> device debugging (or something like that^^)

There you will see your connected device if it installed.

3 Likes
3

Thank you,
I see that the app works with an Android 4.0. Until yesterday it worked on an old 2.3 too. Unfortunately 2.3 doesn’t support the remote debugging…

4

You can also checkout this post -

5

Thank you, I’ll try with jshybugger.

It’s strange that my project stopped working on Android 2.3 yesterday. I just worked on Angular code so I don’t think I did something bound to the platform, unless there’s something in the new version of Ionic which prevents Android 2.3 from working (yes, I know that the support is for Android >4).

6

Since you’re working with a lot of javascripts, if you have a unix shell, just type
"adb logcat CordovaLog:D \*:S"
this will give you the log console like it appears in the browsers.

7 Likes
7

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:

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

1 Like
8

Hey brauliobo, great suggestion using Weinre. Got a quick question…

How to I set app.settings.debugUrl properly?

Thanks in advance

9

@sinsei create a settings.js with:

app.settings = {
   debugUrl: 'http://...',
}
10

@brauliobo
thanks for the quick reply. I still can’t get it working…
I’m getting app not defined. I change the name to starter (which is the name of the project) and same error.
And yes, I did include the settings.js file before the Weinre debugging script

Any ideas?

11

That helped me, thx.
However I altered your command to:

adb -s <DEVICEID> logcat CordovaLog:D *:S

‘-s’ addresses a specific device if you have multiple devices connected to your computer (find the id with ‘adb devices’).
Also I had to remove the ‘’ from ‘\*:S’ because there was a lot of non cordova related output in the console, like signal strength. Without that backslash only the cordova output appears just like when testing your app in a desktop browser.

3 Likes
12

They still seems smileys to me :D

1 Like
13

I am coming from eclipse to trying this command line ionic stuff and its really handy to set up your java sdks tools in your path. Using with genymotion virtual device set up to debug with your java SDK, it works really well. just open console and type monitor to get that familiar eclipse debugging environment.

monitor screenshot

14

Thanks a lot @brauliobo. This really saved my skin.

15

Another alternative is -

http://jsconsole.com/

add a reference
<script src="http://jsconsole.com/remote.js?FAE031CD-74A0-46D3-AE36-757BAB262BEA"></script>

Open jsconsole.com and enter
:listen FAE031CD-74A0-46D3-AE36-757BAB262BEA