Complete Intro to React v4 React Dev Tools
This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "React Dev Tools" Lesson
>> Brian Holt: Actually this might be as good a time as any, that I'm gonna show you how to use the React Dev Tools. So search for React Dev Tools and then either Firefox or Chrome depending what you're using. Mine is here on the top one.
>> Brian Holt: Go ahead and go and install this.
[00:00:24] I already think I have it.
>> Brian Holt: I have to have it.
>> Brian Holt: Yeah, yeah I do. Okay.
>> Brian Holt: So I can come in here and I can go to my React Dev tools. These dev tools will only show up if it detects React on the page. So it'll hide itself if there's no React on the page.
[00:00:49] Okay and now you can see I have like a,
>> Brian Holt: Well, that's not super helpful.
>> Brian Holt: I don't know how to make that any bigger, but I can assure that says app, right? So it's actually like a DOM explorer for our React application. And I go in here and I can see the router.
[00:01:10] And I go in here and see all the various locations, all the components within React router. But I can eventually get down into, here. The,
>> Brian Holt: Details.
>> Brian Holt: Yeah, it's not letting me, so it's probably a little bit hard to see here, but I can actually see the props being passed into details, right.
[00:01:45] So you can see here that ID 1 is being passed in. So if I go in here and change this to be one, two, three, four, five.
>> Brian Holt: I inspect element here and then go back to React.
>> Brian Holt: You can see the ID is 12345. It matches whatever is here in the URL.
[00:02:09] So that's kinda what's happening with that colon ID. It's taking that part of the URL and passing that in as a prompt. And you can do this as many times as you need to.
>> Brian Holt: This is also super useful for just finding stuff that you need. Like you notice that I had to drill through all these different things, it's really easy to just say details and just type it.
[00:02:30] And it'll narrow it down to whatever you're looking for.
>> Brian Holt: That's super useful.
>> Brian Holt: And notice that I, actually, could just right-click on this and Inspect Element, this takes me into my Dev Tools on the Firefox side. But because I have it select on the Firefox side and I just go into React, it'll actually take me directly to that highlighted inside of the React Dev Tools as well.
[00:02:54] So that's super useful. And lastly, so I have app here highlighted. If I go into my console and say, $r, it'll actually give me a handle in whatever I have highlighted in my React Dev Tools. So if I say, $r.setState,
>> Brian Holt: hi: true. Okay, so I called setState on it, now if I go back into my React Dev Tools you can see that I have this state right here, right?
[00:03:30] So I can actually manipulate React directly through my console as well.
>> Brian Holt: And now I can mess with that as much as I want and turn it true and false, which is fun as well.