Introduction

Each time we work on a new app there is a good chance something will go wrong. Fortunately, we can debug our apps to see what can be happening and fix it. Most app developers get stuck during the testing phase of their application on real devices, that's why we built this article with different debugging strategies in Ionic.

In this article, we are going to look at some simple ways which we can use to debug Ionic apps. These tips will also present an explanation to some simple but useful practices to debug android applications while running on a mobile device or emulator. If you are an Ionic developer, this article will help you through the testing and debugging phases.

There are mostly four most popular ways to test your app as you develop. You can test your app using: a desktop webkit browser, a mobile browser on your phone, iOS or Android emulators, or as a native app on your device.

Method 1: Live Reload on desktop browser

Debugging your app in a browser is as simple as running ionic serve command from your project's root folder. Start by entering the following command:
$ ionic serve

This command will load a live reload server for your ionic project. Each time you make a change to any HTML, JavaScript, or CSS files, the browser will automatically reload when the files are saved.

Ionic's live reload is useful for debugging native functionality (such as plugins) on device hardware. Rather than deploy a new native binary each time you make a code change, it reloads the browser (or WebView) when changes in the app are detected.

Live Reload can be a confusing term because with ionic serve, "Live Reload" just refers to reloading the browser when changes are made (as explained before). However, "Live Reload" can also be used with Capacitor and Cordova to provide the same experience on virtual and hardware devices, which can boost productivity when building Ionic apps. Learn more here

Logging

To output something to the console from our code, there’s console.log function. The console.log() is a function that writes a message to log on the browser's debugging console. Regular users don't see that output, because it's in the console. To see it on the browser you need to open the debugging console. To do so do a right click and then click on the "Inspect" option.

To use the console.log("hello") from your Ionic app, just add this line anywhere in your code.

Debugger command

We can also pause the code of your Ionic framework app by using the debugger; command.

Method 2: Safari and Chrome DevTools debugging

Ionic debugging for iOS

If you are an OS X user, note that Safari can be used to debug an Ionic app on a connected iOS device or iOS simulator. The first thing you need to do is to enable the following settings.

On the iOS device, enable Web Inspector from Settings > Safari > Advanced.

ionic debug on ios

Now, open Safari on a Mac and enable Show Develop menu in menu bar under Safari > Preferences > Advanced.

ionic debug on safari

Run the iOS simulator or connect your iOS device to your Mac computer, then run the Ionic app that you want to debug.

Within Safari, select the "Develop" menu from the toolbar. If your device is connected, in the dropdown menu options, you should see the name of your device and app. Now, hover over the app name and click on localhost. This will open a new window with the Safari Developer Tools which you can use to inspect and debug the Ionic Framework application running on your device.

Ionic debugging for Android

Ionic Android apps supporting Android 4.4 or above can also use Chrome's DevTools for remote debugging. Let's see how to set up our tools to be able to debug our ionic android apps from Chrome.

To inspect a real andorid device (not emulator), first you need to have the "Developer Mode" enabled. To do this, connect your Android device to the computer with a USB and then go to Settings > About scroll to Build Number and tap that option 7 times. Tricky right? This secret procedure will activate a new option in the Settings menu called Developer Options.

Next, go to Settings > Developer Options and ensure that the Developer Options and USB Debugging are enabled. Note that this only has to be done in physical devices because these options are enabled by default in the Android emulator.

Now, open up a new Chrome browser tab and enter chrome://inspect/#devices inside the URL bar, you should see this:

ionic android debugging

If everything worked fine, your connected Android device should show up in the list of Remote Targets.

Now, on your android device, open the Ionic Framework app that you would like to debug using Chrome.

Once your app is running on the Android device, go back to Chrome and click on "Inspect" under your device in the list of remote targets. This will open the Chrome Developer Tools in a new window. You will then be able to use all of the Chrome DevTools to debug the application as it runs on your device.


Note: you should keep in mind that testing on the browser is probably the furthest of the four options from the actual app experience. This is because the browser app is built for browsing websites, this often adds functions that will conflict with your mobile app. For instance, Chrome and Safari both listen for drag events on the sides of the app in order to allow you to switch between tabs. They also have issues with the URL bars, and scrolling behavior is not the same as it is in the web view. This option is best for small tests and not recommended for more complex apps.

Method 3: Debugging through an iOS or Android Simulator

You can also test your Ionic Framework apps right from a simulator by using the Cordova or Capacitor commands. For instance, if you want to test your app using the iOS simulator, run:
$ ionic cordova build ios
$ ionic cordova emulate ios
or
$ ionic capacitor build ios
$ ionic capacitor emulate ios

If you are testing an android app, substitute the ios with android. To further advance your testing, you can open up the project file for a specific platform. This can be done by opening the required XCode or Android Studio project from the root of your project. Learn more about Ionic project structure to see where to find your native apps. Once you have done this, you can build and test within the platform-specific IDEs.

If you want to follow this debugging option, I suggest you to learn more about building your Ionic apps with Cordova and with Capacitor. Learn more about why you should use Capacitor in your Ionic apps.

Method 4: Debugging as a native app

If you are building a native iOS or Android app, you should test it as one, at least before depolying your app to production. If you are building an iOS app, you will need to sign up for an Apple Developer account in order to test as a native app on an iPad or iPhone. Once you have your account and you set up XCode with your certificates to enable testing on your device, you will need to open the XCode project and carry the testing from the XCode.

Testing your app on an Android device is much faster and easier than in iOS. To do this simply plug in your device and run: $ ionic cordova run android or $ ionic capacitor run android depending if you are using Cordova or Capacitor.

If you encounter any problem or the above command isn’t working, make sure that you have selected USB debugging from your device.

Next Steps

Hope this quick Debugging in Ionic guide helped you understand the different ways to test and debug your Ionic apps. Now you should be ready to start building your first Ionic App!

We know that building good Ionic apps from scratch can be frustrating and very time-consuming. That's why we created Ionic 5 Full Starter App - The most complete Ionic Starter App to help you save hundreds of hours of design and development.

Some of the features you will be able to find in this ionic template are: Firebase Integration, Firebase CRUD, Social Authentication, Forms and Validations, Capacitor, examples of how to use google maps, video playlists, internationalization and much more. Also you will get more than 125 ready to use Ionic pages and components such as Profiles, Forms, Cards, Lists, Categories, Listings, eCommerce, and so much more! Try the demo to see all the types of apps you can build with this premium Ionic Starter.

I know, it may sound like a lot to start, but you are free to use just what you need and remove all the rest!

Want to continue learning Ionic Framework? Check these tutorials: