React Developer Tools

React Developer Tools is made specifically for React applications.

The browser's normal developer tools show HTML, CSS, network requests, and JavaScript. React Developer Tools adds a React view on top of those tools.

For Pizza Palace, the component tree may look like this:

App
├── Header
├── PizzaMenu
│   ├── PizzaCard
│   ├── PizzaCard
│   └── PizzaCard
├── CartSummary
└── Footer

You can select one PizzaCard and inspect its name, price, size, and local quantity.

Main Features

• Components: explore the component tree.
• Props: inspect data received from a parent.
• Hooks: inspect state stored by hooks.
• Profiler: record which components render and how long they take.

Use React Developer Tools when you need to understand what React sees—not only what the browser displays.

---

Install React Developer Tools only from your browser's official extension store.

• Google Chrome
• Mozilla Firefox
• Microsoft Edge

Installation Steps

1. Open the correct link for your browser.
2. Select Add or Install.
3. Confirm the browser message.
4. Close and reopen Developer Tools if it was already open.
5. Refresh your React application.

You normally install the extension once. You do not install it separately inside every React project.

---

Open the pizza-ordering-app project in Visual Studio Code.

Open a terminal in the project folder and run:

npm run dev

Vite prints a local address similar to:

Local: http://localhost:5173/

Open the address shown by your own terminal.

Keep the terminal running while you use the application. Stopping the terminal also stops the Vite development server.

---

First open the browser's Developer Tools:

Look for the Components tab. You may also see a Profiler tab.

The Components tab is the main tool for this lesson. It displays React components rather than only HTML elements.

If the tab is hidden, use the » overflow menu in Developer Tools. If it is still missing, refresh the page and confirm that the extension is enabled.

---

Create three simple Pizza Palace components.

Header.tsx

export default function Header() {
  return (
    <header>
      <h1>Pizza Palace</h1>
    </header>
  );
}

PizzaCard.tsx

export default function PizzaCard() {
  return (
    <article>
      <h2>Margherita</h2>
      <p>Price: 8.50 €</p>
    </article>
  );
}

App.tsx

import Header from "./components/Header";
import PizzaCard from "./components/PizzaCard";

export default function App() {
  return (
    <div>
      <Header />

      <main>
        <PizzaCard />
        <PizzaCard />
      </main>
    </div>
  );
}

In the Components tab, you should see:

App
├── Header
├── PizzaCard
└── PizzaCard

Each PizzaCard line represents a separate component instance.

---

Props are values passed from a parent component to a child component.

PizzaCard.tsx

interface PizzaCardProps {
  name: string;
  price: number;
}

export default function PizzaCard(props: PizzaCardProps) {
  return (
    <article>
      <h2>{props.name}</h2>
      <p>Price: {props.price} €</p>
    </article>
  );
}

App.tsx

<PizzaCard name="Margherita" price={8.5} />
<PizzaCard name="Pepperoni" price={10.5} />

Select the first PizzaCard in the Components tab. Its props should contain values similar to:

name: "Margherita"
price: 8.5

Select the second card. You should see Pepperoni and 10.5.

If the page displays the wrong price, checking props tells you whether the wrong value came from App.

---

State stores information that a component owns and can update.

Add a quantity counter to PizzaCard:

import { useState } from "react";

interface PizzaCardProps {
  name: string;
  price: number;
}

export default function PizzaCard(props: PizzaCardProps) {
  const state = useState(1);
  const quantity = state[0];
  const setQuantity = state[1];

  function addOne() {
    setQuantity(quantity + 1);
  }

  return (
    <article>
      <h2>{props.name}</h2>
      <p>Price: {props.price} €</p>
      <p>Quantity: {quantity}</p>
      <button onClick={addOne}>Add one</button>
    </article>
  );
}

Select the component and find its Hooks section. The exact label can vary by extension version, but you should see the current state value.

Click Add one. The displayed quantity and the inspected state should both change from 1 to 2.

---

The same PizzaCard now contains both props and state.

Clicking Add one changes quantity, but it does not change name or price.

This makes React Developer Tools useful when you are unsure whether a value belongs to the parent or the child.

---

Two PizzaCard components can use the same function but keep separate state.

export default function App() {
  return (
    <main>
      <PizzaCard name="Margherita" price={8.5} />
      <PizzaCard name="Pepperoni" price={10.5} />
    </main>
  );
}

Click Add one only on the Margherita card.

In the Components tab:

• the Margherita instance should have quantity 2;
• the Pepperoni instance should still have quantity 1.

Always select the correct component instance before reading its props or state.

---

The two toolsets work together.

