Debugging React applications becomes much easier when you can inspect your React components. Brian Vaughn, React DevTools core maintainer, has joined the Replay team to replicate the same DevTools experience you get in other browsers.
Want to see React DevTools in action? Check out our React Calculator Guided Example!
It’s likely that the replay will start recording before React is initialized on the page. If you see the message
React DevTools not yet initialised at this point in time. in the DevTools pane, move to another point in the replay after initialization has occurred.Inspecting components
View React components from the React tab in the Console. The components will appear in the component hierarchy so you can see the relationship between components.
You can search with text or regex, or click the selector icon next to search to select a component in the application viewer.
Inspecting component props, state, and hooks
Click on a component to view details, including any props, state, or hooks associated with the component. You can also see what source rendered the component.
Click the copy icon within a detail pane to copy the contents to your clipboard to easily share.
Updating component display names
By default, React component display names are anonymous. You can easily add better display names with the transform-react-display-name babel plugin to make React DevTools easier to use.
Getting set up
npm install --save-dev @babel/plugin-transform-react-display-name
- Add
"@babel/plugin-transform-react-display-name"to your babel config.
React Integrations