Debug React Components with Developer Tools in Chrome

Man 1: [00:00] Hey guys, in this video we are going to talk about React Developer Tools, which is a Chrome add-on that you can get from the Chrome Web Store. Now, to show how this works what I've done is I've built up a quick application which is essentially an entire site inside of a single component. What I've done is I've broken it down into a whole bunch of components, and then I just render this single component called "site".

[00:22] I've arbitrarily made this more complex than it needs to be. There's no bad practice here. I just wanted to set this up so we could look at React Dev Tools. Anyways, take a look at the site component really quick. It's our only component that has state. I'll walk you through some of this really quick, you can go through the code on your own.

[00:42] In our state we've got a page element. It's just an index for the pages element. Each of those has a title and then an array of features. We've got a page update which basically just says which page we're looking at. Feature update, which we'll take a look at in a minute. When we render that out container, nested inside of that we've got this nav component, a lead component, a row component, which in turn returns a feature component for each of the features related to our page. We've got a footer, and then we close our container.

[01:15] We'll take a quick look at feature. This ends up returning a feature button. When we get to the feature button, it's actually got in on click.

[01:28] Here is our application, and this is all it really does. I can nav around, I can see these pages, and each one's got these view details buttons. These are those feature buttons I was showing you. If I click on one there, a middle one here, and the last one there, as I nav back through it remembers that state.

[01:46] To look at React Dev Tools what I can do is I'm going to right-click on my home nav pill, I'm going to say "Inspect Element", which is going to bring up Chrome Dev Tools. You can see we're looking at the home link right there.

[01:57] If you look at all this HTML, this is what our virtual dom is outputting, or what React is outputting from the virtual dom. It's not super helpful to us. We could definitely work with this and we can see all the style and everything, but what we want to do is jump over here to the React tab. This is the React Dev Tools, and the first thing you'll see is that our components is site, container, nav, nav pill, and so on. Our breadcrumbs represent that as well.

[02:28] In addition to that, when we were on the...Let's jump back over to the Regular Dev Tools Elements tab. I'm going to jump to the About link. When I jump back over to React it drops us right onto that link. That's pretty handy.

[02:44] You can also see that we are actually getting all of our props in line here. Rather than just class and things of that nature, we're getting our class name, we're getting the properties that we passed into our components. If I jump to the nav pill here, you can see its props, its A page and active and key. That's pretty cool.

[03:06] If I jump over here to the site element, which again is our only component that has state, I can see its state right here and I can also edit that. If I want to make it page element number one, you can see it jumped over to about. I don't know if you saw it or not, but on the nav, Page became About.

[03:26] Now I'm going to change this to two, and again you can see the updates happening in our React HTML here, essentially in our virtual dom. In addition to that, let's see here. We've got our site, we've got what's got an event listener. Our feature button, which is right in here, when we get to that we can our event listeners. For each of our components from the React Dev Tools panel, we can find its props, which we can change, we can find its state, which we can change, and we can find its even listeners.

[04:07] There you go. That's a quick look at React Dev Tools. It's certainly a great tool to have in place when you're developing React.