React Developer Tools Extension
React Developer Tools is like x-ray glasses for your browser that let you see the React components hiding behind a webpage.
What React Developer Tools Shows
The React Developer Tools browser extension adds a Components and a Profiler tab to your browser's dev tools, letting you inspect the live component tree, its current props and state, rather than just the raw rendered HTML.
Note:
Install it from the Chrome Web Store or Firefox Add-ons and it activates automatically on any page running React.
Warning:
The extension only detects React on pages that actually load React -- it stays inactive/greyed-out on non-React sites.
Example: What React Developer Tools Shows
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Header() { return <h3>Header</h3>; }
function Content() { return <p>Content</p>; }
function Layout() {
return (
<div>
<Header />
<Content />
</div>
);
}
// React DevTools' Components tab would show this exact tree:
// Layout > Header, Content
ReactDOM.createRoot(document.getElementById('root')).render(<Layout />);
</script>
</body>
</html>Inspecting Props and State Live
Clicking a component in the Components tab shows its current props and state values on the right, and you can even edit them live to see the UI update instantly, without changing your code.
Note:
Editing a state value live in the Components tab is a fast way to test how the UI looks for edge-case data.
Warning:
Live-edited values in dev tools are not saved anywhere -- refreshing the page resets everything back to what the code actually produces.
Example: Inspecting Props and State Live
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Counter() {
const [count, setCount] = React.useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>+1 (inspect state live)</button>
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<Counter />);
</script>
</body>
</html>Profiling Renders
The Profiler tab records how long each component takes to render and highlights which components re-rendered during an interaction, helping you spot unnecessary re-renders.
Note:
Click the record button in the Profiler tab, interact with your app, then stop recording to see a flame graph of what rendered.
Warning:
Profiler recordings reflect your current build (often an unoptimized dev build) -- render times in production can differ.
Example: Profiling Renders
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Child({ value }) {
return <p>Child rendered with: {value}</p>;
}
function Profiled() {
const [n, setN] = React.useState(0);
return (
<div>
<button onClick={() => setN(n + 1)}>Re-render Child</button>
<Child value={n} />
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<Profiled />);
</script>
</body>
</html>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
Common Mistakes
- Not realizing the extension only activates its React-specific panels on pages that actually use React.
- Confusing the Components tab (component tree) with the Profiler tab (performance timing).
- Forgetting DevTools panels reset their state on every full page reload.
Chapter Summary
- React Developer Tools is a browser extension for Chrome, Firefox, and Edge.
- It adds a Components tab to inspect the component tree and current props/state.
- It adds a Profiler tab to measure rendering performance.
- It's essential for debugging real React applications during development.
Browser Support
Available as an extension for Chrome, Firefox, and Edge; works with any React 16+ application running in the browser.
🔒
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: