React DevTools (the family)

Active contributors: hoxyq, jackpope, mofeiZ, eps1lon, jorge-cab

Purpose

React DevTools is a browser extension (Chrome / Firefox / Edge), an Electron standalone app, and a <script>-injectable inspector that all share one core. The code is split across nine packages:

Package	Role
react-devtools-shared	The bulk of the logic. Backend (talks to fibers), frontend (the React UI), bridge, profiling, hook inspection.
react-devtools-extensions	The browser extension build. Per-browser entry points (Chrome, Firefox, Edge).
react-devtools	The Electron standalone app.
react-devtools-core	Same engine wrapped for use in non-extension hosts (React Native, Hermes inspector, …).
react-devtools-inline	Embedded inspector for environments like CodeSandbox.
react-devtools-shell	A test harness to run DevTools against fixtures.
react-devtools-fusebox	Newer experimental UI integration.
react-devtools-timeline	The "Timeline" / "Schedule profiler" view.
react-debug-tools	Lower-level fiber-inspection helpers used by DevTools and by act warnings. Lives in the runtime tree.

The team treats DevTools as one project — the extension build pulls from react-devtools-shared, and almost every change ends up touching at least two packages.

Directory layout (the bulk)

packages/react-devtools-shared/src/
├── backend/
│   ├── fiber/
│   │   ├── renderer.js                 # the most-edited file in DevTools
│   │   ├── DevToolsHook.js
│   │   └── ...
│   ├── legacy/                         # support for very old React versions
│   ├── views/                          # contextual panels in the inspector
│   └── ...
├── frontend/
│   ├── views/Components/               # the Components tab
│   ├── views/Profiler/                 # the Profiler tab
│   ├── views/Settings/
│   └── ...
├── bridge.js                           # message bus between backend and frontend
├── hooks/                              # the hooks-inspection helpers
├── devtools/store.js                   # the central frontend store
├── inspectedElement/                   # how the right-pane "props/state/hooks" data is fetched
├── profilingCache.js
├── ReactSymbols.js                     # the DevTools' own (compatible) symbol table
└── __tests__/                          # ~200 tests

Key abstractions

Abstraction	File	Description
The hook	packages/react-devtools-shared/src/backend/fiber/DevToolsHook.js	The global __REACT_DEVTOOLS_GLOBAL_HOOK__ injected by the extension. Every renderer registers itself here.
Renderer interface	packages/react-devtools-shared/src/backend/fiber/renderer.js	One implementation per supported React version. Walks the fiber tree and builds the operations stream the frontend renders.
Bridge	packages/react-devtools-shared/src/bridge.js	Typed message passing between the page (backend) and the panel (frontend). Operations stream + RPCs.
Store	packages/react-devtools-shared/src/devtools/store.js	The frontend's source-of-truth: a tree of elements with stable ids, indexed for fast lookup.
Hook inspection	packages/react-devtools-shared/src/backend/console/index.js and packages/react-debug-tools/src/ReactDebugHooks.js	Re-runs a function component with a fake dispatcher so the inspector can label useState/useReducer/etc. cells.
Profiler data	packages/react-devtools-shared/src/profilingCache.js and packages/react-devtools-timeline/	What the Profiler tab renders — commit data sent by ReactFiberDevToolsHook.js.

How it works

graph LR
  Page[User page with React] -->|installs hook| GlobalHook[__REACT_DEVTOOLS_GLOBAL_HOOK__]
  React[react-reconciler.js: ReactFiberDevToolsHook] -->|publishes events| GlobalHook
  GlobalHook -->|operations stream| Backend[react-devtools-shared/backend]
  Backend -->|via bridge| Frontend[react-devtools-shared/frontend]
  Frontend -->|renders| Panel[Browser DevTools panel]

The reconciler emits a tiny set of events (commit, unmount, flushPendingErrors, …) via the global hook. The backend listens, walks the fiber tree, and produces an operations stream — a compact, integer-id-keyed protocol that the frontend decodes into store state. The frontend is itself a React app rendered into the DevTools panel.

The Components tab shows the current tree. The Profiler tab is the commit-by-commit recording fed by the same hook. The Timeline tab (in react-devtools-timeline) renders the per-frame schedule profile that the reconciler emits via packages/react-reconciler/src/ReactFiberPerformanceTrack.js.

Per-renderer branches

Different renderers (DOM, Native, Test, Noop) and different React versions all need slightly different fiber walks. packages/react-devtools-shared/src/backend/fiber/renderer.js has version-conditional branches gated on bridgeProtocol and the renderer's version field. This is why this single file is among the most actively edited in the project.

Build and test

yarn build-for-devtools-dev                                  # build runtime for DevTools to use
cd packages/react-devtools-extensions
yarn build:chrome:local                                      # produce build/chrome/
# Load that as an unpacked extension

Or run the standalone:

cd packages/react-devtools
yarn start

The shell tests and Jest suite live in packages/react-devtools-shell/ and packages/react-devtools-shared/src/__tests__/. CI runs DevTools-specific regression tests in .github/workflows/devtools_regression_tests.yml against multiple historical React versions.

Integration points

• packages/react-reconciler/src/ReactFiberDevToolsHook.js is the only place the runtime touches DevTools. It calls __REACT_DEVTOOLS_GLOBAL_HOOK__.onCommitFiberRoot(...) and friends.
• packages/react-debug-tools/ is imported by DevTools to do hook inspection without needing private reconciler internals.
• The browser extension reads the page's React version via the global hook and picks the right backend code path.

Entry points for modification

• Adding inspection support for a new fiber tag: edit packages/react-devtools-shared/src/backend/fiber/renderer.js and the matching frontend code in packages/react-devtools-shared/src/frontend/views/Components/.
• Adding a Profiler-tab metric: most additions live in packages/react-devtools-shared/src/profilingCache.js and the views under frontend/views/Profiler/.
• Adding a new hook to inspect: packages/react-debug-tools/src/ReactDebugHooks.js is where the dispatcher impersonator lives.

Related pages

• react-reconciler — the runtime side of the integration.
• features/concurrent-rendering — what the Profiler/Timeline visualizes.