How to use React Developer Tools

React Developer Tools, simplifies the process of debugging and optimizing React code. As a popular JavaScript library for building user interfaces, React has gained immense popularity among developers worldwide. However, debugging and optimizing React code be a challenge.

With React devtools extension, developers can easily inspect and manipulate the state and props of components, analyze component hierarchies, and track component updates in real-time. In this blog, we will go through the features of React devtools extension, steps to set it up, and share how can you use it with examples.

Let’s get started.

Table of contents

• What is React Developer Tools extension?
• Why use React Developer Tools extension?
• Features of React DevTools extension
• How to install React Developer Tools in Chrome
• React Developer Tools - Profiler and Component
• How to use React devtools extension with examples
  - Inspecting with React Developer Tools
  - Debugging performance with React DevTools extension
  - Debugging components with Developer Tools
• Other devtools for React
• Conclusion

What is React Developers Tools extension?

React devtools is a browser extension meant to assist developers in debugging and optimizing React applications. It shows developers a visual depiction of the component hierarchy, properties, and state of each component in the application.

With this extension, developers can inspect and manipulate the components and their state in real-time. They can also identify performance issues in the application with its built-in profiler.

Why use React Developers Tools extension?

Due to its ability to enhance the development process, React Developer Tools seamlessly integrates with React ecosystem providing developers invaluable benefits.

• Debugging - React DevTools extension offers a comprehensive and intuitive debugging experience. It allows developers to inspect the component hierarchy, view and modify component props and state, and track component updates in real-time. This level of visibility into the inner workings of React components significantly helps in identifying and resolving bugs and issues more effectively.
• Performance optimization tools - Developers can analyze the rendering performance of their components, identify performance bottlenecks such as inefficient rendering, excessive re-renders, or unnecessary component updates, and optimize the app’s performance. With  features like flame graphs and profiling, React Developer Tools empowers developers to fine-tune their applications, pinpoint areas that require optimization, and deliver faster and smoother user experiences.
• Component testing - You can inspect the state and props of individual components using React Developer Tools. This makes it easier to verify that the component is receiving the correct data and rendering appropriately. Developers can also modify the component's props in real-time to simulate different scenarios and test edge cases. By offering this level of visibility and control, React DevTools greatly facilitates the testing process, ensuring that components function as intended.
• Product adoption - React Developer Tools assists in understanding how components are used and interact within the application. By inspecting the component hierarchy and analyzing the state and props, developers can gain a comprehensive understanding of the application's structure and behavior. This knowledge is valuable when onboarding new team members or collaborating with designers and stakeholders, as it allows for clear communication and alignment.
• Cross-browser compatibility - It extends support to all popular browsers such as Google Chrome, Microsoft Edge, Mozilla Firefox, and Safari. This ensures that you can use this extension in your favourite browser, without encountering any compatibility issues.

Features of React DevTools extension

Now that you have understood the benefits of using React Developer Tools, it’s a good time we explore some features.

1. Component tree: It is a hierarchical representation of the React component structure in a tree-like format. The tree view displays the parent-child relationships between components, allowing developers to navigate and inspect the component hierarchy. You can expand and collapse individual components to see their child components and view their props and state.
2. Inspect element properties: You can view and edit the props and state of each component directly in React DevTools, without any modification in the source code or running application.  With the help of this property, you can troubleshoot code and check for different scenarios.
3. Time-travel debugging: It allows you to step through the state and props of your components at different points in time to check for debugging issues that occur at the time of animations or transitions.
4. Highlights updates: When you make changes to your React application, React Developer Tools can highlight which components have been updated.
5. Profiling: You can measure and understand how components render and update over time, providing valuable insights into the application's performance characteristics.

How to install React Developer Tools in Chrome

Here’s how you can install and use React Developer Tools extension to your Chrome browser:

• First step is to navigate to Chrome Web Store on Google Chrome. Then, go to the React Developer Tools extension, click "Add to Chrome" option. A pop-up window will appear requesting you to add the extension to Chrome. Now, click on the "Add Extension" button.

• To test the extension, open a page containing a React application and click the "RD" icon in the top right corner of your Chrome window. The developer panel providing information about the React components on the page will display on the right side of the screen. In the performance tab of React Developer Tools, you can view the information about components rendered and analyze it using the profiler.

That's it! React Developer Tools is now installed and ready to use in Chrome. Use the method to use this extension in other browsers as well.

React Developer Tools - Profiler and Component

In React Developer Tools, the profiler and component serve different purposes when it comes to analyzing and understanding your React application. Let’s cover them one by one:

Component

The Components feature offers a graphical view of your application's component hierarchy. It enables you to examine and troubleshoot individual components' state, props, and hooks.

By navigating to the Components tab, you gain access to a tree view presenting all rendered components in your application. When you select a particular component, you can explore its existing props, state, and context values, facilitating the process of debugging and comprehending the flow of data within your components.

For example, here is an image which showcases the component tree of a React app. You can explore the nested components and check if any error is popping off.

Furthermore, the Components tab provides visualization and inspection capabilities for a component's lifecycle, hooks, and the associated virtual DOM structure. This comprehensive view assists in understanding the inner workings and relationships of your components.

Profiler

This extension helps is measuring and analyzing the performance of your React components. You can identify all the rendering bottlenecks and optimize it for better performance.

