Apache Cordova and Remote Debugging on Android
This tutorial will show you how to remotely debug your cordova app on Android using the Chrome Webview debugging tool.
Sometimes your cordova app will have some visual differences between your Chrome Desktop and your Android phone. These kind of visual bugs are quite hard to fix, as you have to recompile your app and copy it on your phone every time you make a change.
But there is a solution to this problem: the awesome Chrome Webview debugging tool! And that's not all, folks. You can also use this tool to remotely debug your JavaScript code step by step!
Minimum versions
This debugging option is quite new. So your app must be running Cordova 3.3 or higher, your Android phone must be running Android 4.4 or higher and you must have Chrome 30+.
USB Debugging
To be able to debug your Android device with your computer, you must first activate the USB Debugging option in your device parameters. This option is under the Developer options, which is hidden by default.
To make it visible, you'll have to tap 7 times on the Build number. The trick is that the build number is not in the same place for all phones. It depends on the constructor. Here is a good article to help you locate the build number on your phone: http://www.greenbot.com/article/2457986/how-to-enable-developer-options-on-your-android-phone-or-tablet.html
My Phone is a Nexus 5, so the build number is under Settings > About phone.
Now that Developer options is available. Activate the USB Debugging option in it.
Inspect Chrome Android
Now we're finally able to remotely debug our cordova webview with Chrome.
In Chrome, Go to Settings > More Tools > Inspect Devices.
EDIT : This option is no longer available in the Settings menu. You now have to manually navigate to chrome://inspect to get to the inspect tab.
A new tab with the Webview Debugging Tool will open. Once opened, make sure that "Discover USB devices" is checked.
Connect your phone to your computer with USB. On your device, an alert prompts you to allow USB debugging from your computer. Tap OK.
Launch your cordova App by running cordova run android or installing the app with adb (adb -d install -r platforms/android/build/outputs/apk/android-debug.apk) and launching it manually. You should be able to see it in the devices list on your Chrome. Click on the "Inspect" link and there you go! You can now use the Chrome Developer Tool as you would on desktop! Isn't it great?
Debug JavaScript Step by Step
Exactly like you would do on any website, you can remotely debug step by step your JavaScript code in the "source" tab of Chrome Developer Tool.
And for those who don't know this feature and use Typescript or CoffeeScript, you can actually debug your app directly inside your Typescript or CoffeeScript files thanks to the JS source maps, which can be used by Chrome Dev Tool (as you can see it in the screenshot above).
Just make sure that you have enabled JS source maps in the Chrome Dev Tool settings.
Note: This also works with an app running on the Genymotion Android emulator or Visual Studio Emulator for Android. If you haven't tried one of them yet, I really recommend you give it a try. It's way faster than the default Android emulator.
