By Brooks Forsyth
While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.
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.
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
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.
Then select your device from the list of remote tools.
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.
If the bug only occurs on iOS devices you need to enable developer tools in Safari on your mac and on your phone:
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.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Click below to sign up and get $200 of credit to try our products over 60 days!