How to Debug Ionic/Cordova with Visual Studio Code

Modus loves Ionic!

As an Ionic Trusted Partner, we do a lot of hybrid app development for various clients using Ionic Framework. Clients love it because they get to deploy their app to multiple app stores (Google Play, Apple’s App Store, and more) for the price of developing a single app! Developers love it because it’s a single codebase to maintain, and written in the familiar styles of Angular, TypeScript, and JavaScript. When it comes to deploying and testing on a real iOS or Android device, however, things can be a little tricky to set up at first.

NEW RESEARCH: LEARN HOW DECISION-MAKERS ARE PRIORITIZING DIGITAL INITIATIVES IN 2024.

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:

1. VSCode will create a launch.json file inside a .vscode folder 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”
2. 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:

ios_webkit_debug_proxy

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 libimobiledevice:

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!

Conclusion

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!