How to Debug React State and Props with DevTools

React DevTools is the fastest way to see the props and state a component actually has, not what you expect it to have. Open the Components panel, select the component, and read the live values to find the one that is wrong. You can edit them in place to confirm the cause before touching source code.

Open the Components panel

Install the React DevTools browser extension for Chrome, Firefox, or Edge. For Safari, install the standalone react-devtools package and connect it with the script tag from its setup page. Once installed, the Components panel appears with the other browser dev tools and shows the React component tree for the current page.

The panel works on any site built with React. Selecting a component in the tree, or clicking an element on the page, highlights the matching entry and opens its details.

Select a component and read its values

The right side of the panel shows the selected component's props and state, along with its Hooks. A wrong value usually stands out the moment you look.

Take a cart total that computes wrong.

App.jsx

import { useState } from "react";
 
export default function Cart({ items }) {
  const [discount, setDiscount] = useState(0);
 
  return <p>Total: {items.length * 10 - discount}</p>;
}

Select Cart in the panel. If the total prints as a string instead of a number, the panel shows that discount is the string "0" rather than the number 0, so the subtraction concatenates instead of computing. The wrong value is visible without a single console log.

Edit values to confirm

Click a prop or state value in the panel and type a new one. React re-renders with the edited value, so you can test a hypothesis directly. Changing discount back to the number 0 instantly fixes the total, proving the cause before you edit the component.

This in-place editing is a temporary change for the running page. It never writes to your source files, so it is safe to try several values.

Trace a wrong prop to its owner

The panel shows which component rendered the selected one. When a prop arrives wrong, follow that chain upward until you find the component that passed it, then read that component's state to see where the bad value started. The wrong data is almost always produced one or two levels up.

Use the Profiler for slow renders

The Components panel answers "which value is wrong." For "why is this slow," switch to the Profiler panel, record the interaction, and look for a component that renders far more than its data changes. See how to find unnecessary re-renders with React Profiler.

Verify the fix

After editing the source, return to the panel and confirm the value is now correct, then reload and reproduce the original bug. For a full pass over a failure, see how to debug React applications systematically.