Debugging

[00:00:00]
>> As developers, we do a lot of debugging, a lot. I feel like most of my work is debugging. And it's pretty important to know what tools there are available for this. The main thing is basically being able to launch the Debug menu. Now if you're on a device, what you do is while the app is open, you shake the device like this and then you'll see a Debug menu like this.

[00:00:26]
It feels very silly if you have a room full of expert developers, and everyone's like. [LAUGH] But yeah, that's literally how you do it. If you're on an Android emulator, you use Cmd + M on a Mac, or Ctrl + M if you're on Windows and Linux. And then on an IOS simulator, you use Cmd + D.

[00:00:50]
So if I do Cmd + D, I get the Debug menu. And then same for Android, if I do Cmd + M, I get the Debug menu. One thing to note is if you're swapping between them, Cmd + M in IOS is minify. So if I do Cmd + M here, bye!

[00:01:10]
It's very annoying. Cool, so let's look at the options that we get here. The main option is reload. Now, the newest React Native has hot reloading on by default. So if you added something, it will automatically get transferred in your app, which is great. But sometimes you might have to turn hot reloading off or you have to explicitly reload.

[00:01:32]
So reloading is the main thing that you probably use this for and what this does is that it will redownload the JavaScript bundle. And because reloading is such a frequent thing to do, you can also use Cmd + R to do this. It doesn't work on Android as it does.

[00:01:52]
Now the other thing that you can do is you can debug. So I'm gonna move this to the other screen so you can see it better. If I press on Debug, it will open a React Native debugger, which is basically this. You'll see it's on local host 8081.

[00:02:07]
It says debugger UI. And now what you do is you open the inspector as you would on a web page, and then you have a console here. So anything you actually add to it, if you use console log to log something out, it actually appears here. Yeah, let's try this.

[00:02:31]
So in your app, don't worry about what it returns, whether you're using React Native or not, just go just above where the return is and do a console log. Cool, so now notice that this appeared in our console. And if I refresh. I have so many versions of these open, they're getting a bit confused.

[00:03:03]
Okay, there it is. And one thing that's interesting to try out, that if you use a different console properties like warn or error, they actually display in different things. So try using console warn instead and you'll notice that this comes up as little yellow box warning. And if you use console.error, you get this full screen error.

[00:03:31]
So one thing to note that when you're first starting up with React Native, if you this black screen with the red top, it looks really terrifying but actually it's just a console error. It usually means that something's going wrong, but it's not the end of the world. And finally, let's have a look at the other options that we have here.

[00:04:00]
So I'm gonna stop debugging, so the other thing we can do is you can choose Show Inspector. Now I don't use this very often because I haven't found it very handy on mobile screens, but basically it works the same as inspection on the web. So you can click on things and you can see some positioning information.

[00:04:22]
You can turn it off by doing Cmd + D, and hide inspector. And the other thing that you might wanna do is you might wanna disable fast refresh. So this refreshes as you type which might feel quite jarring to some people. So you can always disable or enable it as necessary.

[00:04:41]
Your options are quite advanced, but feel free to check them out on your spare time. The ones that I use most often are basically reload and debugger.