Chapter 10: React Developer Tools
Core Idea
The React Developer Tools browser extension is the primary way to inspect a live component tree — component structure, props, state, and render performance — without adding any code to the app itself.
Key Concepts
- Browser extension: available for Chrome, Firefox, and Edge. Visiting a page built with React reveals two new devtools panels: Components and Profiler.
- Safari and other unsupported browsers: install the standalone
react-devtools npm package (npm install -g react-devtools), run react-devtools from a terminal to open the standalone window, then connect the target page by adding <script src="http://localhost:8097"></script> as the first tag in <head>.
- React Native: React Native DevTools is the built-in debugger and integrates React Developer Tools' features (including native element highlighting/selection) directly — no separate extension install needed for RN 0.76+. Older RN versions fall back to the standalone build via the same Safari-style setup.
Reference Tables
| Environment | Setup |
|---|
| Chrome / Firefox / Edge | Install the browser extension |
| Safari / other browsers | npm install -g react-devtools → run react-devtools → add <script src="http://localhost:8097"> |
| React Native ≥ 0.76 | Built into React Native DevTools, no extra install |
| React Native < 0.76 | Standalone react-devtools build (same as Safari path) |
Key Takeaways
- The Components panel inspects the live tree (props/state per component); the Profiler panel diagnoses render-performance problems.
- Safari has no extension — it needs the standalone
react-devtools package plus a <script> tag pointing at localhost:8097.
- On React Native ≥ 0.76 you get this for free via React Native DevTools; only older RN versions need the standalone-build workaround.
Connects To
- Ch 11 (Your First Component): what the Components panel is inspecting.
- Ch 21 (State: A Component's Memory): state values visible per-component in the panel.