For example, the Elements tab shows the final <article> produced by PizzaCard. The Components tab shows that the article came from PizzaCard and displays the component's data.

---

Imagine the Pepperoni pizza incorrectly displays 105 €.

<PizzaCard name="Pepperoni" price={105} />

Select that PizzaCard in the Components tab and inspect price.

If React Developer Tools shows 105, the child received the wrong prop. Check App, the menu data, or the API response that supplied it.

If the prop is 10.5 but the page still displays 105, inspect the rendering calculation inside PizzaCard.

This simple check helps you decide where to search next.

---

Vite React projects often wrap App in StrictMode:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.tsx";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <App />
  </StrictMode>
);

StrictMode enables extra development checks. During development, React may call some rendering logic more than once to reveal mistakes.

This does not mean that customers will necessarily see duplicated pizza cards. Do not remove StrictMode only because a development log appears twice; first understand which check is running.

---

The Profiler records component rendering activity.

Basic workflow:

1. Open the Profiler tab.
2. Start recording.
3. Change a pizza quantity or menu filter.
4. Stop recording.
5. Inspect which components rendered.

The Profiler is useful when an interface feels slow or a large menu renders more often than expected.

Do not optimize only because a component rendered again. First confirm that there is a real, measurable performance problem.

---

Imagine this component structure:

App
├── Header
├── PizzaMenu
│   ├── PizzaCard
│   ├── PizzaCard
│   └── PizzaCard
├── CartSummary
└── CheckoutForm

React Developer Tools can help you inspect:

• PizzaCard: name, price, size, vegetarian status, and local quantity;
• PizzaMenu: the list of pizzas and the selected filter;
• CartSummary: cart items, quantities, and total;
• CheckoutForm: delivery or pickup choice and form state;
• App: shared state and parent-child relationships.

Inspect the smallest component related to the visible problem, then move upward to its parent if the received data is wrong.

---

The Components Tab Is Missing

• Confirm that React Developer Tools is installed and enabled.
• Refresh the React page.
• Reopen Developer Tools.
• Check the » overflow menu.
• Confirm that the current page is a running React application.

The Application Is Not Running

Run npm run dev inside the folder containing package.json, then open the address printed by Vite.

No Components Are Displayed

Check the browser console for application errors. React must render successfully before its component tree can be inspected.

The Wrong PizzaCard Is Selected

Select each instance and compare its props. Components with the same name can still receive different values and store different state.

Props or State Look Different from the Lesson

The extension interface can change between versions. Look for the values themselves rather than expecting every label and panel to be identical.

---

This exercise verifies the complete workflow from installation to debugging.

Part A — Install and Start

1. Install React Developer Tools from your browser's official extension store.
2. Open pizza-ordering-app in Visual Studio Code.
3. Run npm install if the project dependencies are not installed.
4. Run npm run dev.
5. Open the local Vite address.
6. Open Developer Tools and find the Components tab.

Part B — Build the Test Component

Use the stateful PizzaCard from sections 6 and 7. Render it twice:

<PizzaCard name="Margherita" price={8.5} />
<PizzaCard name="Pepperoni" price={10.5} />

Part C — Verify the Component Tree

You should find App and two PizzaCard instances. Select each card and confirm that its name and price props are different.

Part D — Verify State

Click Add one on Margherita twice. Confirm:

• the page displays quantity 3 for Margherita;
• the Margherita state is 3;
• the Pepperoni state remains 1.

Part E — Find an Intentional Error

Temporarily change Pepperoni's price to 105. Refresh the page, select the Pepperoni component, and confirm that its prop is 105.

Correct the value back to 10.5 and confirm that the component receives the corrected prop.

Part F — Record One Update

Open the Profiler, start recording, click Add one, and stop recording. Confirm that the recording contains the update.

Completion Checklist

• [ ] The Components tab is visible.
• [ ] App and both PizzaCard instances appear.
• [ ] Props show the correct pizza names and prices.
• [ ] Each card keeps independent quantity state.
• [ ] The intentional price error can be found and corrected.
• [ ] The Profiler records a quantity update.

When every item is checked, React Developer Tools is installed and working correctly.

---

• React Developer Tools adds React-specific tabs to the browser's Developer Tools.
• The Components tab displays the component tree.
• Select one component instance to inspect its props and state.
• Props come from a parent; state belongs to the component storing it.
• Separate component instances can have separate state.
• Inspect received data before changing rendering code.
• Use the Profiler to investigate measured performance problems.
• The browser tools and React Developer Tools complement each other.

---

• Official React Developer Tools guide
• React documentation
• Chrome extension
• Firefox extension

Next lesson: Conditional Rendering in React, using pizza availability, delivery options, and cart messages.