Debugging in React Native
Encountering issues is an inevitable part of software development and as such to ensure that our all of our application flows works well in different environments we need to identify and analyse these errors so as to find where or what or how the defect occurred and then how to resolve it. Now debugging can be quite tedious and complicated at times. But we do have some great tools at our disposal that provide some ease there which we’ll discuss briefly.
Chrome Developer Tools (Chrome DevTools)
This is one of most handy tool for debugging react native applications which is provided by framework as default. To use it first make sure that your device is connected to same network and then simply pop open the developer menu in your device and choose “Debug” or “Debug JS Remotely” which should then take you http://localhost:8081/debugger-ui/. Here you can access the Developer Tools via Inspect where-in you can see your applications logs.
Reference link : https://developer.chrome.com/docs/devtools/
React Native Debugger
Another popular debugging option is React Native Debugger. It’s a standalone desktop app that works on macOS, Windows, and Linux. It integrates both Redux’s DevTools and React’s Developer Tools in one app so you don’t have to work with two separate apps for debugging, thus giving you the best of both worlds. With this combination, react native developers can get many features as:
- Redux Debugger — Allows us to debug your real time redux state. You can use Redux time travel to debug your state over the time. This technique is especially helpful when working on big projects.
- UI Inspector — Like the element inspector in web pages this allows us to see all the tags you use in your app and check the styling. Even more amazing, you can test your UI and change styling from the inspector.
- Network Inspector — It helps us to monitor the api requests made by us and verify & analyse the response from server. To enable the network inspector/inspect, open the context menu and select the Enable Network Inspect.
- AsyncStorage Management — It allows us to monitor our asyncStore via logs in console via simple command — console.log(showAsyncStorageContentInDev())
- Breakpoints — This is a really helpful technique, we can simply set breakpoints wherever you want to pause debugger execution and see the state of code variables or look at the call stack at a certain breakpoint.
Reference link : https://github.com/jhen0409/react-native-debugger
Reactotron
Reactotron is a macOS, Windows, and Linux app for inspecting React JS and React Native apps. It provides features like:-
- View your application state
- Show API requests & responses
- Perform quick performance benchmarks
- Display messages similar to console.log
- Dispatch actions like a government-run mind control experiment
- Hot swap your app’s state using Redux or mobx-state-tree
- Track your sagas
- Track your Async Storage in React Native.
Reference Link : https://github.com/infinitered/reactotron
Flipper
Flipper is one of the most popular debugging platforms. The Flipper desktop app and the mobile native SDK establish a connection which is used to send data to and from the device.
Flipper itself only provides the architectural platform. What makes it useful are the plugins built on top of it. Flipper provides the architecture that allows these plugins to interact with app. It has many useful plugins that could be helpful in our debugging phase. Some of the features/plugins provided are:
- Crash Reporter — It shows a notification in Flipper whenever an app crashes. You can click on the notification to see crash information such as stacktrace and other metadata.
- Logs — The Logs plugin shows device logs without any additional setup. This is a device plugin, which means it’s not tied to any specific app and there is no additional setup needed to see the logs.
- Network — It provides a Network Inspector, which is used to inspect outgoing network traffic in your apps allowing us to browse all requests being made and their responses easily.
- LeakCanary — It is an open-source memory leak detection library. Each leak detected is displayed with hierarchy of objects, beginning with the garbage collector root and ending at the leaked class.
- Hermes Debugger — You can debug just as easily in Flipper as you can in Chrome by clicking the Hermes Debugger menu.
- React Devtools — You really don’t have to miss out on the features provided by React Devtools. You can use React Devtools here and monitor your component trees and the props it consumes etc.
There are many other plugins that are shipped with Flipper. But if there is no plugin that does exactly what you want, then you can build your own plugin tailored to your needs. Also there are many plugins available as open-source e.g., react-native-performance for running performance benchmarks, redux-debugger for logging your redux actions and state changes etc. and many more that you can install and use from the Manage Plugin Tab.
Flipper Installation and documentation : https://fbflipper.com/
Conclusion :
There are different tools available for debugging in React Native. React native official debugging tool meets all our requirement. For debugging api response you can use Flliper and Reactotron. For latest announcements and updates keep checking on developer form and Official Blog page of React Native.
