Debugging React Native

React Native is a cross-platform mobile development framework written in JavaScript. This article covers the official ways of debugging React Native along with other existing tools.

Photo by Lautaro Andreani on Unsplash

In the past few years, I have worked quite a bit with react native. My first experience with debugging was when I opened the browser-devtools, which is the default debugger of react native, and noticed that some functionality was missing. The “Elements” tab is blank and you cannot examine or change the component hierarchy as you would in regular web development. Similarly, the “network” tab appears to be empty.

It became clear to me that the browser-devtools were not enough to debug react native, since some of the basic requirements for debugging were missing.

Ultimately, I want to be able to:

• Debug scripts and components – view console output, set breakpoints, and inspect runtime values
• Debug the react component hierarchy
• Profile components – analyze component performance and discover what causes the component to render
• Track network requests

The official way of react native

In the official debugging guide, several debugging tools are mentioned, and when used together, they cover all the basic needs that were mentioned above.

Let’s start by reviewing these tools.

The browser developer tools

chrome dev tools

The default and basic debugger of react native is the browser-devtools.
No installation or special configuration is needed, simply open the debug menu of the phone you are working on and choose the debug option.

debug menu

Open browser-devtools at “http://localhost:8081/debugger-ui/” and under the “source” tab you will be able to debug scripts and components.

React Native DevTools

From the react native docs:

You can use the standalone version of React Developer Tools to debug the React component hierarchy. To use it, install the react-devtools package globally:

react-devtools

react-devtools is the official standalone version of react developer tools. The setup is quite easy, simply install it globally –

npm install -g react-devtools

and run the command –

react-devtools

After lunching react-devtools and selecting “debug” in the debug menu of the phone, the react-devtools will connect to our app and we will be able to search our component in the component tree as shown in the image above or we can use the “Show Inspector” option in the debug menu and select the desired element. In both cases, we will be able to debug the react component hierarchy.

In the right panel, we can see the styles, props, and the local state.
These values can be changed by simply clicking and changing them. The changes will be reflected immediately.

The react-devtools also provides a “profiler” tool, which is located just next to the “components” tab in the right panel. The profiler collects timing information about each component that is rendered in order to identify performance bottlenecks. The profiler can also record why each component is rendered, which I find extremely useful when working with react-navigation and redux.

react-devtools profiler

Reactotron

From the react native docs:

Reactotron is an open-source desktop app that allows you to inspect Redux or MobX-State-Tree application state as well as view custom logs, run custom commands such as resetting state, store and restore state snapshots, and other helpful debugging features for React Native apps.

Reactotron

Reactotron is mentioned in the official docs as the tool for debugging your application state, it offers some very useful debugging features, and one of them is tracking network requests.

Disclaimer: we can track network requests without Reactotron or any other external tools at all. We can select “Toggle Inspector” in the debug menu of the phone, a UI with several tabs will be opened and under the “Network” tab we will be able to see our network requests.

Although this option is available, I find it hard and unintuitive to track API calls this way.

Toggle Inspector

Mission completed?

Together, the browser-devtools, the react-devtools, and reactotron give us all the basic requirements we mentioned above.

In other words, yes!, we can use them and accomplish all our needs, but I have to admit, it’s a bit annoying to jump between 3 different debugging tools. Wouldn’t it be nice if they were all combined into a single debugger tool?

The standalone app based on official debugger of React Native, and includes React Inspector / Redux DevTools etc.

react-native-debugger

react-native-debugger is all-in-one debugger.

It includes –

1. chrome-devtools – which gives us the ability to debug scripts and components. We can also inspect network requests using the “network” tab if the network inspection is enabled. To enable network inspect, open the context menu (right-click on the left panel) and select “Enable Network Inspect”.

2. react-devtools – which gives us the ability to debug the react component hierarchy and profile components the same way we did, using the standalone react-devtools.

All our requirements were met with a single debugging tool, and there are even more features beyond our basic requirements such as redux-devtools and global variables.