Replay DevTools

React panel

Inspect React components at any point in time.

React panel

Basics

Replay’s React panel is similar to the React DevTools browser extension, but includes functionality only possible with time travel.

Select component picker

Select components with the component picker.

Inspect the component tree

Explore the current component tree with higher ordered components highlighted on the right.

Search for components

Press cmd+f or select the search input to find components within the component tree.

Inspect Props + State

Inspect component props, state, and hook values with built in object formatting and jump to function definition.

Jump to definition

Click the Jump button in the top right to go to where the component is defined.

Time Travel

View changed props and state

Because we’re able to compare the current component’s render with the prior, we are able to highlight the props, state, and hook values that have changed in yellow.

View hook values

Because we’re able to collect more information at while replaying the replay, we’re able to stop showing the hook index and start showing the hook value and function definition.

Mapped component names

Because we’re not concerned about the performance overhead of processing sourcemaps while replaying, we’re able to source map component names so you’re able to see the original names.

Learn more

Learn how to use the React panel to examine hooks and properties, and observe how they change over time. This tutorial will also teach you how to navigate from the React panel to the specific element that it rendered. You can find the whole course at replay.help/course

Previous
Focus window