Debugging Ionic applications with Google Chrome

June 16, 2018, 8:41 pm Categories:

Categories

Creating hybrid mobile apps has become easier in recent years thanks to the availability of tools like Apache Cordova and Ionic Framework which have opened up development opportunities to non Java/Objective C developers experienced with development using HTML 5, CSS and JavaScript.

Ask these same developers which browser they use for front-end/PWA development and the chances are they'll answer with Google Chrome which is not surprising given its rich feature set of developer tools.

One of these developer tools - Remote Debugging - enables Android applications to be debugged directly within the browser which, if you're not already acquainted with this feature, is extremely useful for Ionic based development.

Let's take a quick look at how we can enable and start using this tool.

Debugging Android apps

To make use of the Remote Debugging feature open the Google Chrome developer tools and click on the Main menu (as highlighted with the red arrow pointing to the 3 vertical dots in the inspector window in the below screen capture):

Opening the Google Chrome Inspector

From the menu that appears select More tools followed by Remote devices from the appearing sub-menu:

Enabling the Google Chrome debugger

At this point you should have already connected your Android device to the machine (with the Enable USB Debugging setting switched on - VERY important!) which, in turn, will be detected by Google Chrome and listed under the Devices column in the Remote Devices tab as shown below:

Connecting a remote device to the Google Chrome debugger

Click onto the listed Android device and then select the Inspect button that appears in the right hand side of the Remote Devices window:

Opening a connected remote device to the Google Chrome debugger

Now when interacting with your Ionic application running on the connected Android device you'll be able to use Google Chrome to access various debugging features such as console logs and the DOM inspector for the currently activated session:

Opening a connected remote device to the Google Chrome debugger

As you can see this simply allows us to run our Ionic Android applications using Google Chrome to access information about the app as if we were interacting with the front-end code of a website.

Pretty neat huh?

In summary

Whether you're already using Chrome or not the Remote Debugging tool should be top of your list for Ionic Android development as it gives you a quick and easy way to diagnose how your application is performing - always a handy feature when working on a project!

If you've enjoyed what you've read and/or found this helpful please feel free to share your comments, thoughts and suggestions in the comments area below.

I explore different aspects of working with the Ionic framework in my e-book featured below and if you're interested in learning more about further articles and e-books that I'm writing please sign up to my FREE mailing list.

Tags

Categories

Post a comment

All comments are welcome and the rules are simple - be nice and do NOT engage in trolling, spamming, abusiveness or illegal behaviour. If you fail to observe these rules you will be permanently banned from being able to comment.

Top