React Developer Tools: Inspect Components and Profile Renders

The regular Elements panel only shows the HTML a React app produces. React Developer Tools shows you the component tree behind it, with each component’s props and state.

Two new DevTools tabs

After installing, open Chrome DevTools (F12) on a React site and you’ll find:

• Components ⚛: The root components that were rendered on the page and the subcomponents they rendered. Select any component to inspect and edit its current props and state in the right-hand panel. The breadcrumbs show which component created the selected one, and which created that, and so on.
• Profiler ⚛: Record an interaction to see performance information about your components’ renders.

A handy detail: if you inspect an element in the normal Elements tab and then switch to the React tab, that element’s component is selected automatically.

Privacy and source

The extension needs permission to access the page’s React tree, but its listing states that it does not transmit any data remotely. It is fully open source; the code lives in the React repository on GitHub.

Installing it

1. Click Download to open React Developer Tools on the Chrome Web Store.
2. Add it to Chrome. The toolbar icon lights up on pages built with React.
3. Open DevTools and look for the Components and Profiler tabs.

To build React apps you’ll also want Node.js and an editor such as Visual Studio Code. Working with Vue instead? See Vue.js devtools.