Debugging React Applications with React DevTools

Introduction

One of the things that make React amazing is that the applications made with React are developed and scale quickly, this introduces small problems in the form of bugs in code unknowingly. The React DevTools can help us to tackle these bugs by allowing us to get an inside view of the current state of each React component.

In React terms, we can have many different kinds of bugs:

• User interface bugs
  • Problems with the look and feel of the app.
• Logic bugs
  • Problem with the behavior of the app.
• Networking bugs
  • Problem with the behavior of a third-party API.
• Regressions
  • Something that was no problem in the past but it is now a problem

We will be learning about React DevTools and once you get the basic idea of DevTools then you will be easily able to solve these bugs.

Prerequisites

There are some prerequisites before you begin solving bugs in react applications

• Access to a web browser that supports the `React DevTools extension.
• Node.js to develop a React application.
• A working react app. (can be Create React App or another boilerplate)
• Familiarity with React's functional components

What is React DevTools and How does it Work?

React Development tools or React DevTools is a browser extension available for Chrome and Firefox. It is a standalone app that allows us to inspect the hierarchy of React components. It also has several tools that are specific to the reaction which helps in better code inspection. This extension displays all the react components and subcomponents that are being rendered on the page.

Installation

Since React DevTools is a browser extension, the simplest way is to install React DevTools through the Chrome web store or Firefox web store.

Otherwise, you can also install it as a global npm package with the following command

After the installation is completed, open the browser developer tools, there you will see two new tabs namely Components and Profiler. These tabs appear only if the webpage you are visiting is made with React

Components Tab

The components tab shows us the component structure of the website we are analyzing. This tab is divided into two panes.

• The left pane This page shows the component structure of the website we are on.
• The right pane The right pane shows the props, hooks, and state of the component that you select along with the list of ancestors that ended up rendering the selected component.

This is a super useful tool because along with showing all the necessary information it also allows us to modify it, this modification is extremely useful for debugging.

DevTools Adjusts Nested Indentation Dynamically

Deeply nested components required both vertical and horizontal scrolling in a previous version of React DevTools, making it difficult to follow large component trees. Nested indentation is now automatically adjusted in DevTools to prevent horizontal scrolling.

Restore the Last Element Selected

When debugging, hitting Reload causes DevTools to return the last selected element to its initial state, this removes the effort of manually selecting the element every time

Functions

The React DevTools provide an easy option for functions such as callback functions or click handlers. DevTools allow us to make the function global by simply right-clicking on it and selecting Store as a global variable. This way we can call this method whenever we want with different arguments.

Improved Support for Hooks

Projects made with React functional components that use hooks can be debugged faster because React DevTools version 4 has the same level of support as props and state.

Profiler Tab

The Profiler in React DevTools is a powerful tool for measuring the performance of React components. It is used to debug performance-related issues. This profiling feature shows us a summary of how our application rerenders.

The Legacy version of DevTools supported profiling but only after it detected a profiling-capable version of React. As a result, it was impossible to profile an application's initial mount. Now, a new section called reload and profile is added to incorporate this functionality.

Step Through Parents (owners’ tree)

We can see a certain component and its subtree easily because of the owner's tree, which hides the remainder of the component tree. Along with the owner's tree, the rendered-by option in the right pane displays the list of owners of the current component.

Access Components and States From the Console

The React DevTools provide a good way to solve a lot of bugs but some of the bugs can be easily fixed with our good old console.log(). DevTools provide a way to directly interact with the components through the console. Open the console and type $r and then we can have access to the instance of that React component. Now we can access the React state, trigger functions, etc directly from the console.

Jump into Source View

Most people aren't aware of how powerful the debugging tools are in modern browsers. You may place breakpoints, step through code execution line by line, check state and props as your app changes, and establish breakpoints. But the thing is, the code compiled by Babel is hard to read. To solve this issue Babel provides a plugin that adds a __source prop to all JSX elements. This is very helpful in the development mode as it allows DevTools to link the current component directly to the source code.

For using this feature we have to install babel-plugin-transform-react-jsx-source with the following command

After installation update the plugins object in the .babelrc configuration file

Now when you right-click on a component in the component tree, you will get a new option Show <component> source. Clicking this will take you directly to the browser source view where you can perform operations on the code.

Interaction Tracking

In some complex settings, it becomes difficult to figure out why a commit or render is taking more than the expected time. To help with this issue React DevTools have Interaction Tracking which is a programmatic API that allows us to place labels on different events in our app.