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

My opinionated technique.

Lee Nathan
Jul 10, 2017 · 5 min read

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 iOS open Safari and enable Develop Menu.
    Open ~ Develop > my device > my ip address.

Author’s Pointless Ramblings

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.

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.

Android

Plugin your Android.

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

iOS

Plugin your iOS device.

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

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.

One Tap Software

Finding, creating, and sharing the best and simplest solutions.

Lee Nathan

Written by

Lead Developer at One Tap Software

One Tap Software

Finding, creating, and sharing the best and simplest solutions.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade