Troubleshooting Ionic Bugs

Below is a brief overview on how to get started troubleshooting bugs in your Ionic projects.

Introduction

There are two main types of bugs that occur when developing in Ionic:

Web bugs

The first type are bugs that can be reproduced in the browser and are not related to the native functionality of the app. These web technology bugs can be troubleshot just like any other bug in web development: in your browser using the browser’s DevTools. This is one huge advantage of hybrid mobile development.

Native bugs

The other type of bug are bugs that only appear on Android and or iOS devices. This article will document the steps to set up the developer tools so you can begin to fix them.

Note on build failures

$ ionic repair

Steps to debug your Ionic app

Step 1: Is the bug reproducible on iOS and Android?

If it’s on both iOS and Android, I prefer to fix the bug on Android first and confirm it is fixed in iOS after. This way I can use the Chrome developer tools to diagnose the bug. If it’s only on iOS, skip to step 4.

Step 2: How to get the Chrome remote dev tools working on your device.

Enable developer mode on your Android device:

• Go to settings → about phone.
• Find the build number and press it 7 times. You will see a message counting down the last few times and then congratulating you on being a developer. (Thanks phone!)
• Now go back to settings, then to system preferences.
• On the system screen hit the Advanced Options drop down.
• Select Developer options.
• Scroll down under the debugging heading and turn USB debugging on.
• Now assuming your device is plugged into your computer, after a few seconds you will get a popup asking if you trust this machine. Hit the checkbox for allow always and then hit okay.
• Now with your ionic app open on your device, open the Chrome dev tools on any site. Select remote tools as seen in the screenshot below.

Then select your device from the list of remote tools.

Step 4: Now that Chrome DevTools is open

You can view any console errors that have appeared. You can also refresh the app in the Chrome dev tools to load the app again and see things that you missed while the app loaded. You should now see an error message in your console and will be able to debug this error with Chrome dev tools.

Step 5: iOS debugging

If the bug only occurs on iOS devices you need to enable developer tools in Safari on your mac and on your phone:

• Open Safari on your mac.
• Go to the Safari menu and then preferences.
• Go to the advanced settings under the gear icon.
• At the bottom, check the box that states “show developer menu in menu bar”.
• Now with the app open on your iOS device and with the device connected to your mac, click the Develop dropdown in Safari.
• Select your device from the Develop menu and then select local host.
• The Safari developer tools should open up in a new window and you will be able to inspect and debug your app. You can also refresh the app to catch bugs that occur upon loading.

Bonus: having the Safari developer tools recognizing your device can be finicky. Try unplugging and re-plugging the device into the mac. If that doesn’t work, you can download Safari Technology Preview and repeat the steps above to enable the developer tools.