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

Brian demonstrates using the different React dev tools including inspecting elements, viewing a component's render tree, and viewing a applications performance profiler.

Get Unlimited Access Now

Transcript from the "React Dev Tools" Lesson

[00:00:00]
>> Lastly, let's dig into the React Core Tools. So, the React Dev Tools rather. You'll notice here in my Firefox I have, the React Tools here installed. You can even see that this page that you're looking at right now actually uses React in of itself. You'll see here I have components and profiler here at my dev tools.

[00:00:25] Let's open Pro components. So this is actually a set of tools. It's a browser extension that the React in provides. So you can just say react Dev Tools and search for that on, I'm on DuckDuckGo but you can be on Google or Bing or whatever you wanna be on.

[00:00:44] And the first couple ones will be, here it is for Chrome, here it is for Edge. Firefox, so you can get it for Firefox. They used to have Safari, I think Safari is unsupported now, so if you're on Safari temporarily, please just take a look at Chrome or Firefox.

[00:01:04] It's good browser, but that's just the choice they made. So open that, you can see that there's two different things here. I use the components one all the time. So this is basically like a DOM Explorer, but for React, so you can see here I have app. I have search Params, I have results.

[00:01:23] I have pets and it works just like dev tools as well which is really great. Another great thing I can do is I can right-click on Luna here, I can inspect element. And then, if I just click into to the Components, it'll actually select that for me. So it's smart enough to follow that kind of thread there.

[00:01:46] I can see all the props that are going into Luna, Havanese, images, location, all that kind of stuff. I can see its render tree if I go in here and now like Inspect Element on the Select there and I go back to Components. So that's inside of search params and I can actually modify the state directly in there.

[00:02:11] So let's modify this one. This should be animal. If I'd say dog, actually you notice I modified it directly in there. Or if I modify this one and I say Minneapolis, MN, and I hit Enter, so I can actually modify the state directly in my application. This is useful for some debugging purposes.

[00:02:44] I can see all the keys and parameters that are going into there, all those kind of useful things. The profiler, I'm not gonna get too much into it just cuz I don't really know it very well. But if you're trying to find performance problems, I can click the Record here, click around.

[00:03:03] And then I click Stop. I'll get a nice looking little flame graph ranked interactions, blah, blah, blah. It'll give me a bunch of performance data that I can actually go profile problems with my components. This obviously wasn't very big because it's not a very big application. But I mean, you could run these on Netflix.com and see a pretty big application and how it runs and its performance profile.

[00:03:29] You won't get nice names because they minify and all that kind of stuff that they're built, and actually it might not work because they might not be able to instrument with the production bill. Definitely check, it used to work, it might not work anymore. Anyway, those are the dev tools.

[00:03:47] Be sure to use those, they are gonna be extremely useful not only today, but for every react developer ever, it's an essential part of your toolbox.