React DevTools

Inspect React component trees, props, state, Suspense boundaries, and hydration timing from the CLI.

Getting Started

Enable React DevTools for the current session:

browse react-devtools enable

This downloads the React DevTools hook (first time only), injects it into the page, and reloads. Works with any React app — Next.js, Remix, Vite, CRA.

Component Tree

View the full component hierarchy:

$ browse react-devtools tree
<App>
  <Layout>
    <Header />
    <Suspense fallback={<Spinner />}>
      <Dashboard data={...} />
    </Suspense>
    <Footer />
  </Layout>
</App>

Props & State

Inspect any component's props, state, and hooks:

$ browse react-devtools props @e3
Component: SearchInput
Props:
  placeholder: "Search..."
  onChange: ƒ handleSearch()
State:
  query: ""
  results: []
Hooks:
  useState: ""
  useCallback: ƒ

Suspense Boundaries

Check which Suspense boundaries exist and their current status:

$ browse react-devtools suspense
Suspense #1: <Suspense fallback={<Spinner />}>
  Status: resolved
  Children: <Dashboard />

Suspense #2: <Suspense fallback={<SkeletonList />}>
  Status: pending
  Children: <CommentList />

Error Boundaries

Find error boundaries and any caught errors:

$ browse react-devtools errors
ErrorBoundary #1: <ErrorBoundary>
  Status: clean (no errors caught)

ErrorBoundary #2: <ApiErrorBoundary>
  Status: error caught
  Error: "Failed to fetch /api/users"

Hydration Timing

Measure server-side rendering and client-side hydration performance (Next.js):

$ browse react-devtools hydration
Component          | Server | Client | Delta
App                | 12ms   | 45ms   | +33ms
Layout             | 3ms    | 8ms    | +5ms
Dashboard          | 8ms    | 120ms  | +112ms ⚠
Footer             | 1ms    | 2ms    | +1ms

Components with large deltas indicate hydration performance issues.

Render Profiling

See what re-rendered and why:

$ browse react-devtools profiler
Component          | Renders | Total Time
App                | 1       | 45ms
Dashboard          | 3       | 360ms ⚠
SearchInput        | 12      | 24ms
ResultList         | 3       | 180ms

$ browse react-devtools renders
Components that re-rendered since last commit:
  Dashboard (props changed: data)
  ResultList (props changed: items)

Disabling

browse react-devtools disable

This removes the DevTools hook and reloads the page. No performance impact when disabled.

On this page