This page looks best with JavaScript enabled

Top five useful Chrome Dev Tools tips for React

 ·  ☕ 5 min read  ·  ✍️ Iskander Samatov

React Chrome Dev Tools


There are many tips for Chrome’s Dev Tools out there, but not all of them are useful for React. In this post, I cover five Dev Tools tips tailored for React development.

The list will be a mix of native Chrome Dev Tools features and handy extensions.

Printing component state to the console

If you’re working with React, you are probably using React Dev Tools daily. If you’re not, then you should. The extension helps you view and debug the state of your components.

Upon installing the React Dev Tools, you get two additional tabs in your dev tools, Components and Profiler. Both of them are valuable, but with totally different use-cases. We will cover the Profiler in a minute.

One thing you might not be aware of, though, is that you can print the state of your components to the console.

There are several reasons why you might want to do that. React Dev Tools don’t always display the full information about your components. In those cases, you can print the component state to the console to see more data. For example, take a look at this view:

React Components tab
React Components tab

Say you want to see in more detail the children of the Menu component. Components debugger only shows that the children prop is an array of ForwardRefs. To take a closer look at the children, we can print the state of the Menu component using a special console command.

Select the component by clicking on it and type $r in the console.

Pro tip: To have both console logs and Components debugger in the same view, click the Esc button:

Components console output
Components console output

As you can see, we can expand and get more information about the children of the Menu this way.

Profiler

Profiler is one of your best tools when it comes to improving performance.

As I mentioned, it comes as a part of React Dev tools and allows you to track the renders of the components.

Getting started with it is simple. After installing React Dev tools, open up the Profiler tab and click on the Start Profiling button:

React Profiler start
React Profiler start

Now you can start interacting with your app to measure its performance. When you finish, click on the Stop profiling button. Here’s what you will see:

React Profiler end
React Profiler end

What you get is an interactive overview of the rendering activity of your component tree. Each component is colored according to the number of times it re-rendered while you were profiling. If it’s grey, it means it didn’t re-render at all during the interaction.

If you click on any component, the profiler will show the timestamp and the reason for each re-render.

If your React application has performance issues, that’s most likely due to redundant re-renders. In that case, use the Profiler to track down components that render more than necessary and work on lowering the number of re-renders. There are different tools you can use for optimization like React.memo , useCallback , and others.

Network Conditions

It’s important to test your React application against different network conditions. When you’re developing locally on a computer with a fast connection speed, things will run smoothly. That might make you miss edge-cases that users with worse connections will face.

More than half of the total amount of online users access their services through mobile devices. Usually, those devices have less than perfect connection conditions.

Luckily you can use the Network Conditions option in Dev Tools to simulate different connection speed:

Network conditions option
Network conditions option

As you can see, it’s set to No throttling by default. To emulate slower network connections, you can use different presets or even create your own.

When building loading screens and other async interactions, it’s good to test them against at least a Slow 3G connection as well.

Custom Formatters

Custom formatters are hidden gems of Chrome Dev Tools. They give developers control over how objects look in the debugger and console.

Custom formatters are disabled by default, so you will need to go to Settings -> Preferences and enable them:

Custom formatter settings
Custom formatter settings

So why use them? Well, you could write your own formatter for objects that are gnarly and hard to debug. One of the common use-cases for custom formatters is recursively displaying deeply nested objects. There are plenty of tutorials for writing custom formatters.

But for me, the main advantage is the extensions that are built on top of them. One great example of such an extension is Immutable.js Object Formatter . If you’ve worked with Immutable.js, you know how annoying debugging can get. The extension solves the problem by nicely formatting the immutable data structures you output to the console:

Immutable.JS formatter
Immutable.JS formatter

Apollo Chrome extension

This is a must-have extension for me if I’m working with GraphQL. If you install this extension, you’ll also get an additional Apollo tab in your Dev Tools. Here’s what it looks like

Apollo extension
Apollo extension

This interface will be familiar to you if you’ve ever worked with the graphiql editor. Clicking on the Build button opens up an interactive sidebar with all the available queries and mutations you can use.

Running Apollo
Running Apollo

The best part is that the extension uses the current user session. That allows you to see how the queries execute with the current user’s permissions.

The downside of this extension, as you probably guessed by now, is that it only works with the Apollo GraphQL client.

Bonus: Redux Dev Tools

Initially, I did not list Redux Dev tools because, at this point, it’s hard to find a React developer that’s not aware of it. But it might be worth briefly mentioning for people who are new to React or Redux.

The extension makes it infinitely easier to work with Redux. It allows you to view all the triggered actions and their payloads in real-time, among many other features.


These are the top five Chrome Dev Tools tips that help me with my React work. I hope you found this list useful!

Share on

Software Development Tutorials
WRITTEN BY
Iskander Samatov
The best up-to-date tutorials on web and mobile development.