Tutorial

Troubleshooting Ionic Bugs

Published on November 11, 2019
    author

    Brooks Forsyth

    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

    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
    

    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.

    remote dev tools

    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.

    Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

    Learn more about our products

    About the authors
    Default avatar
    Brooks Forsyth

    author

    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.

    Still looking for an answer?

    Ask a questionSearch for more help

    Was this helpful?
     
    Leave a comment
    

    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!

    Try DigitalOcean for free

    Click below to sign up and get $200 of credit to try our products over 60 days!

    Sign up

    Join the Tech Talk
    Success! Thank you! Please check your email for further details.

    Please complete your information!

    Become a contributor for community

    Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

    DigitalOcean Documentation

    Full documentation for every DigitalOcean product.

    Resources for startups and SMBs

    The Wave has everything you need to know about building a business, from raising funding to marketing your product.

    Get our newsletter

    Stay up to date by signing up for DigitalOcean’s Infrastructure as a Newsletter.

    New accounts only. By submitting your email you agree to our Privacy Policy

    The developer cloud

    Scale up as you grow — whether you're running one virtual machine or ten thousand.

    Get started for free

    Sign up and get $200 in credit for your first 60 days with DigitalOcean.*

    *This promotional offer applies to new accounts only.