Using React DevTools

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

Articles & Tutorials

Performance Profiling Your React App (telerik.com)
May 06, 2019
In this article, we'll learn how to profile the performance of React apps using React Profiler, and leverage it to discover performance issues.
5 things you didn’t know about React DevTools (blog.logrocket.com)
May 02, 2019
The React DevTools is under active development, and new features are added all of the time. This article will show you five of those features that you might not have tried out yet, or that you simply didn’t know existed!
  • Kristofer Selbekk
Integrating React Profiler (phpied.com)
Feb 21, 2019
Say hello to the new perf hotness - a profiler built into React. This announcement blog post shows how to use it as a Chrome Extension, but you can also use it in your code, to get insight into real world interactions, even in production. Let's see how.
  • Stoyan Stefanov
Use the New Profiler in React Developer Tools to Generate Flame Charts and Interactions (elijahmanor.com)
Sep 10, 2018
React version 16.5.0 has been released and one of the features that it supports is the new Profiler in the React Developer Tools.
Introducing the React Profiler (reactjs.org)
Sep 10, 2018
React 16.5 adds support for a new DevTools profiler plugin. This plugin uses React’s experimental Profiler API to collect timing information about each component that’s rendered in order to identify performance bottlenecks in React applications. It will be fully compatible with our upcoming time slicing and suspense features.

Video Guides & Talks

Playing with React suspense and DevTools (youtube.com)
Jul 30, 2018
This was my first time live streaming. I apologize for the tiny font and for not seeing the messages in chat. I will do better next time! Here are some links to make up for it.
Sneak peek at the DevTools Profiler with "interactions" (youtube.com)
Jul 28, 2018
Prototype UI built on top of the new React "Profiler" component.
Sneak peek at new React DevTools "profiler" feature (youtube.com)
Jun 21, 2018
Prototype UI built on top of the new React "Profiler" component.
Use React DevTools (youtube.com)
May 14, 2018
This is a quick intro to react devtools.
React Devtools theme editor GUI (youtube.com)
May 30, 2017
Walkthrough video of the new built-in themes editor.
React devtools theme editor preview panel (youtube.com)
May 29, 2017
Another demo of the work-in-progress theme editor for React devtools.
Creating a custom React dev tools theme (youtube.com)
May 25, 2017
This video walks through the process of creating a custom theme for React dev tools- from GitHub fork to PR submission.

Podcast Episodes

React Perf Devtool with Nitin Tulswani (reactpodcast.com)
May 08, 2018
Nitin Tulswani is a prolific developer and the creator of react-perf-devtool, a library that helps with profiling the performance of your React components since react-addons-perf was deprecated in React 16. In this episode we discuss Nitin's approach to writing code and the motivation behind several of his open source projects.