Chapter 8. Debugging Components in the Browser

If you're developing a React web application, you need browser-based tooling to help you see what's happening on the page from the perspective of a React developer. Web browsers today have amazing developer tools installed by default. These are essential if you're doing any kind of web development because they expose what's really going on in terms of DOM, styles, performance, network requests, you name it.

With React, you still need all of this tooling, but you need more than that. The core tenet of React is declarative markup within JavaScript components. If this abstraction isn't present in the web browser tooling that developers rely on for everything else, life is more difficult than it needs to be.

In this chapter, you'll learn:

• Installing the React Developer Tools browser add-on
• Locating and selecting React components
• Manipulating component props and state
• Profiling component performance

Installing the React Developer Tools add-on

The first step to getting started with React tooling is to install the React Developer Tools browser extension. I'll be using Chrome in the examples throughout this chapter as this is a popular choice. React Developer Tools is also available as an extension for Firefox (https://addons.mozilla.org/en-US/firefox/addon/react-devtools/).

To get the extension installed in Chrome, visit https://chrome.google.com/webstore/category/extensions and search for react developer tools:

The first result should be the extension that you want. Click on the ADD TO CHROME button to install it:

Chrome might warn you that it can change data on websites that you visit. Don't worry, the extension is only activated when you visit React apps:

Once you click on the Add extension button, the extension is marked as installed:

You're all set! With the React Developer Tools Chrome extension installed and enabled, you're ready to start inspecting React components on the page, just...

Working with React elements in React Developer Tools

Once you've installed React Developer Tools in Chrome, you'll see a button in the toolbar located to the right of the browser address bar. Here's what mine looks like:

I have several buttons for browser extensions here. You can see the React Developer Tools button at the far right—the one with the React logo. When the button is greyed-out like this, it means that you're not currently on a page running a React application. Go ahead and try clicking on it while you're on some random page:

Now let's use create-react-app to create a new application, the same process you've been following throughout this book:

create-react-app finding-and-selecting-components

Now fire up the development server:

npm start

This should take you directly to the browser page with your React application loaded up in a new tab. Now the React Developer Tools button should look different:

There you go. Since you're on a page that's running a React application, the React Developer...

Inspecting component properties and state

React follows a declarative paradigm so it helps to have tooling in place like React Developer Tools that lets you see your JSX markup in the browser. This is only the static aspect of your React app—you declare the elements of your UI and let data control the rest. Using the same tool, you can watch props and state as they flow through your app. To demonstrate this, let's create a simple list that fills itself up once mounted:

import React, { Component } from 'react'; 
import MyItem from './MyItem'; 
 
class MyList extends Component { 
  timer = null; 
  state = { items: [] };
  componentDidMount() { 
    this.timer = setInterval(() => { 
      if (this.state.items.length === 10) { 
        clearInterval(this.timer); 
        return; 
      } 
 
      this.setState(state => ({ 
        ...state, 
        items: [ 
          ...state.items, 
          { 
            label: 'Item ${state.items.length + 1}', 
            strikethrough: false ...

Manipulating element state values

React Developer Tools lets you inspect the current state of elements that you select. You can also monitor state changes as they happen, as was demonstrated in the preceding section where you had set up an interval timer that changed the state of your element over time. The state of an element can also be manipulated in limited ways.

For this next example, let's modify the MyList component to remove the interval timer and simply populate the state when it's constructed:

import React, { Component } from 'react'; 
import MyItem from './MyItem';
class MyList extends Component { 
  timer = null; 
  state = { 
    items: new Array(10).fill(null).map((v, i) => ({ 
      label: 'Item ${i + 1}', 
      strikethrough: false
    })) 
  }; 
 
  onItemClick = index => () => { 
    this.setState(state => ({ 
      ...state, 
      items: state.items.map( 
        (v, i) => 
          index === i 
            ? { 
                ...v, 
                strikethrough...

Profiling component performance

Profiling the performance of your React components is made easier by React Developer Tools. It makes it easier to spot updates that cause elements to re-render when no re-render is actually necessary. It also makes it easier to collect the amount of CPU time that a given component spends, and where it spends it during its lifespan.

Although React Developer Tools does not include any memory profile tooling, we'll look at how you can use the existing memory developer tool to specifically profile for React elements.

Removing reconciliation work

Reconciliation is what happens when a React element is rendered. It first computes the virtual DOM tree that will render the element's current state and props. Then, this tree is compared to the existing tree for the element, assuming it has been rendered at least once already. The reason that React does this is because reconciling changes like this in JavaScript, before interacting with the DOM, is more performant. DOM interactions...

Summary

In this chapter, you learned about React tooling that is available directly through the web browser. The tool of choice here is a Chrome/Firefox extension called React Developer Tools. This extension adds React-specific capabilities to the browsers native developer tools. After you installed the extension, you learned how to select React elements and how to search for React elements by tag name.

Next, you looked at the properties and state values of the selected React component in React Developer Tools. These values are kept up to date automatically, as they're changed by your application. You then learned how to directly manipulate element state directly within the browser. The limitation here being that you can't add or remove values from collections.

Finally, you learned how to profile your React component performance within the browser. This isn't a React Developer Tools feature, but something the develop build of React 16 does automatically. Using profiles like these allows you...