Quick answer

Install React DevTools in Chrome in 2 minutes:

1. Open Chrome and go to the Web Store (chrome://extensions or search “Chrome Web Store”)
2. Search for “React Developer Tools” by Meta
3. Click “Add to Chrome” → confirm “Add Extension”
4. The React icon appears in your extensions area
5. Open DevTools (F12) and select the “Components” tab
6. Start inspecting components, props, and state in real time

That’s it. You can now debug React components like a pro.

Why React DevTools matters (even more in 2026)

If you’ve just finished installing React with Vite in VS Code, you have a dev environment running. But you can’t yet see inside your React application what components rendered, what props they received, what state they hold, why a component re-rendered unexpectedly.

This is where React DevTools comes in.

React DevTools is an official browser extension (maintained by Meta) that adds a Components tab to your browser’s developer tools. It transforms debugging from guessing (“why isn’t my button updating?”) to seeing (“the onClick handler isn’t wired, and the state changed but the component didn’t re-render”).

Why it matters in 2026:

• React 19’s new features — DevTools now shows how React Server Components and async components behave
• Improved performance profiler — See exactly which components are re-rendering and why
• Real-time prop/state editing — Change props or state in DevTools and watch your app update instantly (no code change needed)
• Better error boundaries — Trace which component threw an error in the tree

Prerequisites

• Chrome browser (or Edge, which uses the same extension system)
• A React app running locally (like the one from the Vite setup guide)
• ~2 minutes

Step 1: Open the Chrome Web Store

Option A: Direct link (fastest)

Paste this into your Chrome address bar:

chrome://extensions/

Press Enter. You’ll see your installed extensions and a search bar.

Option B: Through the menu

1. Click the three-dot menu (top right of Chrome)
2. Select Extensions → Manage Extensions

You’ll see the Extensions dashboard.

Step 2: Search for React Developer Tools

In the search bar, type:

React Developer Tools

Press Enter. The first result should be “React Developer Tools” with the React logo, developed by Meta (formerly Facebook).

Verify it’s official: Look for the checkmark next to “Meta” that’s Google’s way of marking verified publishers.

Step 3: Add the extension to Chrome

1. Click on the React Developer Tools card
2. Click the blue “Add to Chrome” button
3. A popup appears asking “Allow React Developer Tools to: Read and change all your data on websites you visit?”
4. Click “Add Extension”

The extension installs instantly (takes <1 second).

Step 4: Find the React icon in your extensions

After installation, the React icon appears in your browser toolbar (top right, next to the address bar). It looks like the React logo a blue circle with electrons orbiting it.

If you don’t see it: Click the puzzle piece icon (Extensions menu) → pin the React icon so it stays visible.

Step 5: Open DevTools and find the Components tab

Now open the app you built with Vite:

http://localhost:5173

With the app open, press F12 (or Ctrl + Shift + I on Windows/Linux, Cmd + Option + I on Mac) to open Developer Tools.

You’ll see tabs like Console, Elements, Network, etc. Look for a new “React” or “Components” tab that’s your DevTools extension.

Click it. You’re now inspecting your React component tree in real time.

What you can do with React DevTools

Inspect components

In the Components tab, you’ll see a tree of your React components. Click on any component, and the right panel shows:

• Props — data passed to the component
• State — internal values the component manages
• Hooks — any useEffect, useState, etc.

For example, if you have a component like:

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

DevTools shows:

• count: 0 (current state)
• The onClick handler
• When the component re-renders

Edit props and state in real time

Double-click any prop or state value in DevTools and change it. Your app updates instantly without reloading. This is powerful for testing different states no need to click buttons or edit code.

Example:

1. Click on a component
2. See count: 5 in the state panel
3. Double-click 5 and change it to 100
4. Your button now shows “Count: 100” immediately

Trace re-renders

The Profiler tab (next to Components) shows which components re-rendered and why. This helps you optimize performance if a component is re-rendering too often, DevTools tells you which props changed to trigger it.

Jump to source code

Hover over a component in DevTools → click the “<>” icon → VS Code opens the exact source file. No more hunting for which file defines a component.

React DevTools vs. Chrome DevTools: What’s the difference?

Confused between React DevTools and Chrome’s built-in Developer Tools? Here’s the breakdown:

Feature	Chrome DevTools	React DevTools
What it debugs	HTML, CSS, JavaScript, network, storage	React components, props, state, hooks
Shows component tree	✗ (only HTML tree)	✓ (React component hierarchy)
Inspect props/state	✗	✓
Edit props/state in DevTools	✗	✓ (real-time without code change)
Performance profiling	Limited (network, loading)	✓ (component re-renders, render time)
See which hook is which	✗	✓
Find component in code	Slow (manual search)	✓ (one click → VS Code)
Built-in or extension	Built-in	Extension

TL;DR: Use Chrome DevTools to debug HTML, CSS, and network issues. Use React DevTools to debug React-specific logic (components, state, props).

Common React DevTools scenarios

Scenario 1: Component won’t update when state changes

Problem: You click a button to increment a counter, but the display doesn’t change.

Debug with React DevTools:

1. Open Components tab
2. Click the Counter component
3. See the count state value
4. Click the button → watch if count changes in DevTools
5. If it doesn’t: the state isn’t updating (bug in onClick handler)
6. If it does but the display doesn’t update: the component isn’t in the tree or isn’t re-rendering (use Profiler tab)

Scenario 2: Props aren’t being passed correctly

Problem: You pass a name prop to a Card component, but it shows “undefined”.

Debug with React DevTools:

1. Open Components tab
2. Click the Card component
3. Check the Props panel does it show name: "Alice" or is name: undefined?
4. If undefined: the parent isn’t passing the prop correctly (bug in parent)
5. If it shows the correct value: the component isn’t using the prop (bug in Card component)

Scenario 3: Component is re-rendering too often

Problem: Your app is slow. Components are updating constantly.

Debug with React DevTools:

1. Go to the Profiler tab
2. Click Record (red circle)
3. Interact with your app (click buttons, type, scroll)
4. Click Stop
5. You see a timeline of every component that re-rendered and how long it took
6. Identify the slowest components → optimize them with React performance optimization

Troubleshooting

React icon doesn’t show, or Components tab is blank

Cause: The site you’re visiting isn’t a React app, or it’s a production build with DevTools disabled.

Fix:

• Make sure your Vite dev server is running (npm run dev)
• Visit http://localhost:5173 (not a live website)
• Refresh the page

“Can’t edit props/state” everything is read-only

Cause: You’re on a production React app that disabled DevTools for security.

Fix: DevTools is read-only in production on purpose. Development builds allow editing.

DevTools shows an old version of my component

Cause: Your code changes but DevTools is cached.

Fix: Vite should hot-reload automatically. If not, refresh the page (Ctrl + R).

DevTools for Firefox and Edge

React DevTools also works on Firefox and Edge. The install process is identical:

• Firefox: Search “React Developer Tools” in about:addons
• Edge: Same as Chrome use the Edge Add-ons store

FAQ

Q: Does React DevTools slow down my app?

A: No. It has minimal overhead during development. In production builds, DevTools is automatically disabled, so there’s zero impact.

Q: Can I use React DevTools with React Native?

A: No, not directly. React Native apps use a separate debugger. But web apps built with React (including Next.js) work perfectly.

Q: Is React DevTools open source?

A: Yes. The code is on GitHub at react-devtools. You can contribute or report issues.

Q: What about the “Profiler” tab? How do I use it?

A: The Profiler records which components render and how long they take. Click Record, interact with your app, then click Stop. Use it to find bottlenecks see React performance optimization for detailed techniques.

Q: Can I use DevTools with older versions of React?

A: DevTools works best with React 16+. Older versions have limited support.

Q: What if my component uses custom hooks? Does DevTools show them?

A: Yes. DevTools shows all hooks, including custom ones. You’ll see useMyCustomHook in the Components tab with its current values.

Q: Can I edit the code from DevTools?

A: No, DevTools lets you edit props and state, but not the source code itself. Use VS Code for that.

Next steps

You’ve installed React DevTools. Now what?

You’re ready to build your first component. If you haven’t already, go back to the complete React + VS Code setup guide and follow the “What to build next” section:

1. Add routing — Build a home page and about page
2. Render lists — Learn how loops work in React
3. Debug with DevTools — Use what you learned here to understand your components
4. Optimize performance — As your app grows, use the Profiler tab to spot slow components

Conclusion

React Developer Tools is the most powerful debugging tool in a React developer’s toolkit. Within minutes, you can inspect any component, see its props and state, edit values in real time, and profile performance. What would take hours to debug with console.log() takes seconds with DevTools.

Go back to your React + VS Code setup and start building. With DevTools open, you’ll understand exactly what’s happening inside your React app at every moment.

Last updated: January 2026. Compatible with React 16+ and Chrome/Edge 90+.