React Developer Tools

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.

• Chrome extension
• Firefox extension
• Standalone app (coming soon)

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 For Hacking if you want to develop the Developer Tools or use a pre-prelease version.

Usage

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

For Hacking

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.

FAQ

The React Tab Doesn't Show Up

The "React" tab won't show up 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.

(In React 0.11 and older, it was necessary to expose a global called React for the devtools to function.)

You can test this on the React website or by inspecting Facebook.

Currently iframes and Chrome apps/extensions are not inspectable.

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.

Contributing

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