React DevTools First Pass

The browser Elements panel answers a browser question. It shows the DOM nodes that exist on the page. React DevTools answers a React question. It shows the components that produced those nodes and the props, state Hooks, and contexts associated with them.

Those trees overlap, but they are not copies.

function LessonCard({ lesson }) {
  return (
    <article>
      <h2>{lesson.title}</h2>
      <button type="button">Open</button>
    </article>
  );
}

The browser Elements panel shows article, h2, and button. React DevTools shows LessonCard as a component and lets you inspect its lesson prop.

Install the Development Extension

React Developer Tools is available as a browser extension for current Chrome, Firefox, and Edge browsers. Install it from the link in the official React documentation rather than from a similarly named search result.

After installation, open the local Vite app and then open browser developer tools. Two React panels appear when React is detected.

• Components
• Profiler

If the panels do not appear, reload the page after installing the extension. Check that the extension is enabled for the current browser profile and permitted on the current site.

Read the Component Tree

Use a small application with named components.

function App() {
  return (
    <LessonPlanner>
      <LessonList />
    </LessonPlanner>
  );
}

The Components panel shows a tree close to this.

App
  LessonPlanner
    LessonList
      LessonCard
      LessonCard

Host DOM elements may be hidden from the default component-focused tree. The Components panel shows React component nesting. It does not claim that the DOM contains a <LessonPlanner> tag.

Select a LessonCard. The right panel shows its props. Select LessonPlanner and the Hooks section shows its state values in call order.

The Hook entries may be labeled State until custom Hooks or source information provide more descriptive context. Match them with the order of useState calls in the component.

const [query, setQuery] = useState("");
const [showCompleted, setShowCompleted] = useState(true);

The first state entry is the query. The second is the checkbox setting.

Search Before Expanding Everything

A real component tree can contain providers, router components, layout components, and repeated list items. Use the component search to locate a named component.

Search for LessonCard, then move among matches. Repeated cards can be distinguished by their props and their position under parents.

Filters can hide components that add noise. Use them carefully. A hidden provider or wrapper may be exactly where a value enters the tree. Reset filters when the expected component is missing.

Inspect Props at the Receiving Component

Suppose one card displays the wrong title. Select that card in the Components panel and inspect lesson.title.

If the prop already contains the wrong value, the card's rendering expression is not the first source of the problem. Move to the component that supplied it and inspect the passed data.

If the prop is correct while the DOM text is wrong, inspect the component code and the actual selected instance. You may be looking at another repeated card or at a stale DOM selection.

This produces a useful direction of travel.

wrong DOM output
  -> inspect producing component
  -> inspect received props and state
  -> move toward the source of the wrong value

React DevTools can identify an element's owner, meaning the component that created that element. The owner is not always the same as the element's immediate rendered parent.

Inspect State Without Adding Logs

Select LessonPlanner and type into its query field. The state entry updates as React renders.

This confirms whether the handler reached the setter and whether the next render received the value. It does not prove that the filtering calculation is correct.

For example, state can show state while a filter accidentally reads another variable.

const visibleLessons = lessons.filter((lesson) =>
  lesson.title.includes(searchText),
);

If the real state variable is query, React DevTools proves state updated and points the investigation toward the calculation.

Temporary logging is still useful for event ordering and non-React values. DevTools reduces the need to scatter logs merely to discover current props.

Edit Values Only as an Experiment

React DevTools can let you edit some props or state in development. Changing a value there is a temporary experiment.

Set showCompleted to false and observe the list. This can prove that the render path for false works before you investigate a checkbox handler.

The edit does not change source code. The next application update may replace it. Do not use DevTools changes as a repair.

If a manual state edit produces correct UI, inspect the event and setter path. If the manual edit still produces wrong UI, inspect derived calculations and rendering.

Locate the Source Component

React DevTools can open a selected component's source location when source maps and editor integration are available. Even without direct editor opening, the component name narrows the source search.

Use unique component names and retain development source maps. Vite supplies development mappings from transformed modules back to .jsx or .tsx files.

Generated wrapper names can still appear for framework or library components. In this small Vite project, the components are yours, so the tree should remain readable.

Highlight Component Renders

React DevTools settings can highlight components as they render. Enable the render highlight, then type one character in the search field.

The highlight shows which visible regions rendered during that update. It does not report whether the render was slow, and it does not mean React replaced every highlighted DOM node.

A component can render and produce the same host output. React DOM may then have nothing to change for that component's visible nodes during commit.

Record a Profiler Interaction

The Profiler records React commits. A commit is the point where React applies completed work to the host environment.

Open the Profiler panel.

1. Start recording.
2. Type one character in the lesson search.
3. Toggle the completed checkbox.
4. Stop recording.

The recording shows one or more commits. Select a commit to inspect which components rendered and how much time React measured for them in that development session.

Flamegraph and ranked views present the same recorded work differently. The flamegraph preserves the component tree. Ranked view groups the most expensive recorded components for the selected commit.

Do not optimize the small application from tiny duration differences. A useful profile records one reproducible interaction and shows the components involved in its commit.

Interpret Development Measurements Carefully

Development React includes extra checks and source support. Strict Mode can also perform additional render work. Browser extensions and an open debugger add overhead.

A development profile is useful for locating suspicious work and comparing component relationships. Reliable performance decisions require a production profiling setup.

Do not report a single local duration as a universal result. Record the interaction, browser, build mode, data size, and device conditions.

interaction: type one character
data: 30 local lessons
browser: current Chrome
mode: Vite development
result: LessonPlanner and LessonList rendered

That statement can be reproduced. "React is slow" cannot.

Inspect the Correct Tree for the Question

Use the browser Elements panel to locate DOM nodes, verify label connections, inspect computed CSS, and confirm accessibility attributes.

Use React DevTools Components to find the rendering component and inspect its props, state Hooks, and creator.

Use the Profiler to see which components rendered in a recorded commit, how the time was distributed, and whether an interaction produced one commit or several.

Selecting the correct panel saves more time than learning every panel option at once.

A Focused Debugging Pass

Create one deliberate bug in the filter.

const visibleLessons = lessons.filter((lesson) =>
  lesson.title.includes(query),
);

The search becomes case-sensitive. Type state while a lesson title contains State.

Now inspect in order.

1. Components panel confirms query contains state.
2. LessonList props confirm it receives an empty array.
3. The parent source shows the filter calculation.
4. Normalizing both strings repairs the result.

lesson.title.toLowerCase().includes(query.toLowerCase())

DevTools did not invent the repair. It reduced the unknown area from the entire UI to one derived value calculated by one component.

Source Notes

• React documentation, React Developer Tools
• React documentation, <Profiler>
• React documentation, React Performance tracks