Although the debug on android application using Android studio (a native android app) is quite easy, debugging on a cordova application can become a big nightmare if you don't have the correct tools. You'll find that fix something on the code, compile, check on the device, check the code again, compile again and found the same error is nothing productive.
To debug a cordova application we will use the Chrome debugging tool which can be accesed in Google Chrome (desktop version).
- Patience (In some desktop computers, set up this process can take longer)
- An Android device (with Android >= 4.4) and a USB cable
- Google Chrome (>= v.30)
- More patience
Setting up the debugging
The process consists of 3 steps :
- Enable the developer mode on your android device
- Set up inspect mode in Google chrome desktop
- Start debugging
Enable developer mode in android
To be able to debug your Android device with your computer, you must first enable the USB debugging in your device. This option is hidden by default and we need to make it visible, go to Android Settings > About phone (last option).
First tap 7 times on the Build Number (is the last option too), then a message that "You're a developer now will appear". Followed, go back to the settings and you will see now a new available option in the menu.
Tap on this and go to the last option (Debugging : USB Debug mode when usb is connected).
Now you'll be able to debug your cordova application on chrome.
Set up inspect mode in Google chrome desktop
Then navigate on Google chrome to the following url :
You'll get the following image if everything went right :
Click on inspect according to the app that you're debugging and is active on your device and inspect like you do on web projects.
Finally , debug your application without limits.
Some devices requires that your desktop have the appropiated driver installed (for example if you have a Motorola , you need to download the drivers of Motorola for you desktop and then everything will work fine).