Demystifying Debugging With React Developer Tools

To ensure that React Developer Tools can monitor reducer changes and show the actual state of the context, we’ll adjust the LoginForm.js file to use the logIn action as the onSubmit callback:

The first tool worth mentioning is a first-class performance analyst, why-did-you-render. It’s not as simple to use as React Developer Tools, but it enhances render monitoring by explaining each render with human-readable text, with state/props differences and ideas on how to fix issues.

At this point, we should note that tracking props and state is possible via console.log. However, React Developer Tools offers two advantages over this approach:

• First, logging to the console is unrealistic when scaling a project. The more logs you have the more difficult it is to find what you need.
• Second, monitoring components’ states and properties is only part of the job. If you run into a case when your application works correctly but is slow, React Developer Tools can identify certain performance issues.

A utility called useDebugValue partially solves this problem. It can set the display name for custom hooks. For instance, you can set the display name Password for a custom usePassword hook.

Monitoring Component Props

Pay attention to the component declaration approach. We’re using the named component (const LoginForm => …) to see its name in the dev tools. Anonymous components are displayed as Unknown.

When compiled, your app appears in your browser:

We can monitor not only state changes, but also component props. We’ll first modify LoginForm:

The create-react-app utility tool can smoothly bootstrap an app in seconds. As a prerequisite, install Node.js on your machine, then create your app via the command line:

import { AuthenticationContextProvider } from "./AuthenticationContext";import LoginForm from "./LoginForm";const App = () => {  return (    <AuthenticationContextProvider>      <LoginForm defaultUsername="[email protected]" />    </AuthenticationContextProvider>  );};export default App;

Redux is a well-known state management library used by many React engineers, and you can learn more about it by reading my previous article. In short, it consists of two parts: actions and states. Redux DevTools is a user interface representing actions triggered in your app and the consequent state. You can see the add-on in action on a Medium webpage:

LoginForm component will be our debugging target, so let’s render it inside App.js:

Let’s add them to our application. First, we will have to add a file with the context. The context we’re going to make will be used for logging a user in and providing the information of the login action. We’ll create the AuthenticationContext.js file with the following content:

import { useState } from "react";const LoginForm = () => {  const [username, setUsername] = useState("");  const [password, setPassword] = useState("");  const [rememberMe, setRememberMe] = useState(false);  return (    <form      style={{        display: "flex",        flexDirection: "column",        gap: "8px 0",        padding: 16,      }}    >      <input        name="username"        placeholder="Username"        type="text"        value={username}        onChange={(e) => setUsername(e.currentTarget.value)}      />      <input        name="password"        placeholder="Password"        type="password"        value={password}        onChange={(e) => setPassword(e.currentTarget.value)}      />      <div>        <inputid="rememberMe"name="remember_me"type="checkbox"checked={rememberMe}onChange={() => setRememberMe(!rememberMe)}        />        <label htmlFor="rememberMe">Remember me</label>      </div>      <input type="submit" name="login" value="Log in" />    </form>  );};export default LoginForm;

Let’s move along and learn more about the actual developer tools. First, open the developer console (Option + ⌘ + J on Mac or Shift + CTRL + J on Windows/Linux). There are multiple tabs available (Elements, Console, etc.). The one we need at this stage is Components:

{ value: { error: undefined, loading: false, token: undefined, logIn: ƒ () {} }}

In the src folder, remove App.css, App.test.js, and logo.svg, then add a new LoginForm.js file as follows:

With our extension up and running, next we’ll create an application to debug.

Creating a Test Application

The most experienced software engineers leverage the power of developer tools to save time and increase productivity. The importance of these tools multiplies when the time to debug arrives, as debugging may be the most difficult aspect of software development.

import { useCallback, useState } from "react";import { useAuthentication } from "./AuthenticationContext";const LoginForm = ({ defaultUsername }) => {  const { logIn } = useAuthentication();  const [username, setUsername] = useState(defaultUsername);  const [password, setPassword] = useState("");  const [rememberMe, setRememberMe] = useState(false);  const onSubmit = useCallback(    async (e) => {      e.preventDefault();      await logIn({ username, password, rememberMe });    },    [username, password, rememberMe, logIn]  );  return (// ...

Let’s start with the feature you’ll be using most of the time: checking/editing the state of a component. To demonstrate this functionality, we will make some changes to the test project. We will replace the React placeholder homepage with a simple login form holding three state pieces: a username string, a password string, and a boolean representing a “Remember me” setting.

Return to the browser window with the Components tab open. Now, next to the App component you’ll see the LoginForm component. Clicking on LoginForm will reveal all the state items we’ve created using useState hooks. Since we haven’t yet entered any text or check box inputs, we see two empty strings and false:

Let’s look at the second hook of the LoginForm component:

import LoginForm from "./LoginForm";const App = () => {  return <LoginForm />;};export default App;

There is just a single component available at this point. That’s correct because our test application has only one component rendered App (see src/index.js). Click on the component to show its props, the version of react-dom used, and the source file.

Tracking Component State

Type anything in the username and password fields or click on the check box to see the values in the debugging window update:

Web developers must determine the root cause of complex problems in an app on a daily basis. One typical method on the front end is to use multiple console.log statements and check the browser’s console. This approach can work, but it is not particularly efficient. Fortunately, React Developer Tools makes things easier and allows us to:

• See the React component tree.
• Check and update the state/props of any component in the tree.
• Track the time for a component to render.
• Detect why a component has been re-rendered.

Now, if you go back to the browser and click Log in, you’ll see that token, which used to be undefined, has an updated value in Context.Provider’s props.

There are two nodes added: AuthenticationContextProvider and Context.Provider. The first one is the custom provider we’re using to wrap the application in App.js file. It contains a reducer hook with the current state. The second one is the context representation showing the exact value provided throughout the component tree:

Now, whenever you visit a website that is using React, the extension icon you pinned in step 6 will change its appearance: