React Dev Tools

The React Developer Tools browser extension adds a Components and Profiler tab to your DevTools. It's the fastest way to debug.

3 min read Level 1/5 #react#devtools#debugging

What you'll learn

Install the React DevTools extension
Inspect the component tree and props
Use the Profiler to find slow renders

The React Developer Tools is a browser extension by the React team. It adds two tabs to your DevTools: Components and Profiler. Install it before you do anything else.

Install

Search “React Developer Tools” in:

Once installed, open DevTools on any React page. The two new tabs appear next to Elements, Console, etc.

The Components Tab

Shows the full component tree, mirroring your JSX. Click any component to see:

Its props
Its state (and which hooks set what)
Its rendered DOM node (highlights in the Elements tab)
Its source file if your build keeps source maps

You can also edit props and state live to test edge cases without reloading.

The Profiler Tab

Press the record button, do something in the app, stop. The profiler shows:

Which components rendered
How long each render took
Why each one rendered (props change, state change, parent render)

Useful when you’re hunting “why is this app slow?” — usually a component is rendering far more often than it needs to.

Other DevTools Tricks

$r (in the Console): selected component instance — useful for poking at state
$0: selected DOM element (built into Chrome DevTools)
Component search: type a name in the Components tab to jump to it instantly in a deep tree

You’re Ready to Build

That wraps the basics. You can read JSX, understand the entry point, and inspect a running app. The next chapter dives into components and props — how to build real things.

Components & Props →