How to Debug Ionic/ Hybrid Application in Chrome Browser in 2 Steps!

Development in Ionic or Hybrid app is fast as compared to native apps, but debugging proves a bit challenging if we don’t want to use memory consuming IDE’s like Android studio. We have already discussed How to Debug Applications in Real Device using CMD but what if the application stops working of or there is any logical error?

Hybrid apps like we develop using Cordova and Ionic frameworks loads in an Android web-view so is it possible to see errors as we see in debugger tools for Web Applications? The answer is Yes! we can. In this article, we will discuss a very quick and easy method to debug Ionic or any Hybrid Application in Chrome Browser when attached with a USB cable. Yes, we need a wired connection between a PC and a real device. This method proves useful to debug those plugins and functionalities which needs a real device to operate or function. Like image share plugin for Ionic.

You can check the tutorial on How to Connect Device with PC for Debugging Here

Let’s get started!

Step 1) Run Application on a Real device connected to the computer using the following command.

$ ionic cordova run android --device

Step 2) After running the application in mobile device open chrome browser

Open a new tab in Chrome Browser

Now right click or Press F12 to open chrome debugger tool

Click on three dots icon >> More tools >> Remote devices

In Devices section find your connected devices then click on "Inspect" button

Now you will be able to see your mobile application mirror in Chrome debugger tool.

This method proves very helpful in case application debugging in real devices.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top