Best way to debug React Native apps
December 17, 2019
As you might know React Native by default includes different methods to debug an application which you can enable by going into the Developers Menu (by shaking the device or pressing ⌘ + D on simulator).
The second method is the Inspector, which when enabled will let you choose and inspect any React Native components right within the app, by showing their styling, rendering timing and network use.
These methods combined work for most cases, but they lack the power to debug certain parts of the app, like the state and components hierarchy and props. Because of that, the community has created several apps that fork the vanilla tools that come with React Native and extend their functionality by developing on top of them. One of the most popular and most used debugging apps is the React Native Debugger, which we also use in the office. This is a standalone electron app which is based on the official React Native debugger combined with a React Inspector and Redux DevTools.
The top left section shows the state of the app over time (Redux DevTools). Here you can see how the state changes according to the dispatches being fired on runtime. You can also go back in time and play it again to inspect the order and values of the changes. It also features a diff viewer on states between dispatches: the bottom bar of this section presents different options from enable/disable state recording, locking changes of the state, manual dispatch of actions and saving options. With this section you have full control of the app state from the debugger without needing to execute flows in the app.
The bottom left section shows the React DOM tree (React Inspector) where you can inspect the DOM tree and each React component that is present, along with their props and styles. You can also change any property or style of any component and you will see it change in real time on the app.
We can conclude that React Native Debugger combines powerful features into a single stand-alone app which helps us to really inspect what's going on under the hood and reduce the burden of opening different apps and switching from one window to another while developing or solving issues.