React DevTools
Last updated: 2026-11-02
React DevTools React DevTools
React DevTools is the official browser extension that lets you inspect the component tree the way you inspect the DOM, read the props, state and hook values of every component, and use the Profiler to find out which render was the most expensive. It is an essential tool for debugging React applications. Once you know where to look, a state bug that takes an hour to find becomes a two-minute inspection.
| Group | Core Concepts |
|---|---|
| Kind | Tooling |
| Since | Earliest React versions |
ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.
📝 Syntax
Install: search for "React Developer Tools" in your browser's extension store
Open: press F12 — the panel bar gains two new tabs, Components and Profiler
Components: inspect the component tree, props/state and locate the component that rendered
Profiler: record one interaction and analyse who rendered in each frame and how long it tookReturns：No return value — this is an engineering debugging tool.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
A monospace panel lists four indented levels — App, Header, TodoList and Footer — with a state summary for each; clicking a row highlights it and points out that its props/state can be inspected there, mimicking the DevTools experience.💡 Key Points
💡 Tip After selecting a component in the Components panel you can edit values on the right: changing state takes effect immediately, which is a quick way to verify an interaction.
ℹ️ Info The Profiler is the entry point for performance work: after recording, red frames mark slow commits and show which component was slow to render.
⚠️ Warning The DevTools panels are unavailable in production builds (they are disabled by default), so attach them to a development environment.
🏷️ More Core Concepts
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q How do I install React DevTools?
A Search for React Developer Tools in the Chrome / Edge / Firefox extension store and install it; after opening F12 you will find two new tabs, Components and Profiler.
Q Why can't I see my components in DevTools?
A Common causes: the current tab is not a development React page, the extension is disabled, or the page runs a production build without debug support enabled.
Q How do I analyze performance with the Profiler?
A Press the record button in the Profiler, perform the interaction, then stop; inspect the expensive commits in the flame chart, find the components that re-render needlessly and optimize them with memo.
