Check out a free preview of the full Complete Intro to React, v3 (feat. Redux, Router & Flow) course:
The "React Development Tools" Lesson is part of the full, Complete Intro to React, v3 (feat. Redux, Router & Flow) course featured in this preview video. Here's what you'd learn in this lesson:

Since React code is transpiled and bundled into a single file, debugging React code can be a challenge. Brian spends a few minutes demonstrating React Developer Tools browser plugin to illustrate how to debug React more easily by inspecting the component code. - https://github.com/facebook/react-devtools

Get Unlimited Access Now

Transcript from the "React Development Tools" Lesson

[00:00:00]
>> Brian Holt: Now what I want to show you is some of the debugging tools, right? So far we've been doing things like consul.log and kind of that sort of stuff to do debugging. There's actually react dev tools which are super helpful. So I'm going to go and open my consul here and yeah do I need to install it for this?

[00:00:23] So they're available for Firefox, and they're available for Chrome. They're not available for Safari or Edge. If you really want to get creative you can probably make it work because Chrome dev tools can target other browsers. I'll leave that to your discretion. But we're gonna go pull up the React dev tools and you can see here, the React dev tools here in the Chrome web store.

[00:00:54]
>> Brian Holt: I'm gonna go ahead and add that to Chrome.
>> Brian Holt: Okay, now I'm gonna go back to my app here. And refresh the page. I might have to restart my application.
>> Brian Holt: That's one. There it is. Okay, sorry. So now we have a tap here in our browser.

[00:01:27] It should appear relatively similar in Firefox. It'll just be a tab in there. We're going to open it. And now if you check this out you can actually see the component hierarchy that our React components look like. The one thing you might notice here is that there is some stuff that you may not expect to be there.

[00:01:48] Like for example you have app right? That's the top level one, you know what that one is. BrowserRouter, we also put that one there. But BrowserRouter itself is rendering its own router component, so we see that here. That's rendering out a div, which is rendering out the switch which we did.

[00:02:03] And then we have this lowercase component, right? What is that? Well, remember in order to render a search, we have that anonymous component that renders search, so let me show you what that looks like.
>> Brian Holt: Notice how this is a function here, right? That's the anonymous component, that's this component right there, right?

[00:02:27] Okay so that's the function that renders search which is this, and then you can go down, you can see all the various show cards, right? You can actually dive into them and you can see here, you can see all the props, you can see the key that it used.

[00:02:42] If I go up here to search and I click on that I can actually see the state that's interior to that. What's kind of fun is if it's state I can actually just change it directly here in the dev tools. It's not super interesting 'cause I can just do it up here as well, but sometimes you have state that's a little bit more difficult to get at.

[00:03:03] So that's kind of useful. You can't rewrite props, right, that makes sense, because this component wouldn't have access to that.
>> Brian Holt: You can do things like highlight update. So if you're kind of confused about how things are changing, notice that my dev tools are flashing yellow when I delete and update things.

[00:03:30]
>> Brian Holt: So that's pretty cool.
>> Brian Holt: You can also even see that it's updating. You can see it flashing a little bit as I'm typing. So that's a neat little tool there. It works just like the browser that if I highlight one of these, it's going to highlight it on the DOM as well.

[00:03:56] And there's something that's even nice as well, right? So, let's say I'm really interested in this Stranger Things title right here. If I right-click on that and say inspect element, it's still gonna bring me here, right? But if I click React immediately after that, it's gonna also deep link me into there and the React dev tools as well.

[00:04:16] So you can also do the right click inspect element workflow to get what your looking for.
>> Brian Holt: Cool something else that I wanted to show you. So let's say I'm really interested in this house of cards component right here but I want to be able to interact with it directly.

[00:04:35] I can click on it so now it's highlighted in my React dev tools. I can go into the console and I can say $r and that's going to refer to the component that I have highlighted, right? So this is a stateless component and I can open it and say props and things like that.

[00:04:58]
>> Brian Holt: So let's do it with search because that's a little bit more interesting as well. So if I go back to React and I click here on Search, so now I have $r again. That's gonna be set to Search. So I can say $r.setstate
>> Brian Holt: And I wanna set it so search term is, let's say valley.

[00:05:28]
>> Brian Holt: And then it's gonna call set state for me on that component, and in this particular case that means it's gonna search for Silicone Valley. Just as like a side, if you go into the elements and I click on this, that's gonna be available as $0, that's always worked for Chrome dev tools.

[00:05:45] So there's kind of mimicking that behavior.
>> Brian Holt: So this is just a really really useful way of debugging React. Let's say I have a huge application and I need to find all the show cards. You can actually use the search up here to search for various components. That's also useful to have.

[00:06:13]
>> Brian Holt: That's new. I've never seen that before. So you can click this little target right there, and then you can kind of find the thing that you're looking for. So, I'm looking for this, right, and that's gonna take me to that. That's pretty cool. So definitely don't leave home without it.

[00:06:29] [LAUGH]