An extension that allows inspection of React component hierarchy in Chrome Developer Tools.
JavaScript HTML Other
Latest commit cdf4615 Feb 19, 2017 @gaearon gaearon committed on GitHub Update README.md
Permalink
Failed to load latest commit information.
agent Revert "Modify for-in loop to use Object.getOwnPropertyNames, surfaci… Feb 15, 2017
backend [Electron] Remove indirection (#498) Feb 8, 2017
flow Lint cleanup Sep 16, 2015
frontend Improved code quality and fixed typos in frontend components (#535) Feb 17, 2017
images fix react native style for electron app Jul 23, 2015
packages fixes 'npm start' for 'packages/react-devtools' (#555) Feb 18, 2017
plugins Fix: writable => configurable (amend #510) Feb 15, 2017
shells add clearer instructions to inspect the inspector (#537) Feb 17, 2017
test/example Use non-Fiber examples since Fiber is not on npm Jan 27, 2017
utils Move all guid generation into a util Oct 2, 2015
.babelrc Upgrade to Babel 6 Nov 12, 2015
.eslintignore [Electron] Make 2.0 backwards compatible with old RN (#500) Feb 9, 2017
.eslintrc Update ESLint (#377) May 20, 2016
.flowconfig Devtools for everyone!!! (#440) Oct 18, 2016
.gitignore Set up Lerna and move Electron shell to packages/ (#493) Feb 7, 2017
.travis.yml Enable C++-compatible compiler on travis. https://docs.travis-ci.com/… Apr 18, 2016
CONTRIBUTING.md removing stuff from "CONTRIBUTING" that doesnt make sense for react-d… Jul 27, 2015
LICENSE add base files from master Jul 16, 2015
PATENTS add base files from master Jul 16, 2015
README.md Update README.md Feb 19, 2017
lerna.json v2.0.12 Feb 16, 2017
package.json Set up Lerna and move Electron shell to packages/ (#493) Feb 7, 2017
yarn.lock better npm scripts (#523) Feb 16, 2017

README.md

React Developer Tools Build Status

React Developer Tools is a system that allows you to inspect a React Renderer, including the Component hierarchy, props, state, and more.

There are shells for Chrome (adding it to the Chrome devtools), Firefox, Atom/Nuclide, and as a standalone Electron app.

Installation

Pre-packaged

The official extensions represent the current stable release.

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

If you inspect an element or launch the developer tools on a React page, you should see an extra tab called React in the inspector.

Check out Contributing if you want to develop the Developer Tools or use a pre-prelease version.

Usage

Supporting tools

  • The babel plugin transform-react-jsx-source is required if you want react devtools to tell you the source file & line number of created react elements. Its display is in the bottom of the right panel if the information is present. Don't forget to disable it in production!

React Native

There is a standalone version that works with React Native.

Tree View

  • Arrow keys or hjkl for navigation
  • Right click a component to show in elements pane, scroll into view, show source, etc.
  • Use the search bar to find components by name
  • A red collapser means the component has state/context

Side Pane

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

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.

FAQ

The React Tab Doesn't Show Up

If you are running your app from file:// URL, don't forget to check "Allow access to file URLs" on the Chrome Extensions settings page.

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 an iframe, a Chrome extension, React Native, or in another unusual environment, try the standalone version instead.

Chrome apps are currently not inspectable.

Does "Trace React Updates" trace renders?

Yes, but it's also tracing if a component may render. In order to fully understand what counts as an "update", you need to understand how shouldComponentUpdate works.

Here "Trace React Updates" will draw a border around every node but C4 and C5. Why does it trace components that don't actually update? (via shouldComponentUpdate() -> false) This is a limitation of the system used to track updates, and will hopefully change in the future. It doesn't, however, trace the children of components that opt out, as there's no possibility of them updating. The higher the rate of updates happening per second the more the color changes from blue to red.

ProTips

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.

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.