An extension that allows inspection of React component hierarchy in the Chrome and Firefox Developer Tools.
React Developer Tools lets you inspect the React component hierarchy, including component props and state.
The official extensions represent the current stable release.
The extension icon will light up on the websites using React:
On such websites, you will see a tab called React in Chrome Developer Tools:
A quick way to bring up the DevTools is to right-click on the page and press Inspect.
- Arrow keys or hjkl for navigation
- Right click a component to show in elements pane, scroll into view, show
- Differently-colored collapser means the component has state/context
- Right-click to store as global variable
- Updates are highlighted
- Use the search bar to find components by name
Finding Component by a DOM Node
If you inspect a React element on the page using the regular Elements tab, then switch over to the React tab, that element will be automatically selected in the React tree.
Finding DOM Node by a Component
You can right-click any React element in the React tab, and choose "Find the DOM node". This will bring you to the corresponding DOM node in the Elements tab.
Displaying Element Source
You may include the transform-react-jsx-source Babel plugin to see the source file and line number of React elements. This information appears in the bottom of the right panel when available. Don't forget to disable it in production! (Tip: if you use Create React App it is already enabled in development.)
Usage with React Native and Safari
There is a standalone version that works with other environments such as React Native and Safari.
The React Tab Doesn't Show Up
If you are running your app from a local
file:// URL, don't forget to check "Allow access to file URLs" on the Chrome Extensions settings page. You can find it by opening Settings > Extensions:
Or you could develop with a local HTTP server like
The React tab won't show up if the site doesn't use React, or if React can't communicate with the devtools. When the page loads, the devtools sets a global named
__REACT_DEVTOOLS_GLOBAL_HOOK__, then React communicates with that hook during initialization. You can test this on the React website or by inspecting Facebook.
If your app is inside of CodePen, make sure you are registered. Then press Fork (if it's not your pen), and then choose Change View > Debug. The Debug view is inspectable with DevTools because it doesn't use an iframe.
If your app is inside an iframe, a Chrome extension, React Native, or in another unusual environment, try the standalone version instead. Chrome apps are currently not inspectable.
If you still have issues please report them. Don't forget to specify your OS, browser version, extension version, and the exact instructions to reproduce the issue with a screenshot.
Does "Highlight Updates" trace renders?
With React 15 and earlier, "Highlight Updates" had false positives and highlighted more components than were actually re-rendering.
Since React 16, it correctly highlights only components that were re-rendered.