Open the React tab
Select a page and switch the toolbar from DevTools to React, or choose Debug › Show React DevTools (⇧⌘R). Both tabs stay connected; switching does not disconnect anything.
What you get
- The component tree with search.
- Props, state, hooks and context of the selected component. In React development builds you can edit them and the page updates right away.
- Highlight updates when components render.
- The profiler with flame graph and commit details.
With the screencast on, the live preview stays visible to the left of the React DevTools; drag the divider to change its width.
How it connects
React looks for the DevTools when it starts, so their backend has to load before React. While the React tab is open, Tapscope adds a startup script to the page for that.
- Page loaded before you opened the tab: the tab shows React detected and a Reload and connect button. After that, it reconnects on every reload and navigation by itself.
- No React on the page: the tab says so and keeps checking, in case React loads later.
Tested in the iOS Simulator, an Android emulator and Chrome. The same path is used on an iPhone.