Modus loves Ionic!
In particular, we’ve found that there are a lot of moving parts to coordinate in order to do real-time debugging once the app is on a physical device. One of the tools we love using for Ionic development is the Visual Studio Code (AKA VSCode) editor, and once you get it set up to debug your app while running on an actual device, well… then you feel like you can do almost anything!
Things You’ll Need
- An Ionic Framework project. Free! If you haven’t already discovered the magic of Ionic, now is the time to dive in! Install one of their demo apps to get started.
- Visual Studio Code. Free! Discovering VSCode fell into the “where have you been all my life” category for me. Download it for free and embrace the awesomeness.
- Android Studio (for Android only). Free! Required to test and deploy the Android version of your app, Android Studio is the platform for Android development.
- XCode for Mac (for iOS only). Free! Required to test and deploy the iOS version of your app, XCode is the platform for Mac and iOS development.
- A paid Apple Developer account (for iOS only). Not free! In order to deploy an app on your iPhone, iPad, or iPod, you’ll need to fork over some cash ($99/year as of this writing). Sign up, purchase your subscription, and you’ll have everything you need to run your app natively on your device.
Setting Up the Project
With your Ionic project set up locally, you’ll need to install the various platforms (mobile operating systems) you want to test:
ionic cordova platform add android ionic cordova platform add ios
Setting Up the IDE
Open up Visual Studio Code and click the Extensions icon on the left-hand side, then search for the Cordova Tools extension and install it.
Before going any further, it’s important to close any open files in the editor.
Why close all files? Because Cordova Tools tries to be smart and will only show you configuration options related to the file you currently have open. This usually results in “Cordova” not being an option for the next step.
Next, click the Debug icon on the left-hand side and click the gear icon at the top of the Debug panel.
Select “Cordova” from the resulting dropdown, and 2 things will happen:
- VSCode will create a
launch.jsonfile inside a
.vscodefolder in the project directory.
You will now have several debug options at the top of the Debug panel, such as “Run Android on device” and “Attach to running iOS on device”
- Visual Studio Code needs one more thing in order to connect to running devices: the iOS WebKit Debug Proxy (IWDP). In a command prompt, run this:
brew install ideviceinstaller ios-webkit-debug-proxy
Test that all is well by running:
If you get an error like…
Could not connect to lockdownd. Exiting.: Permission denied
…then you need the latest (master) version of a dependency called
brew update brew reinstall --HEAD libimobiledevice brew reinstall -s ios-webkit-debug-proxy
Setting Up Your Devices
Both Android and iOS have a “developer” mode that you can activate. This mode allows you to do crazy things like deploy an unpublished app to your device. First, plug your device into your computer with the standard charging cable. Then, you can check the documentation for Android’s secret door to enable developer options. For iOS, the magic happens in XCode…
Setting Up XCode (Mac only)
Follow the Apache Cordova instructions here iOS Platform Guide to prepare your environment and tools needed to build a hybrid app for iOS.
Remember, you’ll need a paid Apple Developer account in order to deploy your app to devices for testing. You can get around this by using the Ionic DevApp, but you won’t be able to debug that way, and some native functionality may not work as expected.
To kick off the iOS deployment process, launch XCode and choose “Open another project…” Navigate to
platforms/ios in your project directory, and choose the
*.xcodeproj file there (this should have been generated by the
platform add ios command, above).
In the file navigation on the left side, click on the top-level folder for your project. This should bring up a series of tabs in the main panel, the first of which is called General.
Under the General > Signing section, log in with your Apple ID and check the “Automatically manage signing” checkbox. Select the Team you created when you created your Apple Developer account, and add your connected iOS device to your Apple Developer account when prompted.
Setting Up Android Studio
The Cordova documentation has detailed instructions on how to set up your local environment for Android development. Follow these steps carefully and come right back when you’re done – it’s time to deploy to your device!
Installing the App on Your Devices
Now that you’re all set up, deploying the app to your devices is a snap! Plug the device into your computer, and for Android, run:
ionic cordova run android
For iOS, open the project in XCode and click the play button at the top-left of the window, and marvel at all that you’ve accomplished!
Debugging! (the fun part)
In the case of iOS, quit XCode and restart the app on the device to be sure there is nothing to conflict with VSCode. Set a breakpoint in VSCode by clicking in the margin to the left of the line numbers on a line that you know will get executed.
Be sure to also check out conditional breakpoints: Hold down control key while clicking on the red breakpoint to set a conditional for breakpoint execution!
Go to Debug, choose “Attach to running [Android/iOS] on device,” and click the play button.
The device might ask you to confirm trust for the connected computer. Say yes, then celebrate!
You did it! You’re now an invincible, hybrid-mobile app developer. There’s no app you can’t build, and no problem you can’t solve. What other tools do you use for developing apps with Ionic Framework? Share them in the comments below!