React DevTools
Component trees, props/state, Suspense, error boundaries, profiling
11 commands
react-devtools enable
browse react-devtools enableEnable React DevTools integration
Enable
$ browse react-devtools enablereact-devtools disable
browse react-devtools disableDisable React DevTools
Disable
$ browse react-devtools disablereact-devtools tree
browse react-devtools treeShow component tree with indentation
Component tree
$ browse react-devtools treereact-devtools props
browse react-devtools props <selector>Show props, state, and hooks of component
Inspect props
$ browse react-devtools props @e3react-devtools suspense
browse react-devtools suspenseShow Suspense boundaries and their status
Suspense status
$ browse react-devtools suspensereact-devtools errors
browse react-devtools errorsShow error boundaries and caught errors
Error boundaries
$ browse react-devtools errorsreact-devtools profiler
browse react-devtools profilerShow render timing per component
Render profiling
$ browse react-devtools profilerreact-devtools hydration
browse react-devtools hydrationShow hydration timing (Next.js apps)
Hydration timing
$ browse react-devtools hydrationreact-devtools renders
browse react-devtools rendersShow what re-rendered since last commit
Re-renders
$ browse react-devtools rendersreact-devtools owners
browse react-devtools owners <selector>Show parent component chain
Owner chain
$ browse react-devtools owners @e3react-devtools context
browse react-devtools context <selector>Show context values consumed by component
Context values
$ browse react-devtools context @e3