Let us say you have created an amazing application and want to test it on a device. Now, there can be many scenarios you are unable to run. Let me take one of them. Let’s say you want to run your application and you are facing some issues with Cordova. This results in making your app no longer able to work in the browser. Also, you are tired of deploying your application to your device again and again just to check the changes you made. On some occasions, it gets very messy.
Then what to do…? How can we avoid rebuilding our application over and over again just to check our changes?
Debugging an application directly to a device makes it peaceful and cool.
Let’s start!
Things to remember
- You are connected with your device with USB debugging ON.
- Make sure you have Android studio installed.
- Chrome Browser (Safari if debugging with Mac)
I have taken a sample template application dream-house just to show you how we can debug; now here is my terminal below,
Make sure your device is connected to the system and is in USB debugging mode.
“ionic cordova run android --device -l --debug”
This is the command that allows you to debug it over a device.
It has now started running, you now can open the app on the device.
Now, go to Chrome, go to inspect element (shortcut is Ctrl+Shift+i).
Click on the 3 dots menu.
Now, navigate to More tools > Remote Devices.
You can find your device connected.
Click on your device, (mine is ONEPLUS A6000).
Click on Inspect; a popup will open where you will see the emulator kind of screen for the device.
That has successfully debugged your application on the device. The controls follow the same on your device as you process in emulator and vice versa … enjoy coding.
Note
If you are working with a Mac machine, then use the following -
Open Safari >Develop Menu >my device >my ip address.