What is React Developer Tools - A Quick Intro

What is React Developer Tools?

As soon as we start building complex applications in React, we'll soon want to have some kind of a tool to help us inspect certain aspects of those applications.

For instance, we might want to inspect the tree of React elements (not DOM elements) currently rendered on the document, or maybe inspect the props of certain React elements, or maybe even time-profile some interactions to determine potential performance bottlenecks and fix them.

Fortunately, React provides us with such a tool at our disposal — we just have to install it and set it up.

Enter React Developer Tools.

React Developer Tools window

React Developer Tools is similar in many respects to the native browser Developer Tools. Some of its features include:

An inspector to select given elements in the document and then see them in the React component tree in the tool.
An information panel where the props and state data of component instances are displayed. These can even be mutated using the panel.
A profiler to take note of the rendering times of components to determine any bottlenecks in terms of performance.

...and many others.

In short, React Developer Tools is more than just a useful tool for developing React applications. It's a must to learn for every single React developer.

The complete learning curve of the tool isn't really any steep. As a matter of fact, in the beginning stages, we don't even need to work with a lot of advanced functionality such as profiling; all we need are some very elementary essentials that could be learnt in no longer than 30 minutes.

Yes, that's right — 30 minutes!

With this intro out of the way, let's now see how to install and set up React Developer Tools.

Setting up React Developer Tools

React Developer Tools is a plugin that could be installed on most of the popular browsers — Chrome, Firefox, and Edge — using their native plugin stores.

It could even be set up on other browsers using the react-devtools package from npm (but we won't be going over this, since we'll be using Chrome and that has the plugin available in its plugin store).

The browser we'll be using to demonstrate the setup is Chrome. Similar steps could be followed for Firefox and Edge.

Following are the links to the library stores of different browsers providing a React Developer Tools plugin:

Installing React Developer Tools

Since we're concerned with Chrome, we need to open up the first link. This takes us to the following page:

React Developer Tools plugin page on Chrome Web Store

Click on Add to Chrome.

This leads to a confirmation prompt from Chrome regarding installing the extension. Agree to the message in order to initiate the download and installation of the extension.
Understanding the extension icon

Once installed, a small React icon will show up next to the browser's address bar indicating the availability of React Developer Tools.

Now the moment we visit a website that is powered using React, this icon will lit up to indicate that right away.

If the icon doesn't show, click on the puzzle icon next to the address bar, representing extensions, and then pin the React Developer Tools extension.

There are two variations in this case when it is lit up:
- A red icon indicates that the React build is a development build, not optimized for production. This is exactly what we want if we're developing a React application.
- A blue icon indicates that the React build is a production build, optimized for production. While developing applications, this isn't really what we want; it's only required when an application is done with its development phase and is now ready to be sent to production.
Opening up React Developer Tools

In order to open up React Developer Tools, open the browser's own Developer tools and then in the top tablist, look for the tabs Components and Profiler. Both of these are part of React Developer Tools.

Chrome Developer Tools - Components and Profiler tabs

And that's it! We're done installing React Developer Tools.

Now, it's time to understand the general interface of this amazing tool, or should we say set of tools.

Exploring the interface

React Developer Tools has two windows to work with:

Components — used to inspect details regarding different components in our application.
Profiler — used to profile interactions with a React application and determine render performance.

For now, we'll just focus on the Components window.

Here's a figure representing it, with different sections labeled:

Helper utilities — including such things as the inspector, the search bar, and the settings button.
Component tree — showcasing the tree of components/elements of the application.
Component/element information — showcasing some useful information regarding an element selected in the Component tree

In the next section, we shall get some useful things done in this Components window.

Using the Components window

Although there are quite a lot of details to comprehend in React Developer Tools, in the Components and Profiler windows, we don't really need every single thing as we're starting out.

In the following discussion, we go over the main features of the Components window that we'll be using frequently in our journey of learning React.

The code we use to demonstrate is the one we wrote in the previous React First Program chapter:

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';

const element = (
   <h1 contentEditable={true}>Hello World! (From JSX)</h1>
);

