Debugging Ionic Applications When Deployed to an Android Device

Transcript

In this video, we’re going to look at how to remotely debug an Ionic application that’s running on an Android device. Now, sometime last week I did a similar video where I showed you how to do it on an iOS device and it’s pretty much the same thing with Android as well. I wanted to make this video anyway and I figured I’d also do a little bit of debugging as well just to give you a bit of an example.

0:34 I have an application that I’ve just created for the sake of this demo here. It just creates a list and I’m adding 2,000 items to that list and I’m adding some box-shadow and transforms and stuff. It’s going to look pretty absurd but basically I was trying to do some stuff that’s going to be really bad for performance so we have something to work with when we’re debugging. Before you can actually debug on your Android device that’s connected to your computer via a USB cable, which is what I have set up right now, you need to make sure to enable Developer Options on your Android device. Also, make sure that you have enabled USB Debugging. Enabling Developer Options is different for different Android devices. Some devices have really weird ways of activating that so just Google your particular Android model and you’ll find some instructions on how to do that. Once you have USB Debugging enabled and you have your Android device connected to your computer through a USB cable you’ll be able to start doing what we’re about to do.

1:38 The first thing we’re going to do is actually get this running on the device. If we just run ionic cordova run android in the terminal it’s going to build the application and then launch it on the device.

1:51 Of course, you can’t see it right now but I have this running on my Android device right now and that’s connected to my computer. Now, what I’m going to do is open up the remote debugging tool so we can play around with it a bit. As I mentioned, this is very similar to what we did in the other video but this time rather than using Safari we’re going to be using Chrome. Just open up the debug in any Chrome window on your computer. I’ve just got the Ionic box up here and I’m going to inspect it. It doesn’t matter where you do this from. You can see down here I have a remote devices tab but if you don’t have that yet you should be able to click on these little dots here and go into More Tools and then go to Remote Devices and that will launch this tab. You can see I’ve got my Blade S6 connected here (that’s the Android device I’m using). If I click on that we can see what apps are running on the device.

2:45 Now I’ve got that example application I just launched. If I click inspect on this now, I open up the Remote Debugging window and now you can see what I’m actually seeing on my device in this little preview window here. This preview window isn’t perfect. As I do stuff on the device it doesn’t really reflect here in real-time exactly but you can kind of see what is happening a little bit through this preview window.

3:10 Obviously, I’ve got this really wacky list right now that is just tons and tons of list items that say test to get a 20-degree transform on it. I think the shadows not actually being applied but that doesn’t really matter. This is going to perform really poorly.

2:25 We have all the usual debugging tabs here. I talked a lot about these in the last iOS video and for the most part, it’s all the same. I did figure, I would do a little bit of an example here of trying to figure out why this application is performing so poorly, why it’s so slow and janky. I know why - because I’ve stuffed a list full of 2,000 elements of the transform on it. But if we didn’t know that, I want to show you some steps you might take to try and figure out what’s happening. Obviously, it has a scroll you might not be able to tell on the video so much but it does feel very poorly performing, it certainly doesn’t feel smooth as I’m scrolling. What I could do is come to this performance tab here and we can record kind of a snapshot of performing a certain activity and that’s going to give us a sort of timeline of what is happening throughout that process and that’s going to include scripts that are running, paint events that are occurring on the screen. We can see these things happening in the amount of time it takes and if it helps identify where something might be performing poorly.

4:31 If I just hit the record button now and then I’m just going to scroll on my device and now if I stop that it’s going to generate this data for us, we’re going to be able to see the timeline of what’s going on.

4:48 This is basically the timeline I was just talking about here. This is the whole period that goes through about 10 seconds of that recording that I just did. If we want to we can just take a look at a subsection of that so there’s not so much data and see what’s happening in that space of time. If we look in this section here, you can see in the Input section we have the various events getting fired - touchstart, touchmove - you can also see the scroll events on the main thread here we’ve got the scroll event then an update layer tree event. This sort of just repeats over and over again here. You can also see down here the breakdown of what’s happening for you. Highlight a period over this amount of time, you can see that spending most of its time rendering here. What I think is perhaps the most interesting part of all this is the Frames section up here. This will show us what FPS (Frames Per Second) we’re achieving with this particular scroll we’ve got happening here.

