I 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.
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:
- Desktop Browser testing
- Using simulator
- Using Ionic View App
- Using USB Cable
Desktop Browser Testing:
You can run your app on browser just by typing ionic serve command at your project root directory.
$ ionic serve
Above command will start live reload server. In my case it starts on http://localhost:8100/#/login
$ ionic serve -l
It will give you result like shown in below screenshot.
You can also test you app using simulator. For testing it on IOS simulator, run :
$ ionic build ios
$ ionic emulate ios
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:
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.
You will see the simulator screen as shown below.
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.
- Enable console log option: this option can be enable by running below commands:
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.
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.
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.
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.
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.
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:
$ ionic run android
Above command will launch app on your Android device. Now open Crome Browser and type:
This will open screen as below.
Click on inspect will prompt with a popup screen with both the UI and full debugging controls as shown below.