Transcript from the "React Development Tools" Lesson
>> Brian Holt: Yeah, let's go ahead and let's do React tools real quick. I've been showing you various different ways of doing debugging with React like console logging, right, that's a classic one. Dumping stuff out to the dom with the pre-code JSON stringify stuff. But there's a better way, and I wanted to show you that right now.
[00:00:21] So if you just Google react devtools,
>> Brian Holt: You're gonna get, usually one of the first ones here is Chrome, right? And then the fourth one down here is Firefox. So click on either one of those, I use Firefox, so I click on that one. Add to Firefox, I already have it on here.
[00:00:43] So I'm gonna just use it on here, but go ahead and add your favorite version. Safari doesn't have one, they used to have a stripped down one and I think they just stopped supporting it, because I don't think many people develop directly for Safari these days. You can technically plug Chrome into Edge to get that to work, but good luck.
[00:01:07] Anyway, Firefox and Chrome both have these dev tools. If you open my dev tools here, you'll see that I have a React tab right there. So if you come back here to Frontend Masters, React, and I open my dev tools, you'll see that I have a React tab right here.
[00:01:27] Let's try refreshing that.
>> Brian Holt: I didn't leave throttling on, did I?
>> Brian Holt: Nope.
>> Brian Holt: So this should just work, but famous last words.
>> Brian Holt: And this all works. Is it working for other people or is it still saying loading React?
>> Speaker 2: It's working in Chrome.
>> Speaker 3: It's working in Chrome.
>> Brian Holt: So let's just try killing it, and try. I've had this problem before, where it just cannot connect to React.
>> Brian Holt: So if we say localhost:8080,
>> Brian Holt: There we go, so I'm plugged in now. So sometimes it has a difficult time hooking into React. And especially when you're bundling like we are right now, you just kind of have to turn it off and turn it on again.
[00:02:35] Like, just try finagling with it until it eventually connects. But you'll end up with something that looks like this, right.
>> Brian Holt: Basically a dom explorer but for React. So now if we look at here, you'll see app, you'll see browser router. And browser router has a bunch of layers in it, so just be aware of that.
[00:02:51] You'll have to go through a bunch of React Router. But you'll eventually land in, okay, here's App, there's my div, here's my different matches. So let's go look inside of this one because that's the one we're in. Bunch of more stuff for React Router. And eventually we land in Landing, right.
[00:03:14] And then we can see, we can click on Landing. You can see over here the Props that are in Landing, right. You can see the params being passed, location, bunch of stuff like that. You can look what's in the link, right. So let's do something a little bit more interesting.
[00:03:30] Let's go to Browse All. So it's something that people keep bringing up. We have not fixed this search box yet. Just so if it doesn't work, that's because we haven't fixed it yet. We'll fix it with Redux. Okay, so let's go into, I don't know, Love or something like that.
[00:03:49] Okay, and now we're going to look at the dev tools in React. So going through all the different layers is crazy annoying, right, like I don't want to do that. So a really quick short cut is just to right click on whatever component you're interested in, say Inspect Element.
[00:04:05] That'll take you to the normal Inspector, right, and then you just click over on React. And it's smart enough usually, it's usually smart enough to take you directly to that component.
>> Brian Holt: I am just having an issue today with React dev tools.
>> Brian Holt: All right, well, the secondary one is you can search down here at the bottom.
[00:04:32] So if I say Details, right, I can just click on it and go there. That's horribly annoying, though. Okay, so now I'm on Details. But now look, I can see the state here, right. So I have my omdbData right here, I can explore it and see everything that's coming back from the API.
>> Brian Holt: All that kinda stuff, but what's even more interesting is because it's state, right, I can actually just go in and mess with this data if I want to. So let's do that, so where's the IMDB score? This actually wasn't a 7.8 but it was 107.8, so that's the new rating.
[00:05:08] You'll see it updated right there in the UI instantly cuz it's just calling set state, right. Or you can go in and say, where's Header? So search for Header down here.
>> Brian Holt: Except we wanna do it inside of Browse All. So search for Header, click on that. I was just getting it from Search, so actually we wanna look at Search, that's what I wanted.
>> Brian Holt: Okay, so I have Search in here, I have searchTerm down here. I can modify that to say dare, right, and hit enter. And all of a sudden, it does the search, everything like that, right there for me. So you can kinda mess around with the state to kinda get it in the state that you want to to mess around with it.
[00:06:04] It's really useful for that. It's useful for seeing what props are being passed where. And another useful thing that it does is, let's say I need to programmatically mess with search. While I have it selected here in the dev tools, I can come over here to Console and now whatever I had selected in the dev tools is saved as $r.
>> Brian Holt: So now I actually have a handle on this, so I can start messing around with it and say $r, what is your state, right? And it'll show me the state.
>> Brian Holt: I think it's pretty cool, pretty compelling. It's a really easy and useful way of debugging React.
>> Brian Holt: I use them all the time, so, any questions about the React dev tools?
>> Brian Holt: So again, available on Firefox, available on Chrome, cross-platform. You should definitely, definitely use them.