How to Use React Developer Tools (With Example)

What is React DevTools?

React DevTools (also known as React Developer Tools) is a well-known browser extension that adds React-specific inspection capabilities to our standard browser DevTools. It allows developers to:

• Inspect the React component hierarchy
• View component props and state
• Check hooks and context
• Modify values in real-time for easier debugging

This extension enhances our existing Chrome DevTools with tabs specifically designed to work with React apps.

In this guide, we’ll learn the basics of installing and using React DevTools in Chrome to inspect and modify our components efficiently.

There is a video on this article too. If you want to learn visually, you can watch it here:

Let’s start by discussing how to install React Dev Tools.

How to install React DevTools

To get started with React DevTools, follow these steps:

Step 1: Open the React Developer Tools Chrome extension in the Chrome Web Store

Step 2: Click Add to Chrome

Next, we’ll understand how to use React DevTools to inspect React components in Chrome DevTools.

How to inspect React components in Chrome DevTools

With React DevTools installed, if we start our React app (npm start) and visit the site in Chrome, the React Developer Tools icon in the Chrome menu bar should change from inactive:

To active:

This indicates that the site we are browsing is a React app in the development build. When a page is using the production build of React, the icon will look like this:

Let’s see how to access React DevTools:

Step 1: To open React DevTools, first open Chrome DevTools (View > Developer > Developer Tools). On the same banner as Elements, Sources, Console, etc., there will be two new React tabs: Components and Profiler. These two tabs will only appear on sites using React. If they’re not visible, we’ll need to click on the arrow to see the other tabs.

Step 2: Click on the Components tab

Right now, all we can see is App itself. But we want to see the contents of App as well.

Step 3: In the last image, we can see that the cursor is pointing to a gear icon. Click the gear icon to open the settings and then click on the Components tab in the pop-up window.

Step 4: By default, there is a filter that is causing the host (DOM) nodes to be hidden. Delete this filter for now and then exit the settings window. We can always go back into settings and apply our preferred filters.

Now, we will see a tree of App‘s contents. As we hover over the elements on the left, they are highlighted in the rendered view, similar to Chrome DevTools. If we click on the elements on the left side of the window, their properties are exposed on the right side.

Note: If your Chrome DevTools appear vertically on the left/right side of the window, App and its contents will appear on top, and their properties will be exposed underneath.

We can also use the search box to locate elements by name:

We’re now aware of how to inspect React components using React DevTools, but do we know how to modify them using JavaScript? Let’s check that out.

How to modify React components using JavaScript

With React Developer Tools and the console, it is possible to modify rendered React components. This allows us to experiment with changing component values, calling methods, and testing the interaction between components.

We can access and update a component’s state and props inside the Components tab. Click and edit the props and state from the right side. For state to show up, we’ll first need to initialize the component with some state from inside our files:

We can perform this operation with React Hooks too:

We can also do this by selecting the component, switching over to the console view, and accessing the component using $r. By logging $r, we could see that this was indeed the component selected.

With these tools, we’re now ready to begin debugging our React Apps.

Conclusion

In this tutorial, we covered what React Developer Tools is, how it helps, and how to install and use it to inspect and modify React components in Chrome DevTools.

React Developer Tools is an essential tool for inspecting and debugging React applications. By leveraging its features, we can efficiently troubleshoot issues, modify component states, and enhance our development workflow.

If you want to expand your knowledge of React, check out the Learn React course on Codecademy.

Frequently asked questions

1. Does React Developer Tools work with functional components?

Yes, absolutely. React Dev Tools supports both class-based and functional components, including those using hooks.

2. Can I use React Developer Tools in incognito mode?

Yes, but you must enable the extension for incognito mode manually in your browser’s extension settings.

3. Why isn’t the React icon lighting up in React DevTools?

This usually means your page doesn’t have React loaded, or it’s using a production build that doesn’t expose the required hooks. Make sure React Developer Tools is properly installed and the app is in development mode.

4. How do I turn on React DevTools?

After installation, React DevTools automatically activates when you visit a React application. Look for the React icon in your browser toolbar - it turns blue for development builds and red for production builds. If the icon stays gray, the page isn’t using React, or the extension needs to be enabled in your browser settings.

5. How do I access React Developer Tools?

Right-click on any React app page, select “Inspect” to open Chrome DevTools, then look for the “Components” and “Profiler” tabs alongside Elements, Console, and other tabs. If you don’t see these tabs, click the arrow (>>) to reveal hidden tabs or ensure you’re on a React application.