Debugging an Ionic app for Android platform

Mobile Reading Time: 6 min.

  • views3415
  • 1comment
Share

During a mobile application development, we encounter a lot of different problems that are directly connected to our source code. When it comes to the Ionic and Cordova projects, errors are displayed in a web browser debug console. Sometimes, it happens that our code works perfectly in development environments, but when we run our application on a real mobile device, it turns out that something does not work. How can we debug the problem directly on a smartphone? In this article, I will show how to get logs generated from an application by the Google Chrome browser. Moreover, I will teach you how to read native logs that come from an Android operating system and how to determine which are related to your mobile application.

The mobile application development

A hybrid mobile application created by Ionic and Cordova solutions used the same technologies used for the web application development. These technologies are HTML, CSS, and JavaScript. Therefore, a debugging process looks almost the same. All that we need at the beginning is a browser. Google Chrome is one of the best browsers, and I recommend it during the application development process. First of all, we need to start our Ionic’s application by command:

ionic serve

Then, from the context menu in Chrome, choose an inspect element option. After selecting the Console tab, we can see all the messages generated by our application.

debug-console

It is easy to debug our code, and there is nothing special here, so let’s move on to more practical things.

Connect Chrome to the smartphone

We quite often come across a problem that our application works correctly in the development environment, but it does not work on the real device. How do we connect to the mobile phone and read potential error messages from it? The help comes again from Chrome. The browser has a remote debug functionality. All that we need to do is connect the mobile phone to a computer with a USB cable. Then, run the application on an Android phone, and choose an inspect devices option from the debug console as shown below:

debug-inspect-devices

We will get almost the same debug console when we run our application on the local browser.

Common mistakes during application development

One of the most common mistakes, which shows up as a white screen of death, is kind of a race between the loading of the native code and the loading of JavaScript libraries. It means that our application can try to invoke a JavaScript function that launches, e.g., a camera until the mobile application has loaded the Cordova plugin. To resolve the issue, Ionic has the $ionicPlatform.ready function, which eliminates the problem of the race. The code, which is inside the function, will run if all Cordova’s and Ionic’s plugins are loaded. How to use $ionicPlatform.ready function is shown, in the www/js/app.js file, in our Ionic project.

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default
    // (remove this to show the accessory bar above the keyboard for form inputs)
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);

    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
})

Another known issue, with the white screen of death, is the asynchronous loading of the external JavaScript libraries. It is similar to the problem that had been described earlier. The application tries to get access to a function which comes from an external library that has not loaded yet. Unfortunately, the $ionicPlatform.ready function does not help to us. Do not worry; the resolution is simpler than it might seem. You can use the example of code below to achieve it.

var lib = document.createElement( 'https://example.com/custom_library.js' );
lib.onload = function() { 
    // lib loaded successfully 
    // your code here
}
lib.onerror = function() { 
  // lib failed to load
  // your code here
}

Sometimes, we can use the helper events function that comes from included libraries. For example, Google Maps API has event on load, which we can handle, to prove if everything has been loaded.

google.maps.event.addListenerOnce(map, 'idle', function() {
  //your code
});

Pay attention to whether your library does not have a similar event.

Native logs from the device

One of the most frustrating things, during the software development process, is a situation when we do not see any error messages in the debug console, and our application does not work on the real device. Therefore, we need access to the native logs to examine the problem. Thanks to an Android SDK tool, namely, ADB, you can display all system logs that come from the smartphone. The syntax of commands is:

adb logcat [<option>] ... [<filter-spec>] 

The command returns a lot of information that is not always interesting to us. It is important that we know how to find related messages to our application. Usually, we need a simple command to which we put a package name of the mobile application. The package name (e.g. com.ionic.starter) in the Ionic project is located in the config.xml file:

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.ionic.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
[…]

If we find the package name, we can invoke a command:

adb logcat | grep -i 'com.ionic.starter'

It is worth checking if there are no errors that come from Cordova plugins.

adb logcat | grep -i 'cordova'

Another command is quite trivial but helpful:

adb logcat | grep -i 'exception'

We can run a command to save logs to a file on the mobile device:

adb logcat -v long -f '/mnt/sdcard/android.logs'

Using these simple commands many times, I was able to find the root cause of problems, which usually come from the Cordova plugin after its actualisation. Then remains reading a changelog of the problematic plugin with a hope that contributor added information like requirements about the Android SDK API version or other conditions can influence our mobile application.

Tagged with:

Tags: , , ,

  • Tzvi Gregory Kaidanov

    How can I solve it in Ionic 3 ?
    Same issues..
    Doesn’t recognize the syntax you used etc..