LuisLlamas Logo
react-developer-tools

What are React Developer Tools and how to use them

  • 4 min
  • Intermediate

If you come from programming with Vanilla JS, your number one debugging tool is probably console.log() (and let’s not fool ourselves, it’s still useful).

But in React, console.log falls short. React works with a component tree structure, internal states and lifecycle events that are not directly visible in the browser’s traditional element inspector.

If you inspect the HTML, you’ll see a bunch of <div> tags and strange classes, but no trace of your App, Header or UserList components.

To work professionally, we need X-ray vision. We need the React Developer Tools.

Installation

React Developer Tools (or “DevTools” for short) is an official extension maintained by the Meta (Facebook) team. It is available for the major browsers.

If you are using a Chromium-based browser (Chrome, Edge, Brave) or Firefox, installation is trivial from their respective extension stores.

Once installed, you will see the React icon appear in the extension bar. If you enter a website built with React (like Airbnb, Netflix, or the one we just created with Vite), the icon will light up.

The interesting part happens when you open the Developer Tools (F12 or Ctrl+Shift+I). You will see two new tabs have appeared: Components and Profiler.

The Components Tab

This is the tab where we will spend 90% of our time. While the browser’s “Elements” tab shows us the real DOM (the final HTML result), the Components tab shows us the React component tree.

Here we will see our components exactly as we wrote them in our code: <App>, <Button>, <Card>, etc.

Inspecting Props and State

If you select a component in the tree on the left, a details panel opens on the right that is pure gold. Here we can see:

  1. Props: The data the component is receiving from its parent.
  2. Hooks: Here we will see internal state (State), refs, effects, etc.
  3. Rendered by: Which parent component rendered this one.

It’s very useful for answering questions like: Why isn’t the error message showing? Ah, because the isError state is still false.

The best part of this panel is that it is interactive. You can modify the value of a prop or a state (State) in real time by clicking on it, and you’ll see the application react instantly without reloading the page.

Quick Navigation

At the top left of the Components panel, you have a cursor/arrow icon (similar to the element inspector).

If you activate it and click on any element on your web page, the DevTools will automatically take you to the React component that generated that piece of UI.

The $r Trick

When you select a component in the Components tab, React automatically assigns that instance to a global variable called $r.

If you switch to the Console tab and type $r, you get direct access to the actual component instance.

// In the browser console
> $r
< { props: {...}, hooks: [...], ... }

// You can access its props directly
> $r.props.nombre
"Luis"
Copied!

This is very useful when you want to call component methods or analyze very large data objects that are awkward to read in the side panel.

The Profiler Tab

We will only mention it briefly, as it becomes more relevant in larger applications.

The Profiler is used to measure performance. It allows us to record a usage session and see exactly how long each component takes to render and, most importantly, why it rendered.

It is the tool we will use in the future to detect “bottlenecks” when we notice our application is running slow.

Useful Settings

If you click the gear icon ⚙️ inside the Components tab, you can configure its behavior. There is one option I recommend activating when you are learning about the lifecycle:

  • “Highlight updates when components render”: When activated, every time a component renders, React will draw a colored outline around it on the screen.

It is very visual and will help you understand when and how often your views are being updated.

On this page