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

Debugging React applications with only the browser developer tools can be difficult since React components are transpiled into valid HTML/JavaScript. Brian introduces the React Dev Tools extension available in Google Chrome and other browser. He demonstrates how to use this extension to inspect the application’s composition, current state, and other properties.

Get Unlimited Access Now

Transcript from the "React Tools" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Brian: Let's go do some debugging techniques. We're gonna talk about react tools right now. So, so far I've been making you use console.log for everything and or alerts or dumping your state out to the dom. We're actually use a Chrome extension now to be able to inspect what's happening inside a react.

[00:00:24] And they're called react dev tools. They're officially supported and created by the react team. So come over to your browser and search for like react dev tools. They exist both for Firefox and for Chrome I'm gonna use the Chrome one because that's the one I know how to use.

[00:00:44] I believe they are also making them for Safari it might even already exist on Safari I'm not sure.
>> Brian: And if you're using Microsoft Edge I believe what you can do is you actually go grab the Chrome DevTools and point your chrome DevTools at Microsoft edge and that'll actually work.

[00:01:00] I'm not gonna show you how cuz I saw someone do it once and I haven't done it myself so. Okay, so go ahead and download this extension.
>> Brian: And then what you're gonna need to do unless you're running your own dev server, I'm not. I'm just running it from my file protocol.

[00:01:18] If you're running it from your own like H.T.T.P. server or simple H.T.T.P. server or whatever then you're golden. You need to do anything. If you're like me, and you're running it from file, go to Chrome and by the way I don't know how to do this in Firefox.

[00:01:31] So if you’re on Firefox you’re on your own. chrome://extensions and then go down here and find react tools, wherever that is. Jeez I have a lot of extensions. Go down here and say allow access to file URLs, and you have to do that or else it's not going to work locally.

[00:01:54] So chrome://extensions and allow access to file URLs right there.
>> Brian: Okay. Once you have that then you can come back over here to your svideo and what we're gonna do is we're gonna open our dev tools. For those of you who don't know how to do that. I think you can do it with.

[00:02:19]
>> Speaker 2: F12.
>> Brian: Yeah, F12 on Mac or sorry on Windows it's alt command J to open them on Mac. Okay. And now you should have this react tab, now, if you're not seeing it. First of all, make sure that file is checked, the one that we saw over here.

[00:02:45] Also, try restarting your browser that might also help. I will say it's a bit finicky sometimes to be able to see this because if it doesn't detect react on the page it doesn't display the tab.
>> Brian: Okay is anyone not seeing it that's expecting to see it? Speak now or forever hold your peace.

[00:03:11] Okay, so now we kind of have sorry this is kind of probably a little bit harder to see
>> Brian: The.
>> Brian: Okay so we see we have App right that's the name of our route component. And if you go in here you see a router and then disclaimer here router is adding stuff in the middle, that you don't necessarily have to worry about.

[00:03:41] So we see the layout right, that's the one that we created that's the layout for the whole page. Now we can go into search, right? That's the name of our search route. And then let's look here, so let's search right? We have properties that are all getting past in.

[00:03:58] We can check out what those properties are, in this case it's empty. If you look down at State, we can see search terms is blank, but if I start typing in here. It's gonna start updating which is pretty cool and actually you know, I wanna update it down here, I can say no you know what make this dare right and then it'll actually update the state directly into react for you.

[00:04:21] That's only possible state, right? That makes sense, because a component can only modify its own state, it cannot modify its properties.
>> Brian: You can see what routes are being passed in, you can look at the route props like that. All that's available to you. Or like say if I clicked into daredevil or not clicks but details/ do I have one here?

[00:04:49] Here we go.
>> Brian: There we go look at that one. So now I'm in my details route. I can see what's going on here. I can see the route prints are for that. I can look at what's in my header right now doesn't have any props which is what we would expect.

[00:05:11] So let's talk about some other neat features we can do here. So first of all hopefully that's helpful for you just to be able to look at the state and the properties right, that's pretty A plus cool right. But we can also do some really fun stuff and I say I wanna figure out what component this is or maybe my back buttons broken right.

[00:05:28] So I'm going to say right click on this and say inspect right we're used to doing that. That's going to take you over to your elements like this is just the normal browser right. But while this is selected in my elements browser. I can actually go over to react and it's going to be smart enough to find what that actually is whatever I have selected over there is actually going to be selected over my react tools, right.

[00:05:55] So now this is highlighted. But, right, I can actually see that it's selected that over there. So just, let's say we want to look at the poster, maybe the poster's not right. So you say Inspect. All right, so it selected that in my element browser. And now I'm going to go over to the react tools.

[00:06:15] And notice that now that is selected in my react tools as well. So that's a really easy thing to do. Let's say I need to interact pro-grammatically. Maybe there's a method on it I wanna call. I'm going to go in and select header which is my entire header here in my react tools and I'm going to go to my console I'm going to say dollar $ R and that's actually, now I can pro-grammatically interact with it, right.

[00:06:46] So I can say $ R.props and right now I just get back the empty object, right, but I could be able to now pro-grammatically interact with this in an interesting way. So a dollar sign R is whatever you have selected in the react tools. I think that's also fairly cool in my opinion.

[00:07:11]
>> Brian: As an aside if you're not aware of this, this is just a chrome dev tools thing in general. You can actually say, I want to select video info. So I just do that in my elements browser. I can go back to console and say dollar sign zero, and that's actually going to be the same way to interact with that programmatically using the Chrome dev tools.

[00:07:31] FYI.
>> Brian: [COUGH] I'll leave you to do the rest of that yourself. I mean that's more or less gist of the react tools but any questions about that the just incredibly useful for debugging.