Debugging React applications becomes much easier when you can inspect your React components. Brian Vaughn, React DevTools core maintainer, has joined the Replay team (opens in a new tab) 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 (opens in a new tab)!
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.
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.
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.
By default, React component display names are anonymous. You can easily add better display names with the transform-react-display-name (opens in a new tab) babel plugin to make React DevTools easier to use.
npm install --save-dev @babel/plugin-transform-react-display-name
"@babel/plugin-transform-react-display-name"to your babel config.