const root = ReactDOM.createRoot(document.querySelector('#root'));
root.render(element);

It consists of just one element written inside the #root HTML element, and that is an <h1> element.

Using this code as the basis, let's get some useful stuff done.

Inspecting elements in the document

One of the most naive features, and one which you might perhaps already know how to use, in React Developer Tools is the inspector, right at the top-right corner.

The inspector (marked above) in React Developer Tools

When selected, it allows us to go to the webpage and select any element to inspect its corresponding React element in React Developer Tools (just like the browser's developer tool's inspector allows us to do the same thing albeit for inspecting DOM elements).

Go on, select the inspector and click on the heading in the document. This will highlight the <h1> element in the component tree in the Components window.

Pretty simple.

Searching for elements

For now, since our React application is a bare bones application, there isn't much to see in the component tree. However, as applications grow in size, this would cease to be the case. There would be so many elements displayed that it'd be quite cumbersome to find the elements that we need to.

In this case, the search bar at the top, right next to the inspector icon, is our friend.

Search bar in React Developer Tools

We could type anything in it (even a regular expression), and it would mark only those elements in the component tree whose names match the given search term.

Go on and type 'h2' in the search bar and notice that it lends no matches. Rightly so, since there isn't any <h2> element in the component tree for our program. Now, change the search term to 'h1' and notice the <h1> element marked.

If you know regular expressions, you could even try typing in /.h\d/. This expression would match all heading elements, not just <h1>.

Viewing element information

Besides inspecting and searching for elements, once we select an element, we can also view its information in the right-hand side section.

Element information section in React Developer Tools

This information includes props and state data of the element, and some rendering info as well (such as which element/function rendered it).

Try it out

Go on and select the <h1> element in the component tree and then view its information in the info panel.

Under the props section, it shows two entries: children and contentEditable.

In the code shown above, we explicitly provided contentEditable to the second props argument when defining the <h1> element so that makes perfect sense here.

What might not make sense under this section at this point is children. children is also a prop in React. We should understand this in more detail in a later part of this course. For now, it's sufficient to know that children is a prop and in that respect should rightly show up in the props section while inspecting an element.

Mutating element information

The cool thing about React Developer Tools is that we can control a lot of things right from within it.

For instance, the element information section that we discussed above is interactive — we can go on and change the existing props of elements and get the elements to be re-rendered with the new props. We can even add in new props.

Let's do this now.

Try it out

Go on and click on the children prop's value that reads "Hello World!".

Change it to "React is amazing" and press Enter. As you do so, your <h1> element would show the new text.

We can even add in new props but because we haven't yet explored props in detail, we would be deferring this for now.

Filtering out elements

The fifth and last feature to see for now is filtering out elements in the component tree based on one or more given conditions.

Filters section in React Developer Tools' settings

Often times, it's really handy to be able to control what's shown to us in the component tree in a scenario where it's flooding with hundreds or thousands of elements.

In this case, one of the most ubiquitous filters would be the 'DOM element' filter. When selected, it throws away all DOM elements from view in the component tree and only shows non-DOM elements, i.e. user-defined React components.

Here's how to put this filter into action.

Try it out

Click on the settings icon right next to the search bar in the Components window and then navigate to the Components tab (inside the settings dialog that shows up).

Under the section that reads 'Hide components where…', switch on the filter for type equals dom nodes. This effectively filters out all DOM nodes from the components tree. Great!

We can even hide certain elements based on their names (and use regular expressions here as well). To do so, set the first dropdown to name and then enter the name of the element(s) you wish to filter out in the adjacent input field.

Moving on

The exploration of React Developer Tools could go on and on and on but because this is the beginner stage, it's important for us to keep things simple and short.

React Developer Tools is hands-down a must to use while developing React applications. As we dive into more complexity, we'll be using more of React Developer Tools to our advantage.

In the next chapter, React Basics, we shall start off with learning the very basics of React applications, including such fundamental things as components, props, events, state, and much more.

Let's get going!

React Developer Tools