Explore the tools you have at your disposal to debug and view the performance of your application. First, take a look at the JS debug function, which you’ve used a couple of times already, and then look into the Inspector and finally the Performance Moni
- [Instructor] In this video, we'll explore the tools we have at our disposal to debug and view the performance of our application. First, we'll take a look at the JS Debug function, which we've used a couple of times already. Then, we'll look into the Inspector, and finally, the Performance Monitor. Let's get to it. So, the way to get access to the Developer Tools is to, first, make sure you click on the Simulator, and then, cmd-D, will open up the Developer Tool. The first one we want to take a look at is the Debug JS Remotely.
By clicking on this, it will open up a window on your browser, and then, you do Option cmd-J to open up the debugger. So, right now, we have two errors; we'll fix that in a second. This is basically showing you some of the errors or the messages that you get from the application itself, so some of them are just warnings that you should take a look at, but it won't crash your application; some of them are a little bit more serious and we need to take a look at that.
So, for example, the performance of the assets, because we're loading from lynda.com website, the images directly from the CDM, we're loading pretty big images on their applications. So, if you have a slow internet, then the image will take a long time to load. So this is something that could be optimized, and some of the things that we could take a look at, once we look at the other tools. So, let's fix that little problem here. I know exactly what that is. I don't know if you remember in a couple of videos past, when we add new items, such as style libraries, icons and things like that, we need to link, so we'll do our React Native link, and it seems like we haven't done that, because otherwise, we wouldn't see those problems.
So, let's go ahead in our console and do exactly that, and do a react-native link, and it will link everything that we need, and I think we should rebuild our application. That will refresh everything properly. 'Cause that could be the other cause of our issue. And let's go back to our app, make sure it loads properly.
Yes, it does, and the error is gone. So, if you still show those type of errors, and you did link the React Native application, then a rebuild, so a React Native run-ios will fix most of these issues. So, this is OK, this is an OK error because it's basically says that you have a port already open on 8081, which is our debug tool, so it's normal that it screams after you rerun the application and then this is still open, so we'll close that.
Yes. And then dismiss this error, rebuild, and we should be good. So, what we'll do, so we don't have that error, because this is the same thing, whenever you rebuild your application, you have the server open for the debug tool without closing it first, it gives you that kind of error. So, I want you to see that, because this is something that's going to happen, and you'll be like, oh-oh, something's wrong. So, let's dismiss that, open and then stop the Remote Debugging, and then reload again.
And we should be good. OK, so let's bring our tools back. The second one that I want to show to you is the Inspector. We've seen it briefly in one of the videos, but I wanted to go over it again. So, if you click on anything here, it's going to show you more details about that particular element. It's going to show you its size, the padding, and a lot of information such as the font size, the color used and things like that. This is very good when you need to debug your CSS, or debug your styles, or if something doesn't look the way you want it to look, you can take a look at this type of information, and then make the changes in your styles.
This is a cool tool that comes with React Native. OK, so let's bring our tools back, hide the Inspector, and show the Perf Monitor. That's the last tool that we want to take a look at. So, this shows you some information, but I'll click on it, by the way, you can also move it if you want; if you don't like it where it is, you can move it, but I want you to click on it, and it's going to show you more information. So, this is basically a tool to show you the performance of the application, to show you if there's any room for optimization.
The rule of any application, whether it's web or mobile, is to always measure your performance, measure the time it takes to load something, and then remeasure again when you make changes and your optimizations, if they actually improve your situation or not, that's always something that is good to have in terms of tools. So, these are milliseconds, loading times, so you can track 'em somewhere, and then, do your changes, and then optimize and track again.
So usually, the bottom one is the total amount, and the top one is the current amount of Views, but that means that there's room for optimizations, there's room for extrapolating some of the components that you're using. So, for example, we have, basically, the same code twice in our application. We have the NativeCourses and we have the ReactCourses, being the exact same code. So there's opportunities for extrapolating some of that into components and then reuse those components and load it. So if you're fairly familiar with React and you have done a lot of work with React, you've already seen that opportunity, and this is telling you that, yeah, there's opportunities for improvement there.
This is a problem that has been reported to the github repo, and I'm assuming there will be a fix soon. So, don't worry if you see 30 frames per second and the experience looks very similar to what we're seeing here, then don't worry about that. OK? So those are the performance tools. So this completes our overview of the built-in debugging and performance tools available to us in React Native. In the next video, we'll go over what you can do next in your quest to become a master of React Native.
See you in a bit.
- Initiating a React Native project
- Creating your data files
- Creating your React course listing view
- Creating your tab navigation
- Adding material design styles
- Finalizing your styles
- Filtering your courses for the views
- Reviewing debugging options