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

Brian introduces the React browser dev tools, available in Firefox and Chrome, that allow developers to inspect and select components within the browser for another approach to debugging and development.

Get Unlimited Access Now

Transcript from the "React Browser Dev Tools" Lesson

[00:00:00]
>> Brian Holt: Last thing I wanna talk about here is dev tools, which are absolutely essential.
>> Brian Holt: So I would just invite you to google React dev tools and then just put Chrome or Firefox. I'm on Firefox, obviously, so.
>> Brian Holt: Here it says React Dev Tools, and I'm sure there's one for, Google Chrome's right there anyway.

[00:00:29]
>> Brian Holt: So you just come in here and you say I already have them, you can see them right up here for me, right? But Chrome as well, you just click that, and you'll install that on Chrome.
>> Brian Holt: I think these are the only two that exist right now.

[00:00:44] Edge doesn't have them, and Safari, I think they got rid of them. So you either have to be on Firefox or Chrome to have them. The new Edge will have it, the Edgium, as it were. Okay, and let me show you a little bit how to use this.

[00:00:58] So this is a React application. You can see up there that it has React in developer mode because it's in red.
>> Brian Holt: And then I can open my dev tools here, and I have a new React tab right there. So I'll click on that,
>> Brian Holt: And now I have a DOM explorer, and I can explore as if I was exploring a DOM tree, right?

[00:01:25] So you can see StrictMode there, an app, then I can see my searchParams thing and I can highlight it, right? And it will show me that component on the page. Inside of that I can see the drop downs. And what's cool is here, do I have anything passing params around?

[00:01:45] I don't really. But you can see here, you can see some of the props here. I can see all the children that it has, it's a useful kind of DOM explorer for a React application, right? Let's say I have a big application I need to find drop down, so I can just type in here, drop down, and it'll actually search for drop down there, which is useful as well.

[00:02:07] I can click this thing right here, and I can figure out where this is coming from, so I can find this input and click on that. And it's like, okay, this is the input you're looking for. I can see the properties that it's getting, the change handler, the placeholder value, and so on and so forth.

[00:02:28] Something else cool you can do, let's say I'm just on the page here and I want to find this Submit button right here. So you can right-click on it, say Inspect Element, just like you normally would, right? This will take you to the inspector, but if I click on the React dev tools, it will still be highlighted, right?

[00:02:50] And then last thing here, I can actually go into the console, and if I wanna mess around with it, I can put $R, and whatever is selected in the React dev tools will be $R inside of my console. So I can programmatically manipulate it there as well.
>> Brian Holt: And just so you know, you can actually do that with the inspector as well.

[00:03:15] So if I click on that and I put $0, you can do that with just the normal inspector as well. And I think you can do $1, that might be a Chrome-only thing, but that'll grab the previous thing that you have grabbed, right? So the dev tools are very very helpful in doing React applications, something you wanna have installed for sure.

[00:03:42]
>> Speaker 2: If we're voting the production version of the site, I get a warning when I click on the icon for the tools, warning that we're using the production belt or the development belt. Is that the development belt of the tools or development belt of React?
>> Brian Holt: Where are you seeing that?

[00:04:03]
>> Speaker 2: In your extensions, clicking on that.
>> Brian Holt: Right, so what's it? If I go to Netflix.com,
>> Brian Holt: This homepage is built using the production build of React, right? So it's just letting you know hey, you're in development mode, you should not be shipping this to production. It's okay to have in your developing environment, as you should, but this is what you should see when you go into production.

[00:04:34]
>> Speaker 2: Isn't Parcel transpiling and munifying everything, and then what we're rendering here, what we have opened is the production version or no?
>> Brian Holt: It's still the development version, which is what you want, right? Cuz if I didn't have the development environment, then I wouldn't get all the useful error messages that React has for you.

[00:04:54] It would just say an error happened, and good luck, right?
>> Brian Holt: Instead of saying this broke at this line in this way.
>> Speaker 2: Okay, thank you. So even though we're running it out of the dist folder, it's not production.
>> Brian Holt: Right.
>> Speaker 2: Okay.
>> Brian Holt: Yeah, I'll show you how to build it for production later.

[00:05:12]
>> Speaker 2: Thanks.