Over the past year, the Ionic Framework has been gaining in popularity, mostly due to it’s strong attachment to Angular and its aversion to jQuery Mobile.
While I, personally, haven’t been fully converted to the framework as of yet, the ability to write Angular applications that package themselves into mobile applications with tie ins to the native APIs is a pretty compelling proposition. What’s more, thus far I have seen far few performance issues with Ionic than I had encountered using frameworks such as PhoneGap or Sencha.
All that being said, debugging an Angular application intended to be deployed as a mobile application is both a great and a weird process all at the same time. Great because as an Angular app, you can initially run it in your browser with everything you are used to using. Weird because you are ultimately wanting to build a mobile application that connects your Angular code to the native wires by way of an open source library. At a certain point, you have to leave the comfort of your Chrome browser and enter into your device emulator to start testing your native API device functions.
When something goes wrong, though, how are you supposed to know what is going on in your Angular code?
#0 – Remote Debugging on Chrome
Starting with Android 4.4, when an application has WebView enabled for debugging, Chrome is able to tie into what is happening inside of the application using the standard developer tools. This is a huge boon to developers looking to access their web consoles to see what
Cordova might be outputting. And the good news is that it is fairly easy to get going.
#1 – Use Remote Debugging with the Android Emulator
chrome://inspect/#devicesin your browser. It should be empty.
- Start up your emulator using Ionic commands.
- Once the application is up and running, an
inspectlink will appear under your SDK listing. When you click that, Chrome Dev tools will open up, exposing the
WebViewfrom your application, console and all.
#2 – Use Remote Debugging with an Android Device
The steps are essentially the same with the exception of:
- Make sure that
Discover USB devicesis checked at the top of the DevTools page.
- Make sure that USB debugging is enabled for your Android device.
- Remember that this only works for Android 4.4 and higher, so check your version of Android.
- (Oh, and connect your device to your computer with a USB cable, but you knew that, right?)
It really ends up being pretty easy, but it is also a pretty essential component to the development workflow. One of those good ‘tools in the toolkit’ to have around.
Feel free to post any questions or comments or suggestions below!