React Developer Tools: Installation and Essential Features

React Developer Tools is a browser extension that adds Components and Profiler panels to your browser's dev tools. You use it to inspect a running React app, read and edit props and state, and spot components that render too often.

The tool works on any website built with React, and it is most useful when you inspect a project you wrote yourself. The extension reads the in-memory component tree, not the HTML, so it shows your actual React structure.

Install the browser extension

Install the extension from your browser's official store. It is available for Chrome, Firefox, and Edge.

After installation, open a page built with React and open your browser's dev tools. Two new panels appear: Components and Profiler. If they are missing, restart the browser.

To inspect your own code, first create a React app with Vite and start its dev server.

Use the Components panel

Select a component on the page with the selection arrow, or click its name in the tree. The right side shows the props and state for that component.

The tree mirrors your component structure. The state you created in your first React component appears here, and you can watch it change as you interact with the page.

Edit props and state live

Click a value in the props or state panel to edit it. React re-renders immediately, so you can test states without writing code.

For example, change a counter's state value and the page updates at once. This is a fast way to test an edge case, a loading state, or a value that is hard to reach by clicking through the app.

Use the Profiler panel

Switch to the Profiler tab and press the record button. Interact with the page, then stop recording to see a timeline of renders.

Each bar shows how long a component took to render. The Profiler is the starting point when a page feels slow, because it shows which components re-render and how often.

Install the standalone app for Safari

Safari does not use the browser extension. Install the standalone version and start it from the terminal:

bash

npm install -g react-devtools
react-devtools

The tool opens a window and waits for a page to connect. Add this script tag to the head of your page so the standalone app can attach to it:

html

<script src="http://localhost:8097"></script>

Reload the page and it appears in the standalone window.

What to learn next

With DevTools open, inspect a real project and watch state update as you click. The guide on common React setup errors helps when the panels do not appear or the project fails to start.