Editor’s note: This React DevTools tutorial was last updated on 27 May 2021 but may still include some information that is out of date. For a comprehensive list of features shipped with recent versions of React DevTools, see the official changelog.
If you’re a React developer, chances are you’ve tried the official React DevTools. This browser extension is available for Chrome and Firefox and is designed to help you debug React applications in environments such as a mobile browser, Safari, an embedded webview, an iframe, etc.
New features are added to React DevTools all the time. React DevTools 4 was officially released in August 2019, bringing significant performance improvements, a revamped navigation experience, and full support for React Hooks. Since then, the React team has continuously refined DevTools with regular updates and improvements.
In this guide, we’ll cover five essential React DevTools features that you might not have tried yet or didn’t even know existed. We’ll also speculate as to what the future of React DevTools will bring.
We’ll demonstrate how you can use React DevTools to:
- Debug performance with React Profiler
- Customize your environment with React DevTools themes
- Access React components and state from the console
- View source like a pro
- Access secret React APIs
1. Debug performance with the React Profiler
In September 2018, the React team introduced an incredibly powerful feature for debugging performance-related issues called the React Profiler. When used with React 16.5 or later, React DevTools provides you with a profiling feature, which shows you a summary of how your application rerenders.
For a deeper dive into the React Profiler, I recommend watching React core team member Brian Vaughn’s recorded live stream in which he demonstrates how to use the Profiler to locate and squash pesky performance bugs.
2. Customize your environment with React DevTools themes
Are you one of those people that likes to spend a ton of time making your development environment look just right? If so, you’ll be happy to learn that React DevTools is themable. You can find theming options in your references:
It follows your Chrome theme by default, so it’ll respect your dark mode preferences if applicable. But why stop there? React DevTools comes preinstalled with 18 different themes, including some of the most popular themes for your favorite editors. If that’s not enough, there’s even a UI to implement your very own theme right in the extension.
To start playing around with themes, click the cog icon on the right side of the main panel. You’ll see a settings panel that lets you pick your preinstalled theme of choice.
By clicking the pencil icon on the right of the dropdown, you’ll get access to the custom theme designer as well:
3. Access React components and state from the console
Although you can find and fix most issues directly in React DevTools, there are some debugging that just works better with a good old
console.log. One of my favorite features is that DevTools actually gives you the option to interact with the component instances via the console itself.
Select a component in React DevTools and pop open the console (hitting the escape key lets you see both at once). Type in
$r, and you’ll have access to the instance of that React component from the console.
This gives you a lot of debugging power. With DevTools, you can access React state from the console, as well as trigger callback methods and even augment functionality.
If you’re interested in a particular function, such as a click handler or callback function, React DevTools also provides a nice little convenience feature. If you right-click a function in the props or state overview, you can make it available as a global variable. This way, you can call it whenever you want with different arguments and contexts.
4. View source like a pro
The debugging tools in modern browsers are much more powerful than most people are aware of. You can set breakpoints, inspect state and props as your app changes, and step through code execution line by line. However, code compiled with Babel tends to be hard to read and a pain to follow. Wouldn’t it be great if we could actually view the source the way we wrote it?
Babel provides a plugin that adds a
__source prop to all JSX elements. This lets the React DevTools link directly to the source code of the component you’re inspecting. It slows down your application a bit, but it works great in development mode.
To use this feature, install
babel-plugin-transform-react-jsx-source, apply it to your
.babelrc file, and restart your dev server. When you right-click a component in the component tree, you’ll see a new option : “Show <component name> source”:
This enables you to jump into the browser’s source view, where you can inspect, set breakpoints and alter the code altogether.
If you use the popular bootstrap tool Create React App, you’ll find that this works out of the box. No config, no plugins, no nothing. Just jump straight to source!
5. Access secret React APIs
Did you know there are a few top-level exports from React made specifically for interacting with React DevTools? You probably won’t need them very often, but they come in incredibly handy when you do.
When you’re creating custom React Hooks that are shared with other developers, it’s often a good idea to use the
useDebugValue hook. This hook adds an informative label to the hook that shows up in the React DevTools.
In some situations, understanding why a particular commit or rerender took longer than expected can be a bit complicated. That’s why the React DevTools supports so-called interaction tracking. This is a programmatic API that lets you place labels on different events in your app and trace their performance.
To get started, install the
scheduler package and import the
unstable_trace method. This method accepts a label (“login button clicked,” for example), a timestamp, and a callback. What happens in the callback is traced at a much more detailed level than previously possible.
Debug your React production build
If you’re experiencing a performance regression that’s only present in the production build of your application, you might want to try profiling your application. Unfortunately, React doesn’t include profiling support for the production build of React — at least, not by default.
Luckily, you can still opt into having profiling available in your production app. You might not want to ship it to your customers, but testing it out locally or in a QA environment will help you out quite a bit.
The future of React DevTools
As previously mentioned, React DevTools is constantly under heavy development. React DevTools version 4, released in August 2019, introduced a host of major improvements, a few of which we’ll list below. The most recent React DevTools update, version 4.13.5, was released on 25 May 2021. The React DevTools changelog has a comprehensive list of updates and improvements issued with new versions of the extension.
React Core team member Dan Abramov has spent the last couple of weeks helping out with shipping features, and a new major rewrite of the React DevTools is starting to take shape. Here’s a preview of some of the features we’re looking forward to the most:
Legacy React support
The current version of React DevTools only supports React 16 and up. In the new major release, however, supports React 0.13, 14 and 15 as well. This is great news for anyone stuck maintaining or bug fixing a legacy React codebase.
I guess it’s worth mentioning this explicitly in the thread as well: The new DevTools will support older React versions (probably v13+)
To be transparent, I had initially hoped to avoid this, but it feels like the “right thing to do” for the community, etc. https://t.co/pjYn1FYQic
— Brian Vaughn (@brian_d_vaughn) April 18, 2019
Collapsed or expanded tree view
When you open the React DevTools, you can now decide whether you want the tree view of your components to be collapsed or expanded by default. You can change your preference from the new and improved settings panel, found behind the cog icon.
⚛️🛠 Some people prefer a Components tree that’s collapsed by default. Others prefer one that’s expanded.
(V) (°,,,,°) (V) Why not both? pic.twitter.com/h5QkG0Yla9
— Brian Vaughn (@brian_d_vaughn) April 16, 2019
Simplified tree view
Recent versions of React DevTools feature a slightly simplified tree view. No inline props will be shown (except the key, if applicable), and pure DOM nodes (like
<div /> ) will be shown.
This is a fairly controversial change that was met with some blowback from the community. On the plus side, however, the simplified tree leads to better performance and a more manageable tree-view UI.
That being said, I expect that a few of the changes will be controversial.
1. The new DevTools does not show inline props, only the name and key (if there is one).
2. The new DevTools does not show DOM elements in the Components tree.
— Brian Vaughn (@brian_d_vaughn) April 18, 2019
Did you know React DevTools has explanatory tooltips for most of its controls? Neither did most users. The native tooltips had a long delay, which led many users to assume there weren’t any tooltips at all. That’s why you’ll find new and improved tooltips in the upcoming version, courtesy of React Training-boss Ryan Florence and his Reach UI library.
Look at how buttery smooth these things are 😍 pic.twitter.com/h7nyNW9hSg
— Brian Vaughn (@brian_d_vaughn) April 20, 2019
The features listed above are just some of many that shipped with recent versions of React DevTools.
About Brian Vaughn and React DevTools
As you might have noticed, Brian Vaughn’s name pops up a lot when we speak about the React DevTools. Brian works for Facebook, and is a React Core team member. He’s the main developer of the React DevTools, and has done a tremendous effort on creating helpful tooling for the average React developer. If you want to become a DevTools expert, I recommend you check out a few of his talks on the subject. Brian has also done a few podcast interviews that are worth checking out.
React DevTools has made it a lot easier to build, ship and debug React applications than ever before. Thanks to the new Profiler API, we can even squash most performance hiccups in no time! It’s an incredibly important tool to learn how to use and master, for novices and pros alike.
What are your favorite features in React DevTools?
LogRocket is like a DVR for web and mobile apps, recording literally everything that happens on your React app. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app's performance, reporting with metrics like client CPU load, client memory usage, and more.
The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.
Modernize how you debug your React apps — start monitoring for free.