Click here to Skip to main content
13,770,057 members
Click here to Skip to main content
Add your own
alternative version

Stats

62.6K views
5 bookmarked
Posted 16 Sep 2015
Licenced CPOL

Debug Ionic Android Application On Mobile Devices or Emulators

, 16 Sep 2015
Rate this:
Please Sign up or sign in to vote.
How to debug ionic Android application in development phase

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

mudasser ajaz
Software Developer
Pakistan Pakistan
No Biography provided

You may also be interested in...

Pro

Comments and Discussions

 
QuestionHow to use MySQL database in Ionic framework application Pin
medisoft12320-Oct-15 11:18
membermedisoft12320-Oct-15 11:18 
Questiongood solution Pin
Member 1198955216-Sep-15 9:53
memberMember 1198955216-Sep-15 9:53 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web01-2016 | 2.8.181119.1 | Last Updated 16 Sep 2015
Article Copyright 2015 by mudasser ajaz
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid