Different Ways to Debug and Test Ionic App

Spread the love

Debug and Test Ionic AppI had just completed my first project using Ionic + Cordova Framework this week. I had wasted initially huge amount of time because i was not known of all the possible ways available for testing & debugging Ionic App. So now I thought of writing a article which list all the possible way available for Debug and Test Ionic App. I think this article would able to help guy’s who are starting of with Ionic Framework.

Let’s first go with little bit of introduction of Ionic Framework. Ionic Framework can be used to developed mobile Apps which can work on Android as well as IOS devices using HTML5, CSS3 and JavaScript. You can read more about it by clicking here. Mostly this framework make use of Angular Js Framework and SCSS to speed up the things, but it’s not mandatory to use.

This article is little long, so bare with me to explain you all the available method. Following methods in which you can test your app:

  1. Desktop Browser testing
  2. Using simulator
  3. Using Ionic View App
  4. Using USB Cable

Desktop Browser Testing:

You can run your app on browser just by typing ionic serve command at your project root directory.

Above command will start live reload server. In my case it starts on http://localhost:8100/#/login

Debug and Test Ionic App

Whenever you made any changes in your HTML, CSS or JavaScript, UI will be automatically gets updated. To run your app in Android and IOS frame you can type below command.

It will give you result like shown in below screenshot.

Debug and Test Ionic App

In both the above two ways, you can use your Crome developer tool to inspect DOM, styling and javaScript. Using these above method you can debug and fix all the issues which are not specific to Android or IOS Device like Login experience using Facebook or Twitter, Features that utilise your phone Camera etc. In order to test features like that you can use below listed techniques.

Simulator Testing:

You can also test you app using simulator. For testing it on IOS simulator, run :

Now for advanced testing if you want to test your app on different ios device like on iPhone 5, iPhone6 etc then you have to open your project using Xcode by running your Project.xproj file. You can find this file at below path:

platforms/ios/<ProjectName>.xcodeproj/project.pbxproj

Open above with xcode and now build it using any of the device you like. After selecting device, just hit the play button on left top.

Debug and Test Ionic App

You will see the simulator screen as shown below.

Debug and Test Ionic App

Now in order to debug your app you need to use either console log enable option or remote debugging option. Let’s go through both of these method one by one.

  1. Enable console log option: this option can be enable by running below commands:

Debug and Test Ionic App

So by using c , you can enable disable console log option. This is quite useful to see information that is printed using console.log & Using g <state name>, it will take to respective pages.

2. Enabling Remote debugging method: With the release of IOS 6.0, Apple introduce a tool that enable you to use desktop safari web inspector to debug IOS devices. In order to enable remote debugging on your device/simulator by Settings  –>  Safari  –> Advanced and enable web Inspector option.

Note : In IOS simulator you can use short key Command+Shift+H to go to home screen then click on setting icon and go to above path to enable web Inspector option.

Now open Safari browser on your mac desktop and go to Develop –> Simulator –> File Name as shown below.

Debug and Test Ionic App

After clicking on File Name you will be opened with remote debug screen. Now you got the full control of your app running on simulator.

Debug and Test Ionic App

It make testing of app whole lot easier and this is the best method to test app on devices.

Testing using Ionic View:

Ionic view is app developed by ionic developer where you can test your app on respective devices. First of all, you need to download Ionic view app on your android device from here and iphone or ipad from here. After you are done downloading app on both the devices, you need to signup here.

Debug and Test Ionic App

After signup, Login using your credentials on Desktop or iPhone or Android device.  On Desktop you will see list of all the apps available corresponding to your account.

Ionic Apps dashboard

On mobile also you will see the list of all the apps. Now click on app you want to test and you will prompt with a dialog box. Click on Download Files. After downloading all files, now click on View App option to view your app preview in Ionic View app.

Ionic lab preview

Ionic lab preview screen

Ionic lab preview options

This same method can be used to test app on both Android as well as IOS device.

Testing using USB Cable:

In this method you connect your device to the your Desktop/Laptop using USB cable. Detailed instruction can be found at Google Developer Page. Please follow all the instruction to made initial setup. Now for testing app on Android device, run:

Above command will launch app on your Android device. Now open Crome Browser and type:

chrome://inspect

This will open screen as below.

testing Ionic app using data cable

Click on inspect will prompt with a popup screen with both the UI and full debugging controls as shown below.

Ionic remote debug using chrome

 

References:

Leave a Reply

Your email address will not be published. Required fields are marked *