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.
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
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.
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 is the official standalone version of react developer tools. The setup is quite easy, simply install it globally -
npm install -g react-devtoolsand run the command -
react-devtoolsAfter 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.
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 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.
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?
react-native-debugger
The standalone app based on official debugger of React Native, and includes React Inspector / Redux DevTools etc.
react-native-debugger is all-in-one debugger.
It includes -
- 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.
Flipper
Flipper is a platform for debugging iOS, Android and React Native apps. Visualize, inspect, and control your apps from a simple desktop interface. Use Flipper as is or extend it using the plugin API.
Flipper is built as a platform. In addition to using the tools already included, you can create your own plugins to visualize and debug data from your mobile apps. Flipper takes care of sending data back and forth, calling functions, and listening for events on the mobile app. Flipper is just a communication channel between the desktop app and your application. Its true power comes from its plugins.
Flipper provides several features out of the box, some of them are:
- Native Layout Inspector - View and edit the native layout output by the React Native renderer
- Images - Inspect what images were fetched, where they are coming from and selectively clear caches.
- React DevTools - Integration with the react-devtools
- Network inspector
Starting from version 0.62, React Native includes support for Flipper by default.
Conclusion
The official tools for debugging react-natvie should meet all our basic debugging needs. Alternatively, there’s the react-native-debugger tool, which integrates the chrome-devtools as well as the react-devtools into a single tool.
For more complex scenarios I would use Flipper as it has some advanced features and plugins that the other tools are missing.
If you are familiar with other tools or you want to share your thoughts, please leave a comment.
