0Pricing
React Academy · Lesson

Installing & Opening React DevTools

Set up React DevTools in Chrome/Firefox and navigate the Components panel.

Installing & Opening React DevTools is a free React Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Welcome

In this lesson you will install the React DevTools browser extension and learn to navigate the Components panel to inspect your running React app.

What Are React DevTools?

React DevTools is a browser extension that adds two new panels to Chrome/Firefox DevTools: **Components** (inspect the tree) and **Profiler** (measure performance). It works with any React app in development mode.

Installing the Extension

Go to the Chrome Web Store (or Firefox Add-ons) and search for **React Developer Tools**. Click **Add to Chrome** (or Firefox). The React icon in your toolbar will light up on pages that use React.

Opening DevTools

Press **F12** (or Cmd+Option+I on Mac) to open the browser DevTools. You will see new tabs labeled **Components** and **Profiler** alongside Elements and Console.

The Components Panel

The Components tab shows the full React component tree of the current page. You can click any component to inspect its props, state, hooks, and the source file that rendered it.

Navigating the Tree

Use the search box at the top of the Components panel to filter by component name. Click a component in the tree to see its details on the right side. Use the arrows to expand/collapse children.

Inspecting Props Live

When you click a component, its current **props** appear in the right pane. You can even edit prop values directly in DevTools to preview UI changes without modifying source code.

Inspecting State & Hooks

Below props you will see **hooks** such as State, Effect, Memo, and Ref. Expanding State shows the current value of every useState call in that component.

Development Mode Requirement

React DevTools shows component names only when the app runs in **development mode**. In production builds React strips component names for smaller bundles, so always debug locally with npm start or npm run dev.

Highlight Updates

Enable **Highlight updates when components render** in the DevTools settings (gear icon). Components that re-render will flash with a colour overlay, making unnecessary renders immediately visible.

Quick Check

Which two tabs does the React DevTools extension add to the browser developer tools?

Recap

You installed React DevTools and explored the Components panel. You can now inspect the component tree, read live props and state, edit values in place, and highlight re-renders — all without touching your source code.

Up Next

Next lesson: **Inspecting Component Trees & Props** — you will drill deep into nested hierarchies and learn to read complex prop and state shapes in the DevTools sidebar.

Frequently asked questions

Is the “Installing & Opening React DevTools” lesson free?

Yes — the full text of “Installing & Opening React DevTools” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Installing & Opening React DevTools”?

Set up React DevTools in Chrome/Firefox and navigate the Components panel. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Installing & Opening React DevTools” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Installing & Opening React DevTools
  2. Inspecting Component Trees & Props
  3. Using the Profiler Tab
  4. Debugging Common React Errors
← Back to React Academy