Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 833 of the free egghead.io lessons, plus get React content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



Debug React Components with Developer Tools in Chrome

4:14 React lesson by

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


egghead.io comment guidelines

Avatar
egghead.io

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

Avatar
Mithun

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.

Avatar
Joel

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

In reply to Mithun
Avatar
Victor

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

In reply to Joel
Avatar
Joel

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

In reply to Victor
Avatar
Michael

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

Avatar
Jordan McMillan

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

Avatar
lau

Which atom snippets you're using?

In reply to Joel
Avatar
Cristiam

where can i find the source?

Avatar
jphedley

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

Avatar

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.

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".

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.



HEY, QUICK QUESTION!
Joel's Head
Why are we asking?