React Developer Tools - Stop Debugging React Like It's 2005

Stop debugging React with console.log(this.props) like it's 2005. React Developer Tools is Meta's browser extension that actually shows you what's happening in your components without turning your console into a graveyard of forgotten debug statements.

I used to spend hours adding console.log(this.props) everywhere, forgetting to remove half of them, and shipping them to production where AWS was charging us like $180-ish/month just for my debug spam. You probably did the same shit. React DevTools shows you exactly what's broken without cluttering your code with debug statements you'll inevitably forget to clean up.

The official browser extension adds two tabs to DevTools: Components and Profiler. Install it from Chrome, Firefox, or Edge and thank me later.

The Components Tab: See What's Actually Happening

The Components tab shows your React component tree exactly like React sees it. Click any component and boom - you see its props, state, hooks, everything. No more wondering why UserProfile is broken because you can literally see what props got passed to it.

Here's the magic: you can edit props and state directly. Click on any value and change it. No code changes, no rebuilds, no refresh. Toggle isLoading to true, change that API response, break things on purpose to see what happens. This live editing feature saved my ass when debugging a checkout flow where the "Buy Now" button wasn't working - turns out isEnabled was getting passed as a string "false" instead of boolean false.

Real example: I spent like 4 hours one Friday debugging why our UserCard component wouldn't render - just blank space where the card should be, no errors in console, no clues. Spent most of that time adding console logs everywhere like an idiot before finally opening DevTools. Took me another 20 minutes of clicking around before I noticed user.isActive was undefined instead of the boolean I expected. Turns out the API was returning user: { id: 123, name: "John" } but missing the isActive field entirely because of some backend schema change nobody told us about. Could've saved my entire weekend if I wasn't too stubborn to open DevTools first.

The Profiler: Find What's Slow as Hell

The Profiler tab shows you which components are slow. That's it. Longer bars = slower components. Look for the longest bars and those are your problems.

Found a component creating new Date() objects on every render? The profiler will show it. Components re-rendering 47 times per click? The profiler catches that too. I've seen apps where the ProductList component was calling new Date() in the render function - every single render created a new date object. The profiler made it obvious with a giant red bar screaming "THIS IS YOUR PROBLEM."

The "why did this render?" info is gold. It tells you exactly what changed to trigger the re-render. If you see a component rendering because of props that didn't actually change, you've found an optimization opportunity. React's rendering behavior makes more sense when you can see it happening live.

Installation: 30 Seconds or 30 Minutes

Available for Chrome, Firefox, and Edge. Safari users get screwed and have to use the standalone version.

Installation takes 30 seconds unless Chrome decides to be weird:

1. Go to your browser's extension store, search "React Developer Tools"
2. Click install and pray the store doesn't hang
3. Open DevTools (F12) on any React app
4. Look for the "Components ⚛️" and "Profiler ⚛️" tabs

If you don't see the React tabs, either the site isn't using React, you're looking at a production build, or Chrome extensions randomly broke again. Production builds strip out debugging info for performance, which is smart but annoying when you're trying to debug staging.

React Native: Same Pain, Mobile Edition

React Native DevTools works the same way for mobile apps. Same component tree, same profiler, same prop editing. The difference? You have to connect through the Metro bundler and your phone will randomly disconnect right when you're in the middle of debugging a critical production issue.

React Native 0.76+ has built-in DevTools integration that actually works most of the time. Earlier versions require the standalone version (npm install -g react-devtools) and some device menu shaking. Connection issues? Welcome to mobile development hell - restart Metro, shake your device until the dev menu appears, check that your phone and laptop are on the same WiFi network, restart the packager, clear the React Native cache with npx react-native start --reset-cache, sacrifice a goat, whatever works.

Why Console Logging Sucks

Stop adding console.log(props) to components. Just stop. You'll forget to remove them, ship them to production, and your team will judge you. ESLint can catch them, but you shouldn't need a linter to remind you not to debug like it's 2005.

React DevTools shows you props, state, hooks, and data flow without touching your code. No refreshes, no cleanup, no "oh shit I forgot to remove the console logs" moments. This is how React's creators intended you to debug - use their tool.

Production Debugging: You Don't

In production, React strips out debugging info for performance and security. Enabling DevTools in production would expose your app's internals to users and slow everything down.

Set up staging environments that mirror production but keep debugging enabled. For actual production bugs, use error tracking like Sentry or LogRocket. Don't try to debug live production with DevTools - that way lies madness.

Version Compatibility: Usually Fine

React 18, 19, hooks, server components, concurrent features - DevTools keeps up. The Meta team updates it regularly because they dogfood their own tools.

React 18 gotcha: Strict Mode makes components render twice in development, which makes the profiler timing look weird. That's expected behavior, not a bug.

Works With Everything (Probably)

Create React App, Next.js, Vite, custom Webpack configs - if it runs React in development mode, DevTools will work. TypeScript? Obviously supported. The extension reads TypeScript types and shows better prop information than plain JavaScript.

Bottom Line

Just install it. Every React developer has this extension. Debugging React without it is like coding with one hand tied behind your back.

Install it, learn the basics (component tree, prop editing, profiler), and stop making React development harder than it needs to be. Your future self will thank you when you're debugging at 3am and actually know what's breaking.

Look, React DevTools has a bunch of features, but 90% of the time you'll use maybe 4 of them. The official docs list everything, but here's what actually saves your ass when you're debugging at 2am and nothing makes sense.

