your ad here · $149/weekyour ad here · $149/weekyour ad here · $149/weekyour ad here · $149/weekyour ad here · $149/weekyour ad here · $149/weekyour ad here · $149/weekyour ad here · $149/weekyour ad here · $149/weekyour ad here · $149/weekyour ad here · $149/weekyour ad here · $149/week
HomeBlogWeb Development
Published Oct 26, 2023 ⦁ Updated Oct 11, 2026 ⦁ 6 min read

React DevTools: Install, Components Tab and Profiler Guide

React DevTools (React Developer Tools) is the official, free debugger for React apps. Install the browser extension for Chrome, Firefox or Edge, open your browser's developer tools on a React page, and you get new Components, Profiler and Suspense tabs. For Safari or any other environment, use the standalone react-devtools npm package (react.dev).

This guide covers React DevTools 8 (released September 2026) with React 19.3, the current versions as of October 2026.

Install React DevTools

Where you run React What to install
Chrome, Brave, Arc, other Chromium browsers React Developer Tools from the Chrome Web Store
Firefox React Developer Tools add-on
Edge React Developer Tools from Edge Add-ons
Safari, embedded webviews, Electron Standalone react-devtools (npm)
React Native 0.76+ Nothing: built into React Native DevTools

After installing, the extension icon lights up on pages that use React. Its popup tells you whether the page runs a development or production build of React.

Standalone react-devtools (Safari and other browsers)

npm install -g react-devtools
react-devtools

You can also skip the global install and run npx react-devtools. The app opens a window and listens on port 8097. Connect your page by adding this as the first script in <head>, in development only:

<script src="http://localhost:8097"></script>

Reload the page and the component tree appears in the standalone window. Remove the tag before you ship.

Components tab: inspect props, state and hooks

Open DevTools (F12, or Cmd+Option+I on Mac), then the Components tab. You see the React tree, not the DOM tree.

  1. Select a component. Click the picker icon (top left of the panel) and click anything on the page, or click a name in the tree. Right-click a DOM node in the Elements panel and the matching React component is shown there too (new in DevTools 8).
  2. Read and edit its data. The right pane shows props, state, hooks (with their names, such as State, Reducer, Memo, and your custom hooks) and context. Double-click a value to edit it; the component re-renders with the new value. This is the fastest way to test an edge case like an empty list or a long name.
  3. See who rendered it. The rendered by section lists the owner chain, the components that created this element, which is often different from the parent in the tree.
  4. Jump to code. The <> (view source) button opens the component's function in the Sources panel.
  5. Use it in the console. The selected component is available as $r in the Console, so $r.props or $r.state work for quick checks.
  6. Search and filter. Type in the search box to find components by name. The settings gear lets you hide components by type, name or location, for example to hide library wrappers.

Components compiled by the React Compiler show a Memo ✨ badge, so you can check that the compiler actually optimized a component.

Suspense tab

DevTools 8 turns the Suspense tab on by default. It shows every <Suspense> boundary, a timeline of when each one revealed its content, and named <Activity> boundaries. When a component is waiting, the Suspended by section in the Components tab lists the cause: an await in a Server Component, React.lazy, use(), or a suspensey image, stylesheet or font (DevTools changelog). You can also force a boundary into its fallback state to test loading UI.

Profiler: find out why a component re-rendered

The Profiler tab measures how long each render takes and which components took part.

  1. Open Profiler, click the gear and turn on Record why each component rendered while profiling. Without it, you only see timings.
  2. Click the record button (circle), do the slow interaction in your app, then click stop.
  3. Pick a commit from the bar chart at the top right. Each bar is one commit; taller and yellower means slower.
  4. Read the Flamegraph (the tree, with width as render time) or the Ranked chart (slowest components first). Grey components didn't render in that commit.
  5. Click a component. The sidebar shows Why did this render?, for example "Props changed: onSelect" or "Hook 2 changed". A function or object prop that changes on every render is the usual cause, fixed with useCallback/useMemo or by letting the React Compiler handle it.

To spot re-renders without recording, open the Components settings and check Highlight updates when components render. Components flash on every render.

Profiling a production build

Profiling is disabled in normal production builds. Build with the profiling bundle by aliasing react-dom/client to react-dom/profiling in your bundler (react.dev). Some frameworks expose a flag for this, for example next build --profile.

React tracks in the Chrome Performance panel

DevTools 8 removed the old Timeline profiler tab. Its replacement is React Performance Tracks: when you record in the browser's Performance panel, React adds Scheduler tracks (Blocking, Transition, Suspense, Idle) and a Components track next to network and JavaScript activity (react.dev). They are on by default in development builds. Use the React Profiler for "which component and why" and the Performance panel for "what else was the main thread doing". Our Chrome DevTools overview explains that panel.

React DevTools not showing? Fixes

  • No Components tab on a React site. Close and reopen DevTools, then reload the page. The extension attaches when the page loads.
  • Local files (file://). In chrome://extensions, open React Developer Tools Details and enable Allow access to file URLs.
  • Incognito. Extensions are off in incognito by default; enable Allow in Incognito in the same Details page.
  • Component names are single letters. You are looking at a minified production build. Use your dev server, or keep names with your bundler's keep_fnames/keepNames option.
  • Two copies of the extension. Having the stable extension and a locally built one enabled at once causes conflicts. Disable one.
  • React inside an iframe or webview. Use the standalone app and add the script tag to the framed page.

Related tools

React DevTools does not show Redux actions or external stores in detail. For Redux, add Redux DevTools. For React Native, the same Components and Profiler panels are built into React Native DevTools; see our React Native debugging guide. For more browser add-ons like this, see the best Chrome extensions for developers or browse browser extension tools on DevHunt.

FAQ

Is React DevTools free?

Yes. It is open source and maintained by the React team in the facebook/react repository. There is no paid tier.

How do I use React DevTools in Firefox or Safari?

Firefox has its own add-on with the same panels. Safari has no extension, so run npx react-devtools and add <script src="http://localhost:8097"></script> to the page's <head> during development.

Does React DevTools work on production sites?

The Components tab works on any site that uses React, but names may be minified and some details are hidden. The Profiler only works with development or profiling builds.

What happened to the React DevTools Timeline tab?

It was removed in DevTools 8. Record in the browser Performance panel instead; React 19.2 and later add React tracks to that timeline automatically in development.

Why does the Profiler not say why a component rendered?

You have to enable Record why each component rendered while profiling in the Profiler settings before you record. Turn it on, then record again.

DebuggingDevelopment ToolsReactWeb-Development