Kristofer Selbekk Bekker. Bulldog owner. Dad. React enthusiast. 🎩🥂🍔

React DevTools: 5 things you didn’t know you could do

6 min read 1903

React DevTools: 5 Things You Didn't Know You Could Do

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:

  1. Debug performance with React Profiler
  2. Customize your environment with React DevTools themes
  3. Access React components and state from the console
  4. View source like a pro
  5. 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.

Just like the regular JavaScript profiler found in your dev tools of choice, you’ll have to “record” a set of interactions. Once you’ve done that, you’ll see a visualization of each rerender your application goes through, with accurate timing information and color-coded flame graphs. As of April 2019, it even captures screenshots of every DOM update.

React Profiler Flame Graph
Flame graph view of the Profiler

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:

React DevTools Theming Options
The theme selector is hidden behind the cog icon.

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.

We made a custom demo for .
No really. Click here to check it out.

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:

React DevTools Custom Theme Designer
By clicking the pencil icon next to the theme dropdown, you’ll see this feature-rich theme designer

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.

Access 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”:

React DevTools: Show component source
Show InputForm source shows up as a new option when the Babel plugin is applied

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.

useDebugValue

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.

Interaction tracking

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.

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.

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.

Improved tooltips

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.

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?

Full visibility into production React apps

Debugging React applications can be difficult, especially when users experience issues that are hard to reproduce. If you’re interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, try LogRocket.

LogRocket is like a DVR for web 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 — .

Kristofer Selbekk Bekker. Bulldog owner. Dad. React enthusiast. 🎩🥂🍔

Leave a Reply