The best way to debug an Ionic app on a device.

My opinionated technique.

TL;DR

• Make sure you can deploy to your device.
• Plug in your device.
• run:

ionic cordova run <ios or android> --device -l --debug

• For Android open Chrome and go to Web Inspector.
  Open ~ ⠇> More tools > Remote devices
  Select your device and click Inspect.
• For iOS open Safari and enable Develop Menu.
  Open ~ Develop > my device > my ip address.

Author’s Pointless Ramblings

Let’s say you’ve made the most amazeballs app. Everything is working great until you want to add some Cordova plugin you’re not too familiar with. Now your app no longer works in the browser. And if you want to test it on an emulator or device, you have to rebuild over and over again to see each change. And while JS console logging does work, debugger breakpoints do not. This can make the last leg of building and debugging your app a slow and tedious affair.

Debugging apps the right way is awesome. However, it can be touchy. Like a bad aux cable that you need to hold in just the right position or it stops working. Sometimes I’m able to get things working perfectly once. Then I’ll do things in the wrong order or touch something in a funny way and it won’t work again.

I spent (wasted) weeks trying to get this article perfect. I’m hoping with practice I’ll work out all the kinks, but I haven’t yet. This information is really important to developing with Ionic though and I couldn’t find it all in one place anywhere else. So this article needed to be written as is. It’s not perfect but at least it’s available. In other words, I finally had to say “FUCK IT, WE’LL DO IT LIVE!” All that being said, once it’s all working smoothly, development is really fun and easy!

I started this article 6 months ago and things have gotten a LOT better since then. XCode is a little less finicky. Ionic’s livereload is more stable. Ionic automatically whitelists your IP. And so on.

Tools Required

Hardware

• A Mac. I guess there are ways to build iOS apps in Linux and Windows. But let’s face it, Apple has things locked up pretty tight and you’ll be swimming uphill the whole time if you don’t just use a Mac.
• An Android phone or Android based iPod Touch equivalent.
• An iPhone or iPod Touch.
• (optional) A tablet could be helpful but you can just adjust the screen size from developer tools in your browser.
• A handful of cables for each device. Save yourself a headache and just throw them out and use another one when they start to go bad. I buy them in 6 packs from Amazon.
• (optional) A USB splitter with power buttons for each outlet will save you a lot of plugging and unplugging. That will in turn extend the life of your cables.

Software

• Android Studio
• XCode
• Chrome
• Safari

Solution

Before you Start

Get as far as you can without Cordova. Then get a little bit further by using Cordova mocking. However, you do want to test on a device early and often. While everything you’re doing may be basic web dev, there can be weird issues with JS not working in WebView.

I’m going to assume you know how to build an Ionic app. If not there are plenty of tutorials, so let’s skip that. I’m also going to assume you know how to get certificates and such from Apple and that you know how to deploy to iOS and Android from the command line. If not, once again, there are tutorials.

Troubleshooting Basic Deployment Issues

First things first. You need to build and run your app from Xcode and Android Studio. If you can’t get it running in those apps, you can forget about the command line.

Most iOS errors I’ve seen are caused by signing permissions. They can sometimes be fixed by unchecking and rechecking “Automatically manage signing” and then reselecting your team. Make sure your certificates and provisioning profiles are all in order.

Most Android errors are caused by bad cables. If you have a problem, unplug and replug in your device. Then make sure debugging is on and your USB mode is set to PTP (photos).

Don’t ever expect anything to just work. You’ll have to twiddle it, just a little bit.

Ionic View, the Emulators, your device, and the browser will all have different problems for different reasons. I prefer to use just the browser and my device so I don’t spend as many hours debugging problems that don’t really exist.

Once you’ve gotten everything setup and you know that you can successfully deploy your app to your device things get easier. Pick your preferred device and follow the instructions.

Android

Plugin your Android.

From the command line run:

ionic cordova run android --device -l --debug

Open Chrome and go to the Web Inspector. Click the three dots next to the “Close” X. Go to More tools > Remote devices. If your device is plugged in, you should see it under Devices. Funny place for it. Click your device. If your server is up and running you’ll see the server’s IP. Click Inspect. A new window will open.

iOS

Plugin your iOS device.

From the command line run:

ionic cordova run ios --device -l --debug

Open Safari and open preferences. Select the Advanced tab and click “Show Develop menu in menu bar.” Close preferences. Click Develop in the menu bar and look for your device. When you find it, hover over it and click the IP in the sub-menu. A new window will open.

Find your Bliss

In Chrome you will see a replica of your device’s screen and have access to the console where you can see errors. In Safari you can at least see the console. Try changing some text in the page you’re looking at. It will live reload the views just like if you were doing ionic serve. The difference is that now you can see the changes live on your device. You can also interrupt execution of your app with debugger and print output from the device to the console. Best of all, you can now experiment with your Cordova plugins with all the convenience of basic browser development. And let’s not forget that you can impress the hell out of your clients by loading their app on their device and interactively work on the design with them.