This course has been updated! We now recommend you take the Complete Intro to React, v8 course.

Check out a free preview of the full Complete Intro to React, v7 course:
The "React Dev Tools" Lesson is part of the full, Complete Intro to React, v7 course featured in this preview video. Here's what you'd learn in this lesson:

Brian walks through installing and using the React Dev Tools extension for the browser. The React Dev Tool allows developers to do things such as explore the React app like a DOM tree, modify state and props on the fly to test things out, tease out performance problems, and programmatically manipulate components.

Get Unlimited Access Now

Transcript from the "React Dev Tools" Lesson

>> Last thing here that I'm gonna show you, which is probably the most useful and you might be a little upset at me that I did not show you sooner, but now that you're gonna know about it you can use it all the time. There is a extension for browsers so search for React extension for whatever your browser.

[00:00:17] I'm obviously on Firefox, so React extension Firefox. It looks like this, the React Developer Tools. It's on Firefox, it's on Chrome, you can obviously get it on Edge through the Chrome store as well. They used to have it on Safari and they stopped supporting it cuz I don't think it was super well used.

[00:00:38] I think brave can use the Chrome version as well. Anyway, install that. You'll end up with something that looks like this up here in the top right. So you can see here, it's lit up on this page cuz obviously, there is React on this page. This page is using the production build of React for the course website.

[00:01:00] Or if we go into here, this is using the development build. So this will also remind you of, hey, you need to package this for production. Okay, so once you have that installed, you should get additional two tabs on here, the components and the profiler. Let's look at the components one, it will actually show you like a DOM Explorer of your app.

[00:01:24] So I can see app here if I click on it I can see the props. You can see the search params. You can see this one doesn't actually have any state. This one has props here, you can look at what props are being passed down. This one should have some hooks though that we should be able to check out, yeah we do.

[00:01:52] So if I change animal to be cat here. You can see it'll actually do that and you can actually come in here and start messing with it. So I'm gonna make this dog now and you can see it gets modified over there. So that's kind of fun, you can mess with your state.

[00:02:09] You can see the breed list here that's coming down. So it actually can even see into your custom hook, which is kind of cool, right? There's a lot of cool stuff you can do here. You can actually go in here and I get into this Intermediate React a little bit.

[00:02:25] But let's go to search params, there's a thing called use debug value. So you can actually render stuff directly to the extension. So if I say use debug value, hi from the code, and then if I come back over here and look in search params. So typically you wouldn't use it directly in here.

[00:02:51] You'd be using it for something like a custom hook. And actually, that might even be my problem here. I'm gonna have to use it from breed list.
>> Use debug value can be used to display a label for custom hooks in React Dev Tools.
>> There you go.

[00:03:11] So right there you can see hi from the code, that's what it is. So you have to do it from within a custom hook. So let's say we needed to show some sort of internal state. Maybe something you could do here that actually might be sort of useful is you could say how much object.keys from localcache.length.

[00:03:37] And we could just say number of values in cache. Nope, don't need that. So as of right now, you can see down here, it's probably kind of hard to see. But it says, number of values in cache 0. But if I go in here and say, rabbit, cat, you can see that number kind of going up over time.

[00:04:05] So that would be a good use for this right, is like showing some sort of internal debugging value that's useful for you. That wouldn't make sense for you to store in some sort of hook or something like that. I wasn't necessarily planning on talking about that, but there's lots of cool stuff you can do with the Dev Tools is kind of my point here.

[00:04:22] There's also a profiler here, which I have actually used far less. But we can click this. And then you can kind of see how stuff is changing over time. So you can see here, what the priority of it was, how long it took to render. So I just recorded a little bit of my app and then I clicked play and then it shows you a detailed kind of flame graph of that.

[00:04:52] You can see here we're not doing very much so there's not really any performance concerns here. But if you're going through something and your app was churning through tons of data and was being super slow to render. This is how you would find out where you're getting stuck in your renders.

[00:05:12] Pretty cool stuff, right? There's some pretty advanced stuff in here. They're always making it better as well. It's a lot more advanced than it used to be. One more thing I was gonna show you, which I think is kind of a fun trick. So I can actually say Inspect Element here.

[00:05:27] Inspect. So I've now clicked on that. If I just do that and then I immediately go over to the Components tree, it'll actually highlight directly the one that I was doing from the Explorer, right? So notice this is the lunar component and that's what I inspected. Or if I wanna look at this button, I can inspect that and then go over to the components again, and notice that search params is highlighted right?

[00:05:55] So it'll make that connection for us you can actually just do inspecting as you normally would. To take that one step further we can go over to our console now and we have dollar sign r. This actually will refer to whatever you have selected in your component tree as well.

[00:06:12] So if you wanna programmatically manipulate it. I don't know what's in here. You can see the hooks that it has, so that's kind of interesting, right? So you can see all these hooks that it's keeping track of at the moment. You can see the props that it's being passed, which at the moment's not anything.

[00:06:32] Type, so that's search params type. So all pretty cool stuff right? All things you can use to kind of like debug the various different things in React.