Below is a brief overview on how to get started troubleshooting bugs in your Ionic projects.
There are two main types of bugs that occur when developing in Ionic:
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.
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
In order to keep the scope of this article bite-sized we will not address build and compilation errors in this article. A quick trick to try is ionic repair. This removes and recreates dependencies of your app.
$ ionic repair
— Sorry to interrupt this program! 📺
Are you interested in learning Vue.js? If so, I highly recommend you try The Vue.js Master Class course by Vue School. Learning from a premium resource like that is a serious investment in yourself.
Plus, this is an affiliate link, so if you purchase the course you help Alligator.io continue to exist at the same time! 🙏
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.