An extension that allows inspection of React component hierarchy in the Chrome and Firefox Developer Tools.
Latest commit 48ecaa4 Oct 17, 2018
Permalink
Failed to load latest commit information.
.github Rephrase positively Apr 20, 2017
agent Profiler plug-in for DevTools (#1069) Aug 15, 2018
backend Placeholder -> Suspense (#1182) Oct 17, 2018
flow Don't init modules until hook exists (#1061) Jul 17, 2018
frontend Applied some of my own PR feedback suggestions to Context displayName Sep 20, 2018
images Improve wording for stateful components in README to no longer refer … Jul 10, 2017
packages v3.4.1 Oct 17, 2018
plugins Applied some of my own PR feedback suggestions to Context displayName Sep 20, 2018
shells Manifests 3.4.1 Oct 17, 2018
test/example Applied some of my own PR feedback suggestions to Context displayName Sep 20, 2018
utils Profiler plug-in for DevTools (#1069) Aug 15, 2018
.babelrc Upgrade to Babel 6 Nov 12, 2015
.eslintignore [Electron] Make 2.0 backwards compatible with old RN (#500) Feb 9, 2017
.eslintrc Profiler plug-in for DevTools (#1069) Aug 15, 2018
.flowconfig Upgrade to Flow 66 (#977) Feb 23, 2018
.gitignore Make Elements panel feel less cluttered (#1091) Aug 15, 2018
.travis.yml Fully embrace yarn and its workspaces (#978) Feb 23, 2018
.yarnrc Fully embrace yarn and its workspaces (#978) Feb 23, 2018
CODE_OF_CONDUCT.md Add CODE_OF_CONDUCT.md (#943) Nov 17, 2017
CONTRIBUTING.md Fully embrace yarn and its workspaces (#978) Feb 23, 2018
LICENSE add base files from master Jul 16, 2015
PATENTS add base files from master Jul 16, 2015
README.md Update README.md Sep 29, 2017
lerna.json v3.4.1 Oct 17, 2018
package.json Update React to 16.5 and rebuild example app (#1160) Sep 19, 2018
yarn.lock Update React to 16.5 and rebuild example app (#1160) Sep 19, 2018

README.md

React Developer Tools Build Status

React Developer Tools lets you inspect the React component hierarchy, including component props and state.

It exists both as a browser extension (for Chrome and Firefox), and as a standalone app (works with other environments including Safari, IE, and React Native).

Installation

Pre-packaged

The official extensions represent the current stable release.

Opera users can enable Chrome extensions and then install the Chrome extension.

Usage

The extension icon will light up on the websites using React:

Extension icon becomes active

On such websites, you will see a tab called React in Chrome Developer Tools:

React tab in DevTools

A quick way to bring up the DevTools is to right-click on the page and press Inspect.

Tree View

  • Arrow keys or hjkl for navigation
  • Right click a component to show in elements pane, scroll into view, show source, etc.
  • Differently-colored collapser means the component has state/context

Side Pane

  • Right-click to store as global variable
  • Updates are highlighted

Search Bar

  • Use the search bar to find components by name

Handy Tips

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.

FAQ

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:

Allow access to file URLs

Or you could develop with a local HTTP server like serve.

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.

Contributing

For changes that don't directly involve Chrome/Firefox/etc. APIs, there is a "plain" shell that just renders the devtools into an html page along with a TodoMVC test app. This is by far the quickest way to develop. Check out the Readme.md in /shells/plain for info.

For other shells (Chrome, Firefox, etc.), see the respective directories in /shells.

For a list of good contribution opportunities, check the good first bug label. We're happy to answer any questions on those issues!

To read more about the community and guidelines for submitting pull requests, please read the Contributing document.

Debugging (in Chrome)

What to do if the extension breaks.

  • check the error console of devtools. Part of React Devtools runs scripts in the context of your page, and is vulnerable to misbehaving polyfills.
  • open devtools out into a new window, and then hit the shortcut to open devtools again (cmd+option+j or ctrl+shift+j). This is the "debug devtools" debugger. Check the console there for errors.
  • open chrome://extensions, find react devtools, and click "background page" under "Inspected views". You might find the errors there.