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 --deviceStep 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.
