Using React DevTools

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

Articles & Tutorials

React Dev Tools — Debug Like a Ninja (
Sep 20, 2019
React team launched a new version of the React Dev Tools (v4) a few weeks ago and it’s fantabulous. It gives you debugging superpowers to navigate through your tree, trace data flow, spot weak links and optimise for perf.
  • Dinesh Pandiyan
Profile a React App for Performance (
Sep 16, 2019
How to use the React DevTools and React's profiling build to properly profile a production app.
Introducing the New React DevTools (
Aug 15, 2019
We are excited to announce a new release of the React Developer Tools, available today in Chrome, Firefox, and (Chromium) Edge!
Performance Profiling Your React App (
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 (
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 (
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 (
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 (
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

What's New with React Dev Tools 4 (
Aug 19, 2019
React Dev Tools just came out with an entirely new version! It's now at version 4.0 and it is JAM PACKED with tons of new features!
  • Harry Wolff
How to use the React Profiler to find and fix Performance Problems (
Jun 17, 2019
Learn how to profile your React application and fix performance problems.
Playing with React suspense and DevTools (
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" (
Jul 28, 2018
Prototype UI built on top of the new React "Profiler" component.
Sneak peek at new React DevTools "profiler" feature (
Jun 21, 2018
Prototype UI built on top of the new React "Profiler" component.
Use React DevTools (
May 14, 2018
This is a quick intro to react devtools.
React Devtools theme editor GUI (
May 30, 2017
Walkthrough video of the new built-in themes editor.
React devtools theme editor preview panel (
May 29, 2017
Another demo of the work-in-progress theme editor for React devtools.
Creating a custom React dev tools theme (
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 (
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.