Using React Developer Tools to debug React applications

14 April, 2023

Contributors

Kaushal Joshi

@clumsycoder

React is a single-page application or SPA library to build modern web apps. However, scaling our app and creating complex interfaces could introduce bugs in our codebase.

Debugging is the process of identifying and eliminating bugs in the codebase. Excellent debugging skills separate skilled developers from junior developers. For React, a web extension exists to help us debug the code.

In this tutorial, we will explore how to debug React applications with React Dev Tools.

Prerequisites

This blog presumes you have a working knowledge of the following:

JavaScript ES6+ Syntax
React v16.8 or above

Also, I am assuming you have these two installed on your local machine:

Node.js
NPM or Yarn
Web browser (Preferably Chrome, Edge, or Firefox)

What are React Developer Tools

React Developer Tools is a tool the React team provides to improve the debugging experience with React apps.

React Developer tool inspects React components, edits props or states, and identifies performance problems from the browser. It eliminates the need to make changes to the code to debug it constantly.

How to install React Developer Tools?

React Developer Tools has two variants: a browser extension and an Electron-based desktop app.

We will use the browser extension in this tutorial. It extends the browser's native Developer Tools environment with React-focused tabs.

If you are using any other browser, follow these steps:

Install `react-devtools`

You need to install react-devtools on your machine.

# YARN
yarn global add react-devtools

# NPM
npm i -g react-devtools

You can do it by executing the following command:

react-devtools

Now, add the following <script> tag to the <head> tag of your index.html:

<html>
	<head>
		<script src="http://localhost:8097"></script>
		...
	</head>
	...
</html>

React Developer Tools not showing

The extension adds two tabs to your browser's Developer Tools, viz. Components and Profiler.

However, in some cases, you might find it difficult to find these tabs. Here's what you can try in such situations:

Reinstall React Developer Tools in the browser.
Reopen the browser. Open an app built with React or start your development build. Now go to the browser's DevTools and search for the Components and Profiler tabs.
Sync DevTools settings with Chrome Sync.
Enable Reporting API panel in the Application pane.

Also, don't forget to check if you are able to see all tabs. Because if you have installed too many extensions, or the DevTools size is too small, then tabs get cramped up in the dropdown, and you need to click the arrow button to open it.

Getting Familiarized with React Developer Tools

The first tab, Components, describes the component architecture. It visually displays all components in a hierarchical form. You can click to expand individual members. Here you will see component-specific data like props, hooks, states, etc.

Profiler, on the other hand, helps you with application performance. It adds performance overhead to the app. It 'records' the changes in your app and visually displays how performance heavy each component is. Also, this tab is absent in the production build and only visible in development builds.

Exploring the "Components" tab

The component tab allows you to inspect your code by providing various functionalities. First, it displays a hierarchical view of all of the components. Each component can be clicked to further inspection and debugging.

When you click an individual component, it shows data specific to that component. This includes:

Props
Hooks
Components that render it

You can modify the values of props and hooks right from here instead of changing your app.

When your app scales, you introduce many components, eventually increasing the size of the hierarchical tree. In such cases, you can search for a particular component or use a pointer highlighting the component when you select it on the browser screen.

Exploring the "Profiler" tab

Profiler is advanced and needs more time to learn than the Components. It tests the project's components and provides performance analytics.

You can check your app's performance by clicking the record button on the upper left section of the tab. Now, interact with your app like the user would. Stop the recording once you are done. You will see two charts in Profiler:

Commit Chart (aka Ranked chart)
Flame Chart

In the commit chart, the color and height of each bar indicate the time required for each component to render. Tall yellow bars mean more time, whereas short and blue bars mean less time.

In contrast, the flame chart displays the time a component and its children took to render within a selected commit. Here too, yellow denotes more time, and blue represents less time. Gray means that the component did not render at all.

Closing Notes

While working with React codebase, having React Developer Tools is a must-have tool. It helps debug your code and identify code, logic, or performance issues with your application.

react

frontend

devops

developer