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.
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 on your terminal:
$ 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, you can use the console.log() 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.
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 emulator. The first thing you need to do is to enable the following settings.
On the iOS device, enable Web Inspector from Settings > Safari > Advanced.
Now, open Safari on a Mac and enable Show Develop menu in menu bar under Safari > Preferences > Advanced.
Run the iOS emulator 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 Android 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:
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 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 option 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.
You can also test your Ionic Framework apps right from an emulator by using the Cordova or Capacitor commands. For instance, if you want to test your app using the iOS emulator, 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.
If you are building a native iOS or Android app, you should test it as one, at least before deploying 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 whether 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.
Hope this quick How to debug an Ionic App guide helped you understand the different ways to test and debug your Ionic Framework apps. Now you should be ready to start building your first app.
If you want to start creating your Ionic Framework app but don't know how to start, I suggest you to try Ionic 6 Full Starter App. It's a mobile app and PWA built with Ionic and Angular that you can use to jump start your app development and save yourself hundreds of hours of design and development.
Some features you can find in this Ionic template are: Firebase integration, authentication, forms and much more. Also, you will get more than 100 ready to use Ionic pages and components such as profiles, forms, cards, lists, categories, listings, and so much more.
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.
Now that you know how to debug an Ionic app, I invite you to continue learning with the following tutorials:
- Build your first app with Ionic Framework.
- Step-by-step guide to create a PWA with Ionic and Angular.
- Add Facebook sign in to your Ionic app.
- How to use Forms and input validations in Ionic.
- Main differences between Ionic versions.Learn which are the building blocks of any Ionic framework app.
Liked this Ionic Tutorial?
Leave your comments below.