How do you debug React Native?

Question

How does one debug their React code with React Native while the app is running in app simulator?

Answer 1

If you're using Redux, I highly recommend React Native Debugger. It includes Chrome devtools, but also has Redux devtools and React devtools.

Redux Devtools: This allows you to view your actions, and step back and forth through them. It also allows you to view your redux store and has a feature to automatically diff the previous state with the updated state for each action, so you can see that as you step back and forth through a series of actions.

React Devtools: This allows you to inspect a certain component, namely all of it's props as well as it's component state. If you have a piece of the component state which is a boolean, it lets you click it to toggle it and see how your app reacts when it changes. Great feature.

Chrome Devtools Allows you to see all your console outputs, use breakpoints, pause on debugger; etc. Standard debugging features. If you right click the area where your actions are listed in Redux Devtools and select 'Allow Network Inspect', you can then inspect your API calls in the network tab of Chrome Devtools which is sweet.

In conclusion having these all in one place is fantastic! If you don't need one of them you can toggle it on/off. Get React Native Debugger and enjoy life.