How to Use React Developer Tools

One tool that comes in handy when developing React applications is React Dev Tools. But as I learned during my career as a React developer. Not a lot of people know how to use it.

How to use React developer tools?

To start using React developer tools. Right-click anywhere in the browser window and click on Inspect. After that, you can inspect React component hierarchies by using React developer tools.

How to Install React Dev Tools

To start using React developer tools. We need to install it as a browser extension. Click one of the links below to install it. Currently, the extension is supported by these browsers:

• Chrome
• Firefox
• Edge

Once you have developer tools installed. It's time to start using them.

Opening React Dev Tools

To open the extension. Right-click anywhere in the browser window and click on Inspect. Additionally, you can open it by pressing F12. This will open browser developer tools with all the usual tabs like Elements, Console, etc.

Because we installed React dev tools extension. We get access to 2 new tabs:

• Components - Used for inspecting the component tree
• Profiler - Used for performance monitoring

Inspecting Component Tree

The main purpose of Components tab is to show us the structure of the React application. The structure shows how are all the components nested. In addition, we also get other useful information about the components. E.g. props, state, context, functions, etc...

Locating Component

The are multiple ways to locate the component inside React dev tools. The most simple one is to use the arrow in the top-left corner. Then simply point and click on the component we want to inspect.

If we know the name of the component we want to locate. We can use a built-in search bar that will find and highlight components for us. This is especially useful if we have a component tree that is deeply nested.

The one useful thing to remember is this. Components and Elements tab interact with each other. If we select any component in Components . It will also get selected in Elements. It also works another way around. In the example below, selecting button will automatically select Button in Components tab.

Debugging Component

Most of the time, we want to see what's happening inside our components. Using React developer tools, we can see a lot of useful information about the component. We can also see, how is the information changing as we interact with the application.

In the example below, we can see state changing as we're adding or removing new items. This also works another way around. This means we can manipulate state within developer tools, without any interaction with the UI. In the example below, we're removing items. By modifying the component state directly in the dev tools.

Components tab is also connected to Console. Once we have a component selected, we can switch over to Console and type $r. It will give us all the information we see in the Components tab.

This way, we can interact with the component using our beloved console. In addition, we can also call functions that the component has access to. I believe every front-end developer will find this handy.

Now that we know how to inspect our components. We can quickly find out if there are any issues within them. And if there are, it's time to find out why.

Inspecting Source Code

React developer tools make it easy to inspect source code directly in the browser window. Preventing us from constantly switching between code editor and browser. All we need to do is select the component. And click on the <>. This will open up the corresponding file, where we can see what's wrong with the code.

We get this feature by default if we're using create-react-app or Next.js. But if you can't see the original code of your component, you'll need to add babel-plugin-transform-react-jsx-source to your Webpack configuration.

Monitoring Performance with Profiler

Profiler shows us how long it takes to render each component of our app. We can identify what component is slowing down our application. And of course, improve its performance!

In this example, we can see that rendering material-ui Button is taking most of our rendering time. Not that it's slow. But if we want to make our app even faster. We can replace it with custom Button component.

It also shows if the component was rerendered and what triggered the rendering. It's worth checking out if there aren't any unnecessary re-renders happening in our app. And if they are, we most likely can optimize them. Making our React website much faster.

Conclusion

React developer tools come with a lot of handy features that can make our developer experience better. In this article, we showed how to install them. Showcased in what situations and how can we use them.

We also provided useful tips and tricks. Which can make using React developer tools much easier.