Best way to debug React Native apps

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 first method which is the remote JavaScript debugging will create a bridge between the app and your browser and will output all the logging that comes from JavaScript dependencies. This is super helpful as it will let you find most issues that occur at runtime while developing an app.

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.

The third and last, but not least important, is the vanilla debugger section, which is based on the official implementation. This will allow you to inspect the JavaScript logging and visualize other metrics such as performance, networking and memory.

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.

‍