Debugging

info

Debugging in React Native is in a state of flux as the React Native core team has announced the removal of Flipper from RN core, and the introduction of a new debugging workflow. As a result these docs are likely to change as we move to RN 0.73.

React Devtools

https://github.com/facebook/react/tree/main/packages/react-devtools

The React DevTools can be accessed via npx react-devtools.

Note: sometimes can take a couple reloads to connect.

Hermes Debugging

You can debug Hermes via the built in Chrome inspector:

1. In a Chrome browser window, navigate to chrome://inspect.
2. Use the "Configure..." button to add the dev server address (typically localhost:8081).
3. You should now see a "Hermes React Native" target with an "inspect" link. Click this to open the debugger.

Network Inspection

This can be done with Proxyman (💻 MacOS only)

https://proxyman.io/

This is a great tool for debugging Network Requests with some useful features like overriding responses.

Resources

https://reactnative.dev/docs/debugging#react-developer-tools

https://docs.swmansion.com/react-native-reanimated/docs/#known-problems-and-limitations