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. Most app developers get stuck during the testing phase of their application on real devices, which is how to see console logs or debug the applications, especially those who are not experts about Cordova and 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 phase. In this Ionic frame tutorial, we are going to look at four methods of debugging an ionic app.

There are generally four most popular ways that you can 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 Simulator or as a native app on your mobile.

Method 1: Using a Desktop browser

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

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

Method 2: Debugging Through an iOS or Android Simulator

You can as well test your Ionic Framework apps right from a simulator by using the Cordova commands. For instance, if you want to test your app using the iOS simulator, run:
$ ionic build ios
$ ionic 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 by opening the required XCode or Android Eclipse project in platforms/PLATFORM from the root of your project. Once you have done this, you can now build and test within the platform-specific IDE. It is worthy to note that, if you have decided to follow this path, it is recommended that you work from inside of the root www folder and after making changes to this folder, run the following command below:
$ cordova prepare iOS

The above command will update the specified iOS project with code from the www folder as well as overwrite any changes that have been made to the platform/iOS/www and other folders from the specific platforms.

Method 3: Mobile browser Debugging

You can also debug your Ionic apps directly in a mobile browser. If you are an OS X user, note that Safari on OS X can be used to directly debug websites and simulator applications. The first thing you need to do is to enable the remote web inspector on the device as well as the Safari on the desktop.

If you are using an iOS 7 and OS X Mavericks, to do this, enable the Web inspector located within the iOS settings – Safari – Advanced Section. Furthermore, also enable the Developer Menu from the Advanced Section of the Safari OS X settings.

Android apps supporting Android 4.4 or above can also use Chrome for remote debugging. Open up a new browser and enter chrome://inspect inside the URL bar, you should see this:

After that, click on the instance you are debugging, and a new window will open containing all the tools you from a browser.


If you are making use of a local server method from the Desktop testing section and you are on the same network as the Desktop computer, you can directly connect to the IP address of the desktop to perform each test.

For example, if our desktop is on a test server with IP – 192.168.1.123 Port – 8000, we can load that address directly into our mobile Chrome or Safari and begin to test it.

Note: you should keep in mind that testing in a mobile browser is probably the furthest of the three 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 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 running in Cordova. This option is best for small tests and not recommended for more complex apps.

Method 4: Debugging as a native app

If you are building a native or hybrid app, you should test it as one. There are several ways one can choose to do this. 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 had your account and have set up XCode with your certificates for to enable the testing of your device, you will need to open the XCode project from platforms/iOS/ and carry the testing from the XCode.

Testing your app on an Android device is much faster and easier. To do this simply plug in your device and run:
$ ionic run android

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

Now that we learnt different ways to test and debug our Ionic app, let’s start coding!

As you know we also sell beautiful Ionic Themes, templates and components that you may find super useful as they save you hours of development, time and effort, while giving your mobile app a great design from scratch.

These are some high quality starter app templates we have to offer you:

You can jump right in and create a Full Ionic App or if you want to take it slow and start with something easier, try some of our Ionic Components.