Component Tree Navigation

Ever had a "simple" login form that turns out to have 47 nested components because of UI libraries and HOCs? Yeah, me too. The component tree shows you what React actually sees, not what you think you built.

I wasted 6 hours debugging a UserProfile component before realizing it was actually coming from @company/shared-components/dist/UserProfile.js - completely different file than I expected. The "view source" link would've saved my weekend if our source maps weren't fucked.

Pro tip: filter out the gray DOM elements to focus on actual React components. Searching for AuthButton in an app with 200+ components is way better than grep-ing through files like some kind of animal.

Live Editing: The Holy Grail of Debugging

You can edit props and state directly and watch your app change in real-time. No code changes, no rebuilds, no prayers to the hot-reload gods. This live editing feature has saved my ass more times than I can count.

Example: debugging a checkout flow where the "Buy Now" button wasn't working. Instead of adding console logs and guessing, I toggled isEnabled from false to true and boom - button works. Turns out the API was returning the string "false" instead of boolean false. Would've taken hours to track down without DevTools.

The editor handles strings, numbers, booleans, arrays, and complex objects. It validates JSON syntax so you won't accidentally break everything with malformed data. Test edge cases by setting user age to -1 or product price to null - see what breaks without writing test code.

Hooks Debugging: Finally, See What's in useState

Remember adding console.log(useState value) everywhere just to see what was in state? Yeah, fuck that noise. The hooks section shows you everything - useState values, useEffect dependencies, custom hook internals.

I burned an entire day debugging useEffect firing on every render. Turns out my dependency array had [user] but the user object was getting recreated every render with {...user, timestamp: Date.now()}. DevTools made it obvious - same user data, different object references every time. Changed it to [user.id, user.name] and boom, problem solved.

Oh, and here's a React 18 gotcha that'll drive you insane: Strict Mode runs effects twice in development. So when you're looking at the hooks timing in DevTools and thinking "why is this firing twice?", that's why. It's not a bug, it's a feature. A really annoying feature.

Custom hooks show up too, with their internal state visible. I've debugged custom hooks that were silently failing by editing their internal state and watching what breaks. Way easier than adding debug code to the hook itself.

Performance Profiling: Find What's Slow as Hell

The Profiler shows you which components are eating up CPU time. Record a session, interact with your app, and get a flame chart showing exactly where the performance bottlenecks are. The React Profiler docs have the technical details, but the TL;DR is: longer bars = slower components.

Real numbers from hell: I profiled a product listing page that was taking like 800ms+ to render - users were complaining about laggy scrolling and the PM was breathing down my neck. The profiler showed one ProductCard component taking around 40-50ms per render (anything over 16ms causes frame drops), and we had 20 of them. Each card was calling new Date().toLocalString() in the render function because some genius thought it was a good idea to show "Listed 3 minutes ago" that updated in real-time. Moved it to useMemo with a 60-second refresh and render time dropped to something like 120-150ms total. Way better, anyway.

The ranked chart puts the worst offenders at the top. Look for components with render times over 10ms - those are your problems. The "why did this render?" info is gold - it tells you exactly what triggered the re-render. Props change? State update? Parent component forcing a re-render for no reason? You'll know immediately.

Performance war story: Found a component re-rendering 47 times per user scroll event - Chrome DevTools was showing "Long Task" warnings and users were reporting the app felt "laggy". Turned out the parent was creating a new callback function on every render: onClick={() => handleClick(item.id)}. One useCallback hook fixed it and scroll became buttery smooth again.

React 18+ gotcha: If you're seeing weird profiler timings where components show 0ms render time but your app is still slow, check if you're using useDeferredValue or startTransition. The profiler gets confused by deferred updates sometimes and doesn't show realistic timing.

Component Selection: Find the Culprit

Click the crosshair icon and then click any element on your page to instantly find its React component. Perfect for when you're staring at broken UI wondering "which damn component is rendering this?"

Works both ways - select a component in DevTools and it highlights the corresponding page element. Saved me countless hours debugging CSS issues where I couldn't figure out which component was adding that mysterious margin.

Source Code Navigation: When It Works

The "view source" link jumps straight to the component's file definition. Great when it works, useless when your source maps are broken. Most dev servers enable source maps by default, but custom Webpack configs can screw this up.

Error Boundary Integration

When shit hits the fan and components throw errors, DevTools shows you which error boundary caught it and gives you the full stack trace. Beats digging through console logs trying to figure out why your app is showing a blank white screen.

React 18+ Features: The New Hotness

DevTools keeps up with React 18's concurrent features - Suspense boundaries, transitions, all that fancy stuff. The interface doesn't change much, which is good because learning new debugging tools sucks.

React 19 note: As of late 2024, DevTools supports React 19's new features including server components debugging, though the server component debugging is still a bit rough around the edges.

Browser Extension vs Standalone: Pick Your Poison

Use the browser extension unless you're forced to use Safari or need to debug React Native. The standalone version exists for those unfortunate souls.

Standalone version is also useful for debugging mobile apps and cross-domain scenarios, but 95% of developers just use the browser extension because it's easier.

What Actually Matters

Master these three things: component tree navigation, props/state editing, and the profiler. That's 80% of React debugging right there.

Everything else is nice to have, but these three features will solve most of your React debugging problems. Learn them first, worry about the advanced stuff later when you actually need it.