Using React DevTools

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

Articles & Tutorials

Profiling React.js Performance (addyosmani.com)
Apr 08, 2020
Today, we'll look at measuring React component render performance with the React Profiler API, measuring interactions with React's new experimental Interaction Tracing API and measuring custom metrics using the User Timing API.
  • Addy Osmani
Make your own DevTools (kentcdodds.com)
Feb 17, 2020
How creating DevTools specific for your own app can improve your productivity.
How to use the React Developer Tools (flaviocopes.com)
Nov 10, 2019
Learn this very useful tool we absolutely need to install when building a React application.
Debug React applications with the new React DevTools (blog.logrocket.com)
Oct 01, 2019
In this tutorial, I’ll highlight the notable additions to the latest React DevTools release, Version 4 and demonstrate a few ways you can leverage its features to better debug your React apps with it.
  • Peter Ekene Eze
React DevTools: What is new in V4 (ultimatecourses.com)
Sep 27, 2019
With the release of Devtools v4, the inspection powers we as developers have at our fingertips have increased in leaps and bounds. Let’s have a quick look at some of the highlight in the new and shiny Devtools!
  • Almero Steyn
React Dev Tools — Debug Like a Ninja (dev.to)
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 (kentcdodds.com)
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 (reactjs.org)
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 (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

Profiling React rendering performance (youtube.com)
Oct 03, 2019
We are going to use Chrome Perfomance Tab and new React DevTools Profiler plugin to profile a real application. We will learn how to use these tools to identify rendering problems and make user experience really smooth.
  • Sergey Ryzhoy
What's New with React Dev Tools 4 (youtube.com)
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 (youtube.com)
Jun 17, 2019
Learn how to profile your React application and fix performance problems.
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

Brian Vaughn on Fast Refresh for Web and Concurrent React Dev Tools (reactpodcast.com)
Nov 21, 2019
Brian Vaughn joins us for an update on React Developer Tools. We talk about Fast Refresh for the web, New developer convienciences around codemods, And new React Dev Tools features to help you profile, suspend component trees, and find your way around unfamiliar React apps.
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.