Best way to debug React Native apps

 Reynaldo Rodríguez
Reynaldo Rodríguez
December 17, 2019
React Native
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.

Don't miss a thing, subscribe to our monthly Newsletter!

Thanks for subscribing!
Oops! Something went wrong while submitting the form.

Video Calls in React Native backed by Twilio

This guide will teach you how to build a React Native demo app with an in-app video call functionality provided by Twilio Programmable Video.

May 19, 2020
React Native

Behind the scenes of Ethereum Pet Shop tutorial

As a follow-up to our serverless REST API post, this article provides a thorough step-by-step guide on how to creating a GraphQL API boilerplate based on Hasura and the AWS stack.

March 30, 2020


Ready to get started?
Use the form or give us a call to meet our team and discuss your project and business goals.
We can’t wait to meet you!

Write to us!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.