Debugging components with the React Developer Tools extension

Trevor Miller
InstructorTrevor Miller

Share this video with your friends

Send Tweet
Published 7 years ago
Updated 3 years ago

The React Developer Tools are an extension that can be added to Chrome and Firefox to help with debugging React applications. In this lesson, we walk through how to use these developer tools to view, edit, and debug your React components, including: the React browser tab, inspecting components in parallel with the Elements tab, using React components in the console, searching by component name, and debugging component state and props.

[00:00] The React Developer Tools are an extension that you can download for Chrome or Firefox. In this lesson, I'll be using Chrome. If you go into the Chrome extension store, you can install the React Developer Tools.

[00:14] Here we have a simple application that's a list of products, and each of the products has a accordion component that lists information about the product. We'll be using this to go through the React Developer Tools.

[00:28] I have my developer tools open here, and by default, it's on the elements pane. If I go over to the side, now that I've installed the React Developer Tools, we'll see this React tab. This is where we'll be spending most of our time, so we can see the hierarchy of our application.

[00:44] There's a products element, and then inside of that there is some container elements. Then we have snippets, and inside of snippets, we have accordions. Next, at the bottom of our pane we have a bread crumb view that's more condensed to show us the different layers inside of our elements.

[01:03] Next, there is a search box that allows you to search by component name. For example, if we wanted to get all the accordion components, we could say accordion, and we can see all three of the accordion components listed.

[01:18] Next, if we want to inspect an element, we can select the magnifying glass. If we highlight an area that we'd like to inspect, for example, the anchor tag that opens up the accordion, we can see that it highlights that element inside of our elements view. Then, if we go to the react tab, we can see that it highlights the related node in our react component.

[01:40] Once you have an element selected like this, you can use it in the console by going to the console, and then typing dollar sign R. That will allow you to select the element that you're using.

[01:52] This one's not very helpful because it's a piece of a component, so let's go back and let's select a component itself, the accordion component. If we do command R again, we'll be able to see that we can get access to the accordion's properties.

[02:09] Next, if we go back to our React pane, we can right-click on an element and we can see some options that we can use. We can view the source, and this will take us to the render method of that component. We can also scroll to that node if there's a lot of items in our view port, and there are a few other options here that you can check out.

[02:28] Finally, on this sidebar, we can see the props and state. As you've probably noticed as I've been clicking around, these items will stay up to date in real time with what you change.

[02:39] For example, we can see the color here. Let's say we wanted to make this a little bit lighter. We could do that, and we can do some of our debugging in here to directly access the props in our components.

[02:55] We can see these different values here in our props, and then our state, as we change the state of our component, we can see the state update. This pane is really useful because it allows us to inspect any elements in our application.

[03:09] For example, we can inspect the anchor tag that has the on-click handler that opens and closes the accordion description. We can see the handler here, and we can check out the other props that are being used, like these inline style props here, and we can do this with any component.

[03:30] We could go and take a look at our snippet components and select those, and we can see what properties they're using.

Clearcode Py04
Clearcode Py04
~ 5 years ago

Hi, I know that I may be a little too picky, but course dedicated for the chrome browser is listed under Firefox category: