Debug Ionic Android Application On Mobile Devices or Emulators

Introduction

This tip will explain some simple but useful practices to debug ionic Android application while running on mobile device or emulator, which will help ionic developers in development and testing phase. In this article, I will explain three methods.

Background

Most of ionic Android developers get stuck at a phase when they are testing their application on real device, which is: how to debug or see console logs of application, particularly, those who are not from cordova or phonegap background.

Methods to Debug Application

Method #1

The first and simplest method is to run application in your device is with the following command:

ionic run android -l -c

When you run application in your device with the above command, it acts in the same way as when you run application on browser with ionic serve. It runs application in your device but all resources are loaded from computer with liver reload. And all console logs are shown in command line window while application is running in device, as you can see -c parameter in command, that is to show consoles while -l reloads application on any change in source. For more details, please take a look at this documentation. See the following screenshot for visual understanding.

(You can see in the above image, after building application into device, all logs are shown in command line window.)

Note: Your device and computer should be on the same network, plus keep mobile connected with computer via USB port.

Method #2

The second method will not only allow you to see console logs but also inspect elements and network monitor, the same way you do with websites. Use chrome dev tools, write chrome://inspect/#devices in chrome address bar and hit enter. It will open the following page in your browser, showing all devices and hybrid applications running on it.

Now clicking on inscpet will open the same inspection window like web page. See the following image for visual understanding.

NOTE: For this method version of your computer, chrome should be greater than chrome version of mobile device.

Method #3

The final method is to use Android Device Monitor provided in Android sdk tools. Here is a link about how to use monitor. Please see the following image to get an idea about monitor tool.