5:48 If you’re not really familiar with the concept if you think of it like a movie, a movie is really just a bunch of Still pictures that displayed really quickly. If you display them close enough together you get the illusion of movement occurring - that’s how animations and movies work. Basically, we’re at a point where we can’t really tell has humans that we’re not looking at a bunch of still images displayed after one another, we’re looking at some fluid moving thing that’s around 60 frames per second. If you’re displaying something 60 frames per second that means 60 different images per second then it’s going to look like fluid movement.

6:27 We can see in this debugger, under Frames, if we take a look at the FPS, as we scroll across we can see here we go 2, 6, 8, 14, 13, 1, 13, 5, 4, 8, 6, so these are really slow frames per second so as we’re scrolling this list really fast we’re not getting enough frames to actually display that fluidly. So, what we could do now is we could start trying to figure out what’s causing this low FPS.

6:58 You could do this live through the debugger. I could come into here and say, “well, I’ve got this weird transform thing going on maybe that’s causing some performance issues there.” I could come into the here:

Screenshot of debugging an android application

and find where I’ve applied that. I’ve got the transform there so I can just turn that off now and you’ll see that take effect on the device. Now it’s back to a normal list but we still have a lot of items in there. If I wanted to at this point come back to the performance tab and click that Clear button and we’ll record another snapshot and we’ll see if we’ve improved it all. Hit the record button again scrolling on the device and then I’ll get stopped on here.

7:36 So, we’ve got our snapshot again, if I highlight just another section again here and we take a look at the frames again we can see we go 6, 7, 12, 6, 4, 9, 6, 8, 59, that was a good frame in particular there but still, most of them are pretty slow and it’s certainly going to be noticeable and janky with this low of an FPS. As a more drastic move what I’ll do is I’ll try just dropping the amount of items in the list down. So rather than 2000 which is a pretty absurdly high amount let’s just go back down to 100 and also you will get rid of that transform as well.

8:17 We’ll save that and what I’m going to do now is just redeploy that to the device and then we’ll try again. Ok, so that application is with the changes that have been redeployed to the device. If I open up the inspector again here inspect that same application. You can see now we don’t have the transform going on by default it’s just a normal list now and it’s much smaller. So it still is a reasonably large list but it’s certainly not 2,000 anymore. So we’ll do the same thing again - we’ll go to that performance tab, hit record, we will scroll a little bit again and hit stop. Another thing I want to mention here is this Screenshots little checkbox up here

Screenshot of debugging an android application

you can actually tick that and as you’re recording you have a series of screenshots on the screen which will show you what the application looks like at certain points. It’s a good way to tell maybe an application startup you can see at what point I think first starts displaying on the screen. I don’t think it’s particularly useful for this scenario but it is like that is very useful.

9:23 Let’s take a little slice so we can see things a bit bigger here and we’ll take a look at what sort of frames are getting now. We have 23, 80, 35, 51, 70, 58, 29, 62, 67, so there are a few frames in there that are still below that 60 frames per second but the majority now are around 60 frames per second or at least a bit above or a bit below that. Now, this list if we scroll that is going to perform much more smoothly and you can see here most of these frames are green and they were in the other example too actually. If you have any really long frames or some really slow frames down to like say 1 frame per second the debugger will actually highlight those as red so that can be a really quick way to identify an area where something is seriously going wrong.

10:11 Lists are one of those things that are really one of the biggest challenges for hybrid web-based applications like this. Displaying large lists and getting to them to scroll fluidly is one really big challenge which I think Ionic has tackled really well but for large lists, especially if you’re going to include things like images, using a standard list probably isn’t a great idea. You might want to look into the virtual-scroll list that Ionic provides. That does some kind of some Dom recycling so rather than having say a 1,000 items loaded into the list at once there’s really only say maybe there are only 10 or 20 and those elements get recycled as you scroll through so it makes it much easier to achieve the high FPS with a really large list.

11:01 I mostly just wanted to show you an example of using the remote debugger with an Android application on an Android device and I figured it’s been interesting to actually do something a little bit as well so I hope this video was useful if you want to see similar videos let me know what you’d like to see. I’ll see you in the next video.

Check out my latest videos: