Blog Details

We’re growing quickly and this is a new role ....

Debugging Ionic Applications with Google Chrome

  • manager@geitpl.com
  • Oct. 30, 2020, 11:57 a.m.
None

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

The browser which we 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 we're not already acquainted with this feature, is extremely useful for Ionic based development.

Debugging Android apps

To make use of the Remote Debugging feature open the Google Chrome developer tools and click on the Main menu

1. Opening the Google Chrome Inspector

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

2. Enabling the Google Chrome debugger

At this point, we 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.

 3. 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:

4. Opening a connected remote device to the Google Chrome debugger

Now when interacting with our Ionic application running on the connected Android device we'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:

As we 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.

 

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

Leave a Reply