Debugging an Ionic Android App Using Chrome Dev Tools

Have you ever tried running your Ionic Android application in debug mode on your phone (ionic cordova run android) and you’re suddenly locked out of what is happening in the background? You then have to guess what’s happening behind the scenes. This becomes more frustrating when you notice bugs while the app is running on your phone.

Many have tried and failed miserably to hack their way around this by using dialog boxes to print out portions of what is happening underneath the app just to get a clue of what to target while debugging. This is not only impractical but simply frustrating. You don’t have to live like that, that’s why in this (surprisingly) short article, you will learn how to debug your Ionic Android apps using one of the best web debugging tools, Chrome Developer Tools. Lets begin:

Step 1

Create an ionic project the usual way and add the Android platform.

Step 2

Build your app for Android by running ionic cordova build android

Step 3

Connect your Android phone via USB to your computer and run

ionic cordova run android

If the cli keeps complaining that it can’t find a device, try adding the

—-device flag.

Also, ensure that Developer mode is enabled on your Android device and USB Debugging is activated.

If your device requests for authorization, go ahead and authorize.

Step 3

Open Chrome browser and open the Developer tools.

Go to the Remote Devices Tab (if you can’t find this tab, as with a lot of tabs in the Dev tools, hit Cmd+Shift+P on Mac or Ctrl+Shift+P on Windows to open up the Command Pallete, then type Remote Devices and click on Show Remote Devices).

Now click on the tab on the left that is labelled according to your device type. For me its the tab that reads ‘TECNO CX Air’ with the green circle indicating that its connected (do take note).

Ensure that the App is opened and is the current active app on your device else Chrome may not be able to access it.

Now when you click this tab, you get the screen below:

Now click the Inspect button on the far right to begin debugging your app as it runs live on your phone.

This pops up another Chrome window with a live view of your app as its displayed on your phone and all the tools Chrome developer tools offers you for easy debugging.

As you use the app on your phone the preview responds in (near) real-time. You can also use the preview to operate your app.

Ensure your USB stays connected and your app is active on your phone to retain connection to Chrome Dev tools.

There you have it folks, no more printing on dialog boxes or remaining in the dark about the inner workings of your ionic Android app while it runs on your phone.

Happy Coding :)