Debugging Ionic Applications When Deployed to an iOS Device

Transcript

0:00 In this tutorial, I’m going to show you how you can go about debugging an iOS application built with Ionic whilst it’s actually running on a real device as opposed to just testing it through the browser.

0:21 I have my iPhone hooked up to my computer now by a USB cable and I’ve just got this app called reflector that’s displaying what I’m seeing on my phone on the screen here as well so that you can see what I’m doing there. One of the good things about Ionic is that we can do a lot of the development in the browser because it’s web-based and so it’s fine for us to test and debug a lot of our code just straight in the browser. We don’t have to worry about deployment to a device or testing it on there. In the end, if you are developing an iOS application with Cordova you will want to test it at some point on a device and it’s probably best throughout the process as well. Theoretically, the code should run the same on the phone as it does through a browser but there can be some differences and you’re also not going to be able to test things like Cordova plugins if you’re running through the browser.

1:20 What I’m going to do first is have this application here that I built in a tutorial last week where I created this kind of fake splash screen. It’s an animated splash screen - you can’t usually do a splash screen that’s animated because it just has to be a PNG file - so I created this little method where we have a safe splash screen that pops up to make it look like the splash screen is animated. I’m just going to launch it now and you’ll see what that looks like as I run it.

1:52 So, that’s the real splash screen there - that blank white screen - then our fake splash screen with this SVG animation runs. This isn’t something that I can really test properly on or through to just a normal browser on my computer because I’m relying on using that splash screen and just using some Cordova plugins to interact with that. It’s something that I’ll need to test on the device. In this case, everything is working fine but if I were to run into some issues, maybe the splash screen never displayed or it was just crashing or something like that, it would be hard to figure out where to go from there because in the browser we can just inspect elements we can see the console logs. It’s not so obvious how to go about doing that on a real device but it’s actually quite easy all you have to do is connect your phone via a USB cable to your computer.

2:49 You will need a Mac if you’re trying to debug an iOS application on an iPhone. There is also a similar method available for testing and debugging an Android application by using the Chrome web browser but I’ll probably do that in a separate video.

3:10 All we need to do is open up Safari on your computer, go to the develop menu - this might not be there by default so you might have to Google how to make that available - and then you’ll be able to find your iPhone or whatever device is using there. Then just click on this Ionic link or you’ll have the title of whatever on your pages. Click that and it’s going to open up this debug console which will appear exactly like the one you get through the browser.

3:40 So, if I have both of these up now and just resize that a little bit. If I go through here now (click on the Elements tab) I can select various elements and you can see as I sort of hover over <ion-app> you can see the highlighting on the device. The phone that’s on the screen to the left, that’s my actual phone that’s running the application right now. So, I can even go in right now, just change stuff in here, and that’s going to immediately take effect. If I wanted to debug some stuff in the Dom here, I could easily play around with some stuff and delete some things, that can be useful for some weird styling things going on if you want to just try out a few different things.

4:26 If I were to refresh the application now, you can see a bunch of network requests going on there. This is an important point - sometimes errors will happen at startup. This happens a lot where maybe you get a blank white screen but you open up this debugging console here and there’s nothing there, there’s no indication that anything has gone wrong. What happens is since we need to open this inspector after the app has already started, some console errors could have happened but we didn’t get to see them. What you can do is click the little refresh button up here in the top left and that’s going to reload your application with this debugger open. You can see as I refresh that then we hit this debugging thing you have the breakpoint set on this code. We can also debug our applications using the debugger as we would in the browser as well.

5:27 To do that all you have to do is come into the resources page here and you’ll see we have the index.html file there. We have a script on the style sheets folder so if you go into the scripts you’ll be able to see your main.js file which is the bundled code for your application. You can actually expand that and you can see your source code as well. So, if you come into the source folder you can see the individual pages of your application. If I went into the splash screen folder there, click on that and I can see the code that I’ve actually written. Then I can set up that breakpoint on the splash screen call there I could set up a breakpoint anywhere I want and then when that code runs it’s going to pause the application and we can try and figure out what’s going on.

6:16 I don’t want to actually get into how to use the debugger and stuff like that in this video I just want to mainly show you this so if you are familiar with debugging to a normal browser this is basically exactly the same thing. If you’re not familiar with debugging with breakpoints and stuff like that you probably won’t really understand what’s going on here but as this is just a way to kind of stop the execution at a certain point and then we can see what’s happening at that point in time. We can also use breakpoints to maybe you want to see if this section of the code ever even executes. So, maybe in the application, our fake splash screens were never getting hidden and I think - well that’s weird because well this should be dismissing the splash screen why isn’t that happening? Maybe I set a breakpoint there - refresh the application and see if that ever gets hit. In a second here, that triggers after four seconds, and you see that triggers so that’s fine and obviously this is working.

7:21 Again, I’ll probably make a video going through a more in-depth example of using this. You also have your timeline tab here - let me just get rid of that breakpoint - so, in the timeline tab we can see all these network requests and stuff coming in and you see a breakdown of the timing of how your applications loading and you can even highlight specific sections in here. I could look at the JavaScript events going on within this time frame here. I can see we have a microtask there with a promise that’s being executed. There’s not a lot going on in this application to really do anything interesting here but you can kind of organized stuff by the amount of me they take to execute. That can help you find some errors in your application where you could do with some improvements especially if you see something in here that’s taking up a huge chunk of time.

8:19 In this video, I really wanted to show you quickly how to launch this debugger and how you can test and debug an application while it’s running on a real device as opposed to through the browser. There is a lot you can do with the debugger obviously and there’s a lot of stuff here I haven’t covered so I’ll probably do even a few videos on stuff like this in the future. If there is anything you’d like to see specifically leave a comment and I’ll see if I can come up with some kind of tutorial for it. I hope you enjoyed this video and I’ll see you in the next one.

Check out my latest videos: