⚠️ This lesson is retired and might contain outdated information.

Debug React Components with Developer Tools in Chrome

Joe Maddalone
InstructorJoe Maddalone
Share this video with your friends

Social Share Links

Send Tweet
Published 10 years ago
Updated 2 years ago

React Development Tools is a Chrome plugin that provides handy ways to inspect and debug your React components.

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.

Mithun
Mithun
~ 8 years ago

In the Code tab, it says that click here for the full source of the lesson - I assumed it meant the source files. However, clicking on it makes me download the lesson video instead of the lesson code.

Joel Hooks
Joel Hooks
~ 8 years ago

Sorry, it was mistaken. The code tab has been removed.

Victor
Victor
~ 8 years ago

So is the code available somewhere, or is it going to be? Would be nice to run this.

Joel Hooks
Joel Hooks
~ 8 years ago

No, the code for this is not available. Use it with any React code to see the magic of the Reqct Developer tools! ✨

Michael Wight
Michael Wight
~ 8 years ago

Hello I need the template that is shown in this video @1:30 second....

Rasmus Sjørslev
Rasmus Sjørslev
~ 8 years ago

http://getbootstrap.com/examples/jumbotron-narrow/

Jordan McMillan
Jordan McMillan
~ 8 years ago

I very much enjoyed these quick and to the point lessons. Thanks!

lau zio
lau zio
~ 8 years ago

Which atom snippets you're using?

Cristiam
Cristiam
~ 8 years ago

where can i find the source?

jphedley
jphedley
~ 7 years ago

This Site App might make a great Final Take-Home Project, for this set of excellent lessons.

Tony Brown
Tony Brown
~ 7 years ago

Overall a great overview of React, I skipped the last lesson when I saw what version was being used. Would have been a nice capstone project to have built out the site but the lesson was on React dev tools. Other than that, I learned a great deal.

Laurie
Laurie
~ 7 years ago

Fantastic course - loved every second of it - learned a tonne. Time to build!

Balakrishna
Balakrishna
~ 6 years ago

Good tutorial and help a lot in understanding React

cubeua cubeua
cubeua cubeua
~ 6 years ago

Thank You. Cool Tutorial. I was understand more features.

Héctor BlisS
Héctor BlisS
~ 6 years ago

thanks for this =D

Markdown supported.
Become a member to join the discussionEnroll Today