How to Use React Developer Tools

React Developer Tools helps you inspect React components directly in the browser. This guide shows you how to open the tool, inspect props and state, and use the Profiler to debug slow renders.

What you’ll build or solve

You’ll use React Developer Tools to inspect a running React app. Done means you can find components, check their props and state, test changes, and record render performance.

When this approach works best

React Developer Tools works best when:

• You need to check which component rendered a piece of UI.
• You want to inspect props, state, hooks, or context values.
• You are debugging why a component updates.
• You want to find slow components with the Profiler.

This is a bad idea if you are debugging plain HTML, CSS, network requests, or non-React JavaScript errors. Use the browser’s Elements, Console, Sources, and Network tabs for those tasks.

Prerequisites

• A React app running in the browser
• A Chromium-based browser, Firefox, or another supported browser
• The React Developer Tools browser extension installed
• Basic knowledge of React components, props, and state

No changes to your React code are required for basic inspection.

Step-by-step instructions

Step 1: Open the React panels

Install the React Developer Tools browser extension, then open a page that uses React.

Open your browser’s developer tools:

Right-click the page > Inspect

Or use a keyboard shortcut:

Windows/Linux: Ctrl + Shift + I
macOS: Cmd + Option + I

After the extension detects React, you should see two extra tabs:

Components
Profiler

The Components tab shows the React component tree. The Profiler tab records rendering performance.

What to look for

• The page must use React.
• Refresh the page after installing the extension.
• Hidden tabs may be under the >> menu in DevTools.
• Development builds usually show more helpful component names.
• Production builds may show less detailed debugging information.

Step 2: Inspect the component tree

Open the Components tab to view the React component hierarchy.

Example component:

function UserCard({ name, role }) {
    return (
        <article>
            <h2>{name}</h2>
            <p>{role}</p>
        </article>
    );
}

In React Developer Tools, you can select UserCard and inspect the values passed into it.

You can also use the component picker. Click the picker icon in the Components tab, then click an element on the page. DevTools selects the matching React component.

This helps when you see something in the UI but do not know which component created it.

Step 3: Check props, state, and hooks

After selecting a component, look at the right side of the Components panel. You can inspect values such as props, state, hooks, and context.

Example with props:

function ProfileHeader({ username }) {
    return <h1>{username}</h1>;
}

If the page shows the wrong username, select ProfileHeader and check the username prop.

Example with state:

import { useState } from "react";

function Counter() {
    const [count, setCount] = useState(0);

    return (
        <button onClick={() => setCount(count + 1)}>
            Count: {count}
        </button>
    );
}

Select Counter to inspect the current hook value. When you click the button, the value updates in DevTools.

In many cases, you can edit props or state values from the panel to test how the UI responds. Treat those edits as temporary. They do not change your source code.

Step 4: Find why a component renders

React Developer Tools can help you check which values change between renders.

Use this when a component updates more often than expected.

Example:

function SearchResults({ query, results }) {
    return (
        <section>
            <h2>Results for {query}</h2>
            <p>{results.length} items found</p>
        </section>
    );
}

Select the component and watch the props while interacting with the page. If query or results changes often, the component may re-render for a valid reason.

If nothing meaningful changes, check the parent component. The re-render may come from state updates higher in the tree.

Step 5: Record performance with the Profiler

Open the Profiler tab when you need to debug render performance.

Start a recording, interact with the app, then stop recording.

Profiler > Record > use the app > Stop

The Profiler shows which components rendered and how long they took.

Use it to find components that:

• Render too often
• Take a long time to render
• Update after unrelated interactions
• Re-render because parent components changed

You can then inspect the slow component in the Components tab and check its props, state, and parent structure.

Examples you can copy

Example 1: Inspect a simple prop

function WelcomeMessage({ name }) {
    return <p>Welcome, {name}</p>;
}

export default function App() {
    return <WelcomeMessage name="Alex" />;
}

Open the Components tab, select WelcomeMessage, and check the name prop.

Example 2: Debug changing state

import { useState } from "react";

export default function Toggle() {
    const [isOpen, setIsOpen] = useState(false);

    return (
        <button onClick={() => setIsOpen(!isOpen)}>
            {isOpen ? "Open" : "Closed"}
        </button>
    );
}

Select Toggle and watch the state value change when you click the button.

Example 3: Inspect a nested component

function ProductTitle({ title }) {
    return <h2>{title}</h2>;
}

function ProductCard({ product }) {
    return (
        <article>
            <ProductTitle title={product.title} />
            <p>${product.price}</p>
        </article>
    );
}

Use the component picker to click the product title. DevTools should select ProductTitle, making it easier to inspect the exact prop.

Example 4: Profile a slow list

function ProductList({ products }) {
    return (
        <ul>
            {products.map((product) => (
                <li key={product.id}>{product.title}</li>
            ))}
        </ul>
    );
}

Record a Profiler session while filtering or updating the list. Look for components that render more often than expected.

Common mistakes and how to fix them

Mistake 1: Looking for React components in the Elements tab

What you might do:

DevTools > Elements

Why it breaks: The Elements tab shows the final DOM, not your React component tree. You may see <div> and <button> elements but not the component names from your code.

Correct approach:

DevTools > Components

Use the Components tab for React structure.

Mistake 2: Expecting DevTools edits to update source code

What you might do: Change a prop or state value in DevTools and expect your project files to change.

Why it breaks: DevTools edits are temporary browser changes. They help you test behavior, but they do not save to your codebase.

Correct approach: Use DevTools to test the idea, then update the component in your editor.

Mistake 3: Profiling before reproducing the issue

What you might do:

Start recording > stop immediately > look for slow renders

Why it breaks: The Profiler only captures what happens during the recording. If you do not reproduce the slow interaction, the recording may not show the problem.

Correct approach:

Start recording > perform the slow action > stop recording

Record the exact interaction you want to debug.

Troubleshooting

If the Components tab does not appear, confirm the extension is installed and refresh the page.

If the tabs are hidden, check the >> menu in DevTools.

If no components appear, make sure the page actually uses React.

If component names look unclear, check that you are using a development build.

If state does not update in DevTools, interact with the component again or refresh the page.

If the Profiler shows too much information, record a shorter interaction.

If a component re-renders unexpectedly, inspect its parent and check which props changed.

Quick recap

• Open browser DevTools and use the Components and Profiler tabs.
• Use Components to inspect the React component tree.
• Select components to check props, state, hooks, and context.
• Use the picker to find the component behind a visible UI element.
• Use Profiler to record slow interactions.
• Treat DevTools edits as temporary tests, not source code changes.