When using the Profiler, you can wrap specific parts of your component tree with the <Profiler> component from React. It allows you to measure the rendering time and interactions within that portion of the tree. Check out this image for a visual representation of how the Profiler works and provides performance insights.

With the Profiler, you can gain insights into how components are rendering, identify components that are causing performance issues, and optimize your application's rendering performance accordingly.

Here's a table summarizing the capabilities of React devtools Profiler and Components, along with their common use cases:

To summarize - once you have used the Components feature in devtools to inspect components in your React app and identify their properties, state, data flow, and interactions, you can move to the Profiler feature. With Profiler you can measure and analyze the rendering performance of these components.

How to use React devtools extension with examples

In this section, let’s cover how to use React Developer Tools to inspect your React app and debug components and performance. We will use relevant examples that you can follow for your app as well.

Inspecting with React Developer Tools

We will share how you can inspect and debug performance with profiler. We will refer to this e-commerce website - https://buy-2-wear.netlify.app/ to share the steps.

To get started, you can press “Ctrl + shift + I” to go to the inspect window. From there you can monitor React Developer Tools easily.

For inspecting with React DevTools, you can then navigate to the panel shown below to see the component tree and view the props and state of the selected element.

When you open the “Component” tab it will show you a hierarchy tree for your React components. It also allows you to inspect the rendered DOM elements while hovering over the components.

Now, if we move further in the hierarchical tree view of our App component, you will find the child component called Routes. You can expand the Routes component to see the other component nested inside it. By clicking on the Route.Provider component, you can see its props and state in the panel to the right.

Debugging performance with React DevTools extension

Performance debugging is an iterative process, and it's crucial to profile and test your application after each change to ensure you're moving in the right direction.

With the help of "Profiler" tab in this extension, you can measure and analyze the performance of your components. Start profiling by clicking on the "Record" button and interact with your application to capture performance data.

Now, analyze the recorded data, including component render times and call stack, to identify performance bottlenecks. Here’s a profiler tab to locate the renders, re-renders and updates over time.

In the above image, you can clearly examine the structure of the component tree and see how they are nested and composed with each other. For example, App → LocationProvider → NavigationProvider → Router and so on. It shows the render duration and commit timings in the commit information tab on the right side of the screen. The priorities of the components are also listed there.

Additionally, you get a Flamegraph for a visual representation of the call stack and timing information for different components. Using “Profiler” is a good option to identify areas where unnecessary re-renders are occurring or rendering can be optimized.

Debugging components with Developer Tools

Now, it’s time to understand how debugging is done with React devtools. Let’s take an example of a simple React component which is not rendering properly. In this component the counter variable is incrementing by 1, every time when the setCounter function is called.

    

            Copy
    
// import hooks from React
import React, { useState } from 'react';
// Here, we will create a function named Count
function Count() {
  const [counter, setCounter] = useState(0);
// Now, setCounter to increment by 1
  function click() {
    setCounter(counter + 1);
  }
// Rendering the output on the screen
  return (
    <div>
      <h2>Count: {counter}</h2>
      <button onClick={click}>Increment</button>
    </div>
  );
}

export default Count;

Here, the Count component is used for rendering a button and counting value which gets incremented when the button is clicked. However, when you run the application you will notice that the count value isn't updating properly after you click the button.

Now, open React devtools in your browser and select the “React” tab to debug this issue. From there, you can find the Count component in the component tree and inspect its props and state. If the state of the Count component isn't updating correctly when the button is clicked then you can modify the state of the component

For example, you could include a breakpoint in the click method and halt code execution when the breakpoint is reached. From there, you can use the console to log additional information, or modify the state of the component to see if that resolves the issue.

    

            Copy
    
function click() {
  debugger;
  setCounter(counter + 1);
}

We've included a debugger statement in this example to pause code execution and observe the state of the component when the click function is called.

There are multiple ways to debug issues with React Developer Tools. Here are some:

• Use the “Hooks” tab to inspect and debug the state and effect hooks used by a component.
• Modify the props or state values to test different scenarios and observe the component’s behavior in real-time.
• Identify any incorrect or unexpected values in the component’s props or state.

Other devtools for React

Although React Developer Tools is the most common tool for debugging and profiling React apps, there are other devtools as well that support in React development. These devtools offer additional functionalities for debugging and optimizing your React apps. Here, are some tools worth knowing:

1. Storybook - This open-source tool primarily focuses to document your components and create visual library of your app’s UI elements. Some popular add-ons are docs, actions, knobs, and viewport. Give this devtool a try and see the ease in building and testing component yourself.
2. Bit - If you want to build, share and reuse React components and other Javascript modules, then Bit is the right option for you to explore. It helps you in keeping track of changes to your components over time.
3. React Styleguidist - You can use this devtool to create and manage well-documented libraries. It allows us to automatically update style guidelines when the component changes.

There are more such React tools for developers out there, that you can explore to simplify React development, testing, and debugging.

Conclusion

React developer tools compatibility with your favorite browsers and straight forward interface, no doubt makes it so popular. And I believe, by now you must have gained a comprehensive understanding about this extension, and how you can use it for debugging and profiling your React applications. So do give it a shot.

In this blog we have also mentioned some other tools that use for your React app, but this list is long and it won’t hurt to know about them. So before you get busy with coding, check out our blog on popular React devtools.

Happy Coding!