This course has been updated! We now recommend you take the React Native, v2 course.
Transcript from the "React Native Developer Tools" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Scott: DevTools, we kinda saw a lot of the stuff that I was going over. The main thing is, on your emulator, on your device or whatever, as long as you can hit the menu button or shake your device, you get access to the developer menu here. So let's just walk through some of the stuff that's happening.
[00:00:20] On this developer menu, the first thing we have is Reload, which does exactly what it sounds like. It's gonna reload your app, completely reinitialize the state and reload your app. Debug JS Remotely, we're gonna do that in just a second, it's pretty cool. Enable Live Reload, that's just going to watch your files and then reload the app for you when things change.
[00:00:40] It's different than the next thing, which is Hot Reloading. The difference between the two is, Live Reloading is gonna reload your entire application. It's just gonna be like, okay, the file changed, reload the entire app. Hot Reloading is not gonna reload your entire application. It's just going to patch the code that was changed and keep the state in your app.
[00:00:58] Sometimes you actually have to reload, though, If you change things. For instance, if one of your changes consisted of a change in this status bar, which is a native component, a Hot Reload might not catch that. And you might have to reload your entire app to register that status bar change at the beginning of the app.
[00:01:14] So Hot Reload isn't gonna catch everything, especially if you start messing around with the state. Then you just gotta reload. But most of time, Hot Reload is what you want. But again, you will catch yourself in some situations where the code you wrote is not being reflected on the device, because the Hot Reloading isn't patching things correctly.
[00:01:31] So you probably just gotta just do a quick reload. Cool, Toggle Inspector, let me just click on it. This is an inspector, so we can inspect things on our device, like Performance, Touchables. And you can see it highlights all the touchables on our device, like the only one that we have, which is just TouchableOpacity.
[00:01:49] Performance things, there's nothing to inspect, cuz we're not doing any movement on the page and stuff like that. So let's go back to this menu here. We got a Performance Monitor. So you can see if your animations are 60 frames per second, because they need to be smooth.
[00:02:06] So this is a big thing, especially for mobile, this is really great. I think it's super awesome to have this. And it also tells you the UI and the JavaScript and how many frames you dropped so far. It's ridiculous, it's pretty good.
>> Scott: And then we have things like Capture Heap, if you're having some memory leaking issues and you just wanna see what's going on.
[00:02:29] If you also click on the Dev Settings, you can do things like, you can tell Webpack packager to minify the JavaScript for you. So if you just click this, it'll minify it. This is to enable the Dev Mode, yes or no, Animation Frames Per Second, and all the other stuff.
[00:02:45] And then this right here is, if you wanna set up your own debugger manually, let's say, on some plugin that you made or on another computer or on your IP address, you would set this up here. Or actually, you would do this. This is for if you wanna just set up remote debugging on a hardware device.
[00:02:59] So if you got a phone plugged up and you wanna remote debugging that way, you would have to come in here and change the IP address and stuff. That way, you can do remote debugging. But we're just gonna do remote debugging right here, on the computer. Yo.
>> Speaker 2: Is that [COUGH] for only Android stuff?
[00:03:15] Cuz I don't see that on iOS.
>> Scott: IOS doesn't have this?
>> Speaker 2: No.
>> Scott: What? Let's check it out, let's run iOS. I think this is a reason why I decided to do dev on Android and not iOS, for this same stuff. So I would say iOS has more support for more plugins and stuff.
[00:03:36] But Android has a better developer experience, for me. Just the developer experience, it's always on point. iOS, I'm always having trouble developing. So for iOS, if we come in here and we say, where is the shake at? Simulate, there we go, Shake.
>> Scott: Yeah, I guess they just don't have it.
[00:03:58] Yeah, they just don't want you to have it, I guess. They just don't care about iOS.
>> Speaker 2: [LAUGH]
>> Scott: Yeah, [LAUGH] yeah, so it's not there. Wow, this looks funny on iOS. What is going on here? Yeah, definitely some default styling. All right, cool, so now let's actually get into how some of this stuff works.
[00:04:22] So if we're inside of our app, now let's go into the Todo. And inside this constructor, we did a console.warn,
>> Scott: With Dev Mode, let me get rid of all of that stuff. Let me turn off Hot Reloading.
>> Scott: Okay, okay, what's going on here? There we go.
[00:04:54]
>> Scott: Let me turn off this monitor.
>> Scott: There we go. Wait, I gotta unclick that.
>> Scott: Just go, thank you.
>> Scott: There we go, so that console.warn that I did, it's right here at the bottom in yellow. So if you do console.warn, it just pops up at the bottom in yellow.
[00:05:22] And it'll say the message that you logged. So this is a quick way to do some logging. So if you wanna check out an object, like, I'm trying to console.log. I wanna see what this.state is. So I'll console.log(this.state). And then what you wanna do is, you can make it pretty.
[00:05:40] So you can say stringify(this.state). And then you can say null, and you can say 2, which will format it on 2 indents. You can save that. I thought I turned Hot Reloading off, I don't know what it's doing.
>> Scott: I need to reload again. There we go. Cool, so now, if we save this, and if we reload one more time.
[00:06:12]
>> Scott: I put log, didn't I? It should be warn.
>> Scott: There we go, so we do console.warn, now we get the object right there in a nice, pretty JSON format. So that's a quick way to do some logging. This is very handy on iOS because you don't really have a logging.
[00:06:31] Unless you open up Xcode and go look at the logs, you don't have a way to look at the logs. And Android, I'll show you a way that you can do it. But on iOS, you don't.
>> Speaker 2: I was doing it in Chrome through iOS.
>> Scott: Yeah, you can do it through Chrome, too.
[00:06:43] Yeah, but I mean, you can actually look at the logs in the terminal with Android, using adb logcat. But yeah, you can look at the logs in Chrome.
>> Scott: Cool, so that is for consoling. Let's get to some of the cool stuff, which is Debug JS Remotely. This is probably my favorite feature.
[00:07:03] I think, as web developers, we take this for granted. But if we do click Debug iOS Remotely, it splits us out to Chrome. It opens up this tab here. You open up DevTools. You can see there's the logging right there that I did. It pops up right there in Chrome, pretty legit.
[00:07:22] That's not all we get. If you head over to Sources, a few things you wanna do here is, one, just click this little menu right here, go to Settings. And make sure you have enabled JavaScript source maps, make sure that's checked. If you don't have source maps, this is not gonna be that useful for you.
[00:07:39] So make sure you do have source maps enabled. And then, also, just click this pause here and say Pause On Caught Exceptions. That way, we can break on those things automatically. Once you have all that set up, if you head down over here, you'll see these cogwheels, and it says debuggerworker.js.
[00:07:56] If you click that, this is actually going to be our project. Right here, here's all the source code for it. And it's only one file. So here's our source code right here. And then we can come here and we can do web debugging. We can do breakpoints. We can step through, step out of functions, all that stuff.
[00:08:14] So let's actually set up our breakpoint on handle text Change. So let's have our breakpoint here.
>> Speaker 3: So you went through those settings too fast for me.
>> Scott: Sorry, I'll go back.
>> Speaker 3: Can you back up?
>> Scott: Yep, I will totally back up. So the first thing I did in the menu is I enabled Remote JS Debugging, right?
[00:08:31] And that should pop up in Chrome for you. Did that pop up on a Chrome tab? Cool, so open up the DevTools in Chrome. And just make sure that, if you go to Settings, which is just F1,
>> Scott: That Enable JavaScript source maps is definitely checked. I think it's checked by default, so it should always be there.
[00:08:52] But some people turned it off. And once you have that, you're fine, then you're good to go, yeah.
>> Speaker 3: Thanks.
>> Scott: You could just click on the Sources tab, and now you're inside of here. Sweet, so you'll also set a breakpoint where we're setting a state on handle text Change.
[00:09:04] So we'll go back to our app. I'm just gonna reload, just in case. So now, when we start typing, it should break right here, and we can inspect the stuff. So I'll type, and it totally broke right here. So now it broke, and now we can go and inspect everything, just like we would in the web.
[00:09:27] Pretty dope, we get the Closure, so we get the context. We can open up the console here.
>> Scott: And we can go, oop, come back, come back, console. And we get access to our app.
>> Scott: We can look at the props, we can look at everything. So I think this is pretty cool.
[00:09:45] Again, we take this for granted as web developers. But this is really big for a mobile, I would say. So that's pretty great. Any questions on this stuff?
>> Scott: Like I said, I find myself not using this a lot as a web developer. But ever since I've been using React Native, I use it all the time.
[00:10:06] I can't live without it. I don't know why it's so different. Maybe because it's so easy just to console.log in the web. I'm like, I don't need the debugger, I'll just log it. But here, it's just like, well, the logs go to Chrome anyway, so I might as well just use this.
[00:10:18] I don't know, I use this for everything. But if you keep this open, if you keep the Remote JS Debugging open, it's gonna slow down your development process. It's a lot slower, so sometimes you just need to need to turn it off, if you just wanna build fast, right quick.
[00:10:34] And then turn it on when you have a real problem. Otherwise, it takes forever to reload. And I've had issues where it's eating up a lot of memory. So I'll just turn it off and then turn it back on when I need it. So I'm gonna turn it off for now.
[00:10:47] So the other things are, like I said, we have Live Reloading. Look, it's freaking out right now. So this is how you know this is amazing. I turned it off and I'm trying to reset the app, but it's like, it's not responding. And that's because I haven't unpaused it from this breakpoint.
[00:11:04] So it's just like, you're telling me to do something, but the UI is reacting to me clicking things. But the app is just a paused state. So I just broke it. So that's pretty amazing. So I should've unpaused it first, but I didn't. But anyway, now it's back.
[00:11:20] So again, let's look at Live Reload. So we do Live Reload. It's literally just gonna refresh the app when we save the file. So if we do that, it just fetches the JS bundle again, that's all. Every time you hit save, it's just gonna fetch it again. That's what Live Reload does.
[00:11:39] You can actually enable Live Reload with JS debugging, and it'll work just fine. It's totally fine. However, I do not recommend enabling Live Reload. Or I do not recommend enabling Hot Reload with the JS debugging, because then it gets kinda crazy with the state. Cuz you patch the state with the Hot Reload, but the debugger doesn't get that patch sometimes.
[00:12:01] And it's just like, you don't know what's going on. So I would not recommend enable Hot Reloading with debugging remotely. But if you do enable Hot Reloading, again, what happens here is we can change things. For instance, this says create. If I came down here and was like, you know what?
[00:12:16] I want you to say make. If I hit that, it should just update it, there it is, to make, without reloading the entire application. It just patched the code that I wanted. It's a Hot Reload. Any questions on that? So this will be helpful, for instance, if you get in a navigation and you're four pages deep and you wanna make this one change on this button.
[00:12:38] This is why Hot Reload is awesome, because you can just make that change to the button, and it'll just Hot Reload it. Whereas if you did a Live Reload, it'll refresh the entire page. And you gotta go navigate back to that spot and then change the button. Whereas it wouldn't do that with Hot Reload.
[00:12:51] It would just stay there and just change the code that you changed.
>> Scott: Make sense?
>> Scott: Cool, all right, I think I covered everything I wanted to cover for development. I can't think of any other awesome stuff here, so yeah. Yeah, also, if you do console.error, I'm pretty sure it, yeah.
[00:13:13] console.error's just gonna spit up a big red screen that I'm sure we've all seen so far, especially online. So we do console.error. See, the Hot Reload, I don't think it caught that. So we need to refresh again, or reload.
>> Scott: It still it didn't catch it, let's see.
[00:13:33]
>> Scott: Let's just throw an error then, how about that? So we throw an error.
>> Scott: And we reload it. There we go, so we throw an error. This big red page pops up with a call stack, like, here's your error. Pretty much in your face, can't get away from it.
[00:14:05] And those are pretty much all the DevTools you have at your disposal. So if you use VS Code as your text editor, they have everything that I just walked through built right into the editor. You can go into your code and set breakpoints right here, in your code.
[00:14:19] And it will run the debugger right in your editor. And you could interact with the console and everything. It's pretty legit when it works, so.