Install React Developer Tools

React Developer Tools adds Components and Profiler panels to supported browser developer tools. Install the extension for Chrome, Firefox, or Edge before you debug anything serious.

Use the Components panel to inspect React’s model:

• which component rendered another component
• the current props
• state and Hook values
• which component owns changing data

Use the normal Elements panel to inspect the browser’s model:

• actual DOM elements
• accessibility information
• matched CSS
• event and layout behavior

These views answer different questions. A wrong prop belongs in the component tree. A correct prop with broken spacing belongs in the DOM and CSS. I reach for Components first when data looks wrong, and Elements first when layout looks wrong.

Select a component, change one state value through the DevTools interface, and watch the panel update. Then select the DOM element it produced. You should see the same change reflected in both places.

The Profiler records which components rendered during an interaction. Use it after you observe a real performance problem. A render is not automatically expensive, and avoiding every render can make code harder to understand.

When you first open the Components panel, expand the tree from App downward. Click a leaf component and read its props in the right sidebar. That workflow alone resolves most “why is this value wrong?” questions during development.

Do not edit props or state in DevTools and treat the result as a code fix. Use the inspection to find where the value originates, then change that source